some modify
This commit is contained in:
jiaming
parent
be273d8906
commit
124baba8bf
|
|
@ -2,6 +2,7 @@
|
|||
node_modules
|
||||
/dist
|
||||
/.svn
|
||||
/DataV
|
||||
|
||||
# local env files
|
||||
.env.local
|
||||
|
|
@ -20,3 +21,5 @@ yarn-error.log*
|
|||
*.njsproj
|
||||
*.sln
|
||||
*.sw*
|
||||
|
||||
|
||||
|
|
|
|||
BIN
.svn/wc.db
BIN
.svn/wc.db
Binary file not shown.
|
|
@ -1,304 +1,230 @@
|
|||
<template>
|
||||
<div class="polyline-chart">
|
||||
<loading v-if="!data" />
|
||||
|
||||
<div class="canvas-container">
|
||||
<canvas :ref="ref" />
|
||||
</div>
|
||||
|
||||
<loading v-if="!data" />
|
||||
<label-line :label="data.labelLine" :colors="drawColors" />
|
||||
|
||||
<div v-if="data.labelLine" class="label-line">
|
||||
<div class="label-item" v-for="(label, i) in data.labelLine" :key="label + i">
|
||||
<div :style="`background-color: ${data.color[i % data.color.length]};`"></div>
|
||||
<div>{{ label }}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="for-slot">
|
||||
<slot></slot>
|
||||
</div>
|
||||
<for-slot><slot></slot></for-slot>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import colorsMixin from '../../mixins/colorsMixin.js'
|
||||
|
||||
import canvasMixin from '../../mixins/canvasMixin.js'
|
||||
|
||||
import axisMixin from '../../mixins/axisMixin.js'
|
||||
|
||||
export default {
|
||||
name: 'PolylineChart',
|
||||
props: ['data'],
|
||||
mixins: [colorsMixin, canvasMixin, axisMixin],
|
||||
props: ['data', 'colors'],
|
||||
data () {
|
||||
return {
|
||||
ref: `polyline-chart-${(new Date()).getTime()}`,
|
||||
canvasDom: '',
|
||||
canvasWH: [0, 0],
|
||||
ctx: '',
|
||||
|
||||
defaultFontSize: 10,
|
||||
defaultAxisColor: 'rgba(250, 250, 250, 0.25)',
|
||||
// axis base config
|
||||
boundaryGap: false,
|
||||
mulValueAdd: false,
|
||||
horizon: false,
|
||||
|
||||
xAxisData: [],
|
||||
yAxisData: [],
|
||||
axisWH: [],
|
||||
axisOriginPos: [],
|
||||
yAxisMinMax: [],
|
||||
rowColumnSize: [],
|
||||
valuePointsData: []
|
||||
defaultLineDash: [10, 5],
|
||||
defaultPointRadius: 2,
|
||||
|
||||
defaultValueFontSize: 10,
|
||||
defaultValueColor: '#999',
|
||||
|
||||
valuePointPos: []
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
data (d) {
|
||||
const { init } = this
|
||||
|
||||
d && init()
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
init () {
|
||||
const { $nextTick, initCanvas, data, draw } = this
|
||||
async init () {
|
||||
const { initCanvas, initColors } = this
|
||||
|
||||
$nextTick(e => {
|
||||
initCanvas()
|
||||
await initCanvas()
|
||||
|
||||
data && draw()
|
||||
})
|
||||
},
|
||||
initCanvas () {
|
||||
const { $refs, ref, canvasWH } = this
|
||||
initColors()
|
||||
|
||||
const canvas = this.canvasDom = $refs[ref]
|
||||
const { data, draw } = this
|
||||
|
||||
canvasWH[0] = canvas.clientWidth
|
||||
canvasWH[1] = canvas.clientHeight
|
||||
|
||||
canvas.setAttribute('width', canvasWH[0])
|
||||
canvas.setAttribute('height', canvasWH[1])
|
||||
|
||||
this.ctx = canvas.getContext('2d')
|
||||
data && draw()
|
||||
},
|
||||
draw () {
|
||||
const { ctx, canvasWH, getXAxisData, getYAxisData, calcAxisPos, drawAxis } = this
|
||||
const { clearCanvas } = this
|
||||
|
||||
ctx.clearRect(0, 0, ...canvasWH)
|
||||
clearCanvas()
|
||||
|
||||
getXAxisData()
|
||||
const { initAxisConfig, initAxis, drawAxis } = this
|
||||
|
||||
getYAxisData()
|
||||
initAxisConfig()
|
||||
|
||||
calcAxisPos()
|
||||
initAxis()
|
||||
|
||||
drawAxis()
|
||||
|
||||
const { calcValuePointsData, drawValueColumn, drawValuePolyline } = this
|
||||
const { calcValuePointPos, drawLines, drawFills } = this
|
||||
|
||||
calcValuePointsData()
|
||||
calcValuePointPos()
|
||||
|
||||
drawValueColumn()
|
||||
drawLines()
|
||||
|
||||
drawValuePolyline()
|
||||
drawFills()
|
||||
|
||||
const { drawValuePoints, fillLineColor } = this
|
||||
const { drawPoints, drawValues } = this
|
||||
|
||||
fillLineColor()
|
||||
drawPoints()
|
||||
|
||||
drawValuePoints()
|
||||
drawValues()
|
||||
},
|
||||
getXAxisData () {
|
||||
const { data: { x: { data } } } = this
|
||||
initAxisConfig () {
|
||||
const { data: { boundaryGap } } = this
|
||||
|
||||
this.xAxisData = data
|
||||
this.boundaryGap = boundaryGap
|
||||
},
|
||||
getYAxisData () {
|
||||
let { data: { data, y: { data: yAxisData, max, min, num, fixed } }, filterNull, yAxisMinMax } = this
|
||||
calcValuePointPos () {
|
||||
const { valueAxisMaxMin, axisOriginPos, axisWH, labelAxisTagPos, horizon } = this
|
||||
|
||||
if (yAxisData) {
|
||||
this.yAxisData = yAxisData
|
||||
const { data: { data }, getAxisPointsPos } = this
|
||||
|
||||
return
|
||||
this.valuePointPos = data.map(({ data, againstAxis }) =>
|
||||
getAxisPointsPos(
|
||||
valueAxisMaxMin,
|
||||
data,
|
||||
axisOriginPos,
|
||||
axisWH,
|
||||
labelAxisTagPos,
|
||||
horizon
|
||||
))
|
||||
},
|
||||
drawLines () {
|
||||
const { data: { data }, valuePointPos, drawLine } = this
|
||||
|
||||
data.forEach((line, i) => drawLine(line, valuePointPos[i], i))
|
||||
},
|
||||
drawLine ({ type, lineType, lineDash, lineColor }, points, i) {
|
||||
const { ctx, drawColors, defaultLineDash } = this
|
||||
|
||||
const { canvas: { drawPolyline, drawSmoothline } } = this
|
||||
|
||||
const { color: { hexToRgb } } = this
|
||||
|
||||
let drawLineFun = drawPolyline
|
||||
type === 'smoothline' && (drawLineFun = drawSmoothline)
|
||||
|
||||
let color = hexToRgb(drawColors[i], 0.8)
|
||||
lineColor && (color = lineColor)
|
||||
|
||||
let tureLineType = lineType || 'line'
|
||||
const tureLineDash = tureLineType === 'dashed' ? (lineDash || defaultLineDash) : [10, 0]
|
||||
|
||||
drawLineFun(ctx, points, 1, color, false, tureLineDash, true, true)
|
||||
},
|
||||
drawFills () {
|
||||
const { data: { data }, valuePointPos, drawFill } = this
|
||||
|
||||
data.forEach((line, i) => drawFill(line, valuePointPos[i]))
|
||||
},
|
||||
drawFill ({ fillColor, type, data }, points) {
|
||||
if (!fillColor) return
|
||||
|
||||
const { canvas: { drawPolylinePath, drawSmoothlinePath } } = this
|
||||
|
||||
const { ctx, getGradientColor, filterNull, axisOriginPos: [, y] } = this
|
||||
|
||||
let drawLineFun = drawPolylinePath
|
||||
type === 'smoothline' && (drawLineFun = drawSmoothlinePath)
|
||||
|
||||
const maxValue = Math.max(...filterNull(data))
|
||||
const maxValueIndex = data.findIndex(v => v === maxValue)
|
||||
|
||||
const color = getGradientColor(points[maxValueIndex], fillColor)
|
||||
|
||||
const lastPoint = points[points.length - 1]
|
||||
|
||||
ctx.fillStyle = color
|
||||
|
||||
drawLineFun(ctx, points, false, true, true)
|
||||
|
||||
ctx.lineTo(lastPoint[0], y)
|
||||
ctx.lineTo(points[0][0], y)
|
||||
|
||||
ctx.closePath()
|
||||
|
||||
ctx.fill()
|
||||
},
|
||||
getGradientColor (value, colors) {
|
||||
const { data: { localGradient }, axisAnglePos, horizon } = this
|
||||
|
||||
const { ctx, canvas: { getLinearGradientColor } } = this
|
||||
|
||||
if (localGradient) {
|
||||
return getLinearGradientColor(ctx,
|
||||
...(horizon
|
||||
? [value, [axisAnglePos.leftTop[0], value[1]]]
|
||||
: [value, [value[0], axisAnglePos.leftBottom[1]]]),
|
||||
colors)
|
||||
} else {
|
||||
return getLinearGradientColor(ctx,
|
||||
...(horizon
|
||||
? [axisAnglePos.leftTop, axisAnglePos.rightTop]
|
||||
: [axisAnglePos.leftTop, axisAnglePos.leftBottom]),
|
||||
colors)
|
||||
}
|
||||
|
||||
let [unsetMax, unsetMin] = [false, false]
|
||||
|
||||
!max && max !== 0 && (max = Math.max(...data.map(({ data: td }) => Math.max(...td)))) && (unsetMax = true)
|
||||
!min && min !== 0 && (min = Math.min(...data.map(({ data: td }) => Math.min(...filterNull(td))))) && (unsetMin = true)
|
||||
|
||||
let minus = max - min
|
||||
|
||||
unsetMax && (max += minus / 2) && (max = Math.ceil(max))
|
||||
unsetMin && (min -= minus / 2) && (min = Math.floor(min))
|
||||
|
||||
yAxisMinMax[0] = min
|
||||
yAxisMinMax[1] = max
|
||||
|
||||
minus = max - min
|
||||
|
||||
!num && (num = minus < 9 ? minus + 1 : 10)
|
||||
|
||||
const gapNum = minus / (num - 1)
|
||||
|
||||
this.yAxisData = new Array(num).fill(0).map((t, i) => (max - gapNum * i).toFixed(fixed || 0)).reverse()
|
||||
},
|
||||
calcAxisPos () {
|
||||
const { ctx, canvasWH, xAxisData, yAxisData, axisWH, axisOriginPos, rowColumnSize, data } = this
|
||||
drawPoints () {
|
||||
const { data: { data }, valuePointPos, drawPoint } = this
|
||||
|
||||
const { x: { unit: xUT, offset: xOF }, y: { unit: yUT, fontSize: yFS, offset: yOF }, boundaryGap } = data
|
||||
|
||||
ctx.font = `${yFS}px Arial`
|
||||
|
||||
let yAxisMaxWidth = Math.max(...yAxisData.map(v => ctx.measureText(v).width))
|
||||
|
||||
const yAxisUnitWidth = ctx.measureText(yUT || '').width
|
||||
|
||||
yAxisMaxWidth < yAxisUnitWidth && (yAxisMaxWidth = yAxisUnitWidth)
|
||||
|
||||
const yAxisRowHeight = (canvasWH[1] - (xOF || 20)) / (yAxisData.length + 1)
|
||||
const xAxisColumnWidth = (canvasWH[0] - (yOF || (yAxisMaxWidth + 10)) - ctx.measureText(xUT || '').width - 10) / (xAxisData.length + 1)
|
||||
|
||||
axisWH[0] = xAxisColumnWidth * xAxisData.length
|
||||
axisWH[1] = yAxisRowHeight * yAxisData.length
|
||||
|
||||
rowColumnSize[0] = axisWH[1] / (yAxisData.length - 1)
|
||||
rowColumnSize[1] = axisWH[0] / (boundaryGap ? xAxisData.length : xAxisData.length - 1)
|
||||
|
||||
axisOriginPos[0] = (yOF || yAxisMaxWidth) + 10
|
||||
axisOriginPos[1] = canvasWH[1] - (xOF || 20)
|
||||
data.forEach((line, i) => drawPoint(line, valuePointPos[i], i))
|
||||
},
|
||||
drawAxis () {
|
||||
const { ctx, xAxisData, yAxisData, axisOriginPos, axisWH, canvasWH } = this
|
||||
drawPoint ({ pointColor }, points, i) {
|
||||
const { ctx, drawColors, defaultPointRadius } = this
|
||||
|
||||
const { defaultAxisColor, rowColumnSize, defaultFontSize, data: { x, y, boundaryGap } } = this
|
||||
const { canvas: { drawPoints: drawPFun } } = this
|
||||
|
||||
const { unit: xUT, lineColor: xLC, color: xC, fontSize: xFS } = x
|
||||
const color = pointColor || drawColors[i]
|
||||
|
||||
const { unit: yUT, lineColor: yLC, color: yC, fontSize: yFS } = y
|
||||
drawPFun(ctx, points, defaultPointRadius, color)
|
||||
},
|
||||
drawValues () {
|
||||
const { ctx, data: { data, showValueText, valueTextColor, valueTextOffset, valueTextFontSize } } = this
|
||||
|
||||
const { canvas: { drawLine } } = this
|
||||
if (!showValueText) return
|
||||
|
||||
drawLine(ctx, axisOriginPos, [axisOriginPos[0] + axisWH[0], axisOriginPos[1]], 1, (xLC || defaultAxisColor))
|
||||
drawLine(ctx, axisOriginPos, [axisOriginPos[0], axisOriginPos[1] - axisWH[1]], 1, (yLC || defaultAxisColor))
|
||||
const { defaultValueFontSize, defaultValueColor, valuePointPos, drawValue } = this
|
||||
|
||||
ctx.fillStyle = xC || 'rgba(250, 250, 250, 0.6)'
|
||||
const offset = valueTextOffset || [0, -5]
|
||||
|
||||
ctx.font = `${xFS || defaultFontSize}px Microsoft Yahei`
|
||||
ctx.fillStyle = valueTextColor || defaultValueColor
|
||||
|
||||
ctx.font = `${valueTextFontSize || defaultValueFontSize}px Arial`
|
||||
|
||||
ctx.textAlign = 'center'
|
||||
ctx.textBaseline = 'top'
|
||||
ctx.textBaseline = 'bottom'
|
||||
|
||||
const columnWidth = rowColumnSize[1]
|
||||
|
||||
const columnOffset = boundaryGap ? columnWidth / 2 : 0
|
||||
|
||||
xAxisData.forEach((text, i) => ctx.fillText(text, axisOriginPos[0] + (i * columnWidth) + columnOffset, axisOriginPos[1] + 3))
|
||||
xUT && (ctx.textAlign = 'end') && ctx.fillText(xUT, canvasWH[0], axisOriginPos[1] + 3)
|
||||
|
||||
ctx.font = `${yFS || defaultFontSize}px Microsoft Yahei`
|
||||
|
||||
ctx.fillStyle = yC || 'rgba(250, 250, 250, 0.6)'
|
||||
|
||||
ctx.textAlign = 'right'
|
||||
ctx.textBaseline = 'middle'
|
||||
|
||||
const rowHeight = rowColumnSize[0]
|
||||
|
||||
yAxisData.forEach((text, i) => ctx.fillText(text, axisOriginPos[0] - 7, axisOriginPos[1] - (i * rowHeight)))
|
||||
yUT && (ctx.textBaseline = 'top') && ctx.fillText(yUT, axisOriginPos[0] - 7, 0)
|
||||
data.forEach((line, i) => drawValue(line, valuePointPos[i], offset))
|
||||
},
|
||||
calcValuePointsData () {
|
||||
const { axisWH, axisOriginPos, yAxisMinMax: [min, max], rowColumnSize } = this
|
||||
drawValue ({ data }, points, offset) {
|
||||
const { ctx, getOffsetPoints } = this
|
||||
|
||||
const { data: { data, x, boundaryGap } } = this
|
||||
getOffsetPoints(points, offset).forEach((pos, i) => {
|
||||
if (!data[i] && data[i] !== 0) return
|
||||
|
||||
const columnWidth = rowColumnSize[1]
|
||||
|
||||
const xOffset = (boundaryGap ? columnWidth / 2 : 0)
|
||||
|
||||
const xPos = new Array(x.data.length).fill(0).map((v, i) => axisOriginPos[0] + (columnWidth * i) + xOffset)
|
||||
|
||||
const minus = max - min
|
||||
|
||||
const numberData = data.map(({ data: td }) => ({ data: td.map(v => ((!v && v === 0) || v) ? Number(v) : NaN) }))
|
||||
|
||||
this.valuePointsData =
|
||||
numberData.map(({ data: td }) =>
|
||||
td.map((v, i) =>
|
||||
Number.isFinite(v)
|
||||
? [xPos[i], axisOriginPos[1] - (v - min) / minus * axisWH[1]]
|
||||
: false))
|
||||
},
|
||||
drawValueColumn () {
|
||||
const { ctx, valuePointsData, data: { data, color }, rowColumnSize, axisOriginPos, canvas, filterNull } = this
|
||||
|
||||
const { getLinearGradientColor } = canvas
|
||||
|
||||
const colorNum = color.length
|
||||
|
||||
const columnWidth = rowColumnSize[1] / 3 * 2
|
||||
|
||||
const offset = columnWidth / 2
|
||||
|
||||
data.forEach(({ columnColor, type }, i) => {
|
||||
if (type !== 'column') return
|
||||
|
||||
const filterPoints = filterNull(valuePointsData[i])
|
||||
|
||||
filterPoints.forEach(point => {
|
||||
const height = axisOriginPos[1] - point[1]
|
||||
|
||||
ctx.fillStyle = getLinearGradientColor(ctx, point, [point[0],
|
||||
axisOriginPos[1]], columnColor || color[i % colorNum])
|
||||
|
||||
ctx.fillRect(point[0] - offset, point[1], columnWidth, height)
|
||||
})
|
||||
ctx.fillText(data[i], ...pos)
|
||||
})
|
||||
},
|
||||
drawValuePolyline () {
|
||||
const { ctx, valuePointsData, canvas, color: { hexToRgb } } = this
|
||||
|
||||
const { data: { data, color } } = this
|
||||
|
||||
const colorNum = color.length
|
||||
|
||||
data.forEach(({ lineColor, dashed, type }, i) =>
|
||||
(!type || type === 'polyline' || type === 'smoothline') &&
|
||||
canvas[(!type || type === 'polyline') ? 'drawPolyline' : 'drawSmoothline'](
|
||||
ctx, valuePointsData[i], 1,
|
||||
hexToRgb(lineColor || color[i % colorNum], 0.8), false,
|
||||
(dashed ? [5, 5] : [10, 0]), true, true))
|
||||
getOffsetPoint ([x, y], [ox, oy]) {
|
||||
return [x + ox, y + oy]
|
||||
},
|
||||
fillLineColor () {
|
||||
const { ctx, valuePointsData, canvas, axisOriginPos, axisWH, data: { data }, filterNull } = this
|
||||
getOffsetPoints (points, offset) {
|
||||
const { getOffsetPoint } = this
|
||||
|
||||
const { getLinearGradientColor } = canvas
|
||||
|
||||
const colorBegin = [axisOriginPos[0], axisOriginPos[1] - axisWH[1]]
|
||||
|
||||
data.forEach(({ fillColor, type }, i) => {
|
||||
if (!fillColor) return
|
||||
|
||||
const currentValuePointData = filterNull(valuePointsData[i])
|
||||
|
||||
const pointNum = currentValuePointData.length
|
||||
|
||||
const rightBottom = [currentValuePointData[pointNum - 1][0], axisOriginPos[1]]
|
||||
const leftBottom = [currentValuePointData[0][0], axisOriginPos[1]]
|
||||
|
||||
canvas[(!type || type === 'polyline') ? 'drawPolylinePath' : 'drawSmoothlinePath'](
|
||||
ctx, currentValuePointData, false, true, true)
|
||||
|
||||
ctx.lineTo(...rightBottom)
|
||||
ctx.lineTo(...leftBottom)
|
||||
|
||||
ctx.closePath()
|
||||
|
||||
ctx.fillStyle = getLinearGradientColor(ctx, colorBegin, axisOriginPos, fillColor)
|
||||
|
||||
ctx.fill()
|
||||
})
|
||||
},
|
||||
drawValuePoints () {
|
||||
const { ctx, valuePointsData, data: { data, color }, canvas: { drawPoints } } = this
|
||||
|
||||
const colorNum = color.length
|
||||
|
||||
data.forEach(({ pointColor, type }, i) =>
|
||||
type !== 'column' &&
|
||||
drawPoints(ctx, valuePointsData[i], 4, pointColor || color[i % colorNum]))
|
||||
return points.map(point => point ? getOffsetPoint(point, offset) : false)
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
|
|
@ -323,35 +249,5 @@ export default {
|
|||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.label-line {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
flex-wrap: wrap;
|
||||
font-size: 10px;
|
||||
}
|
||||
|
||||
.label-item {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
height: 15px;
|
||||
margin: 0px 3px;
|
||||
|
||||
:nth-child(1) {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
margin-right: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
.for-slot {
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -6,6 +6,8 @@
|
|||
|
||||
<column-chart-demo />
|
||||
|
||||
<polyline-chart-demo />
|
||||
|
||||
<!-- <border-box-7 class="chart-item">
|
||||
<point-chart :data="pointChartData1" :colors="colors" class="chart" />
|
||||
|
||||
|
|
@ -270,184 +272,6 @@ data: {
|
|||
</div>
|
||||
</border-box-7>
|
||||
|
||||
<border-box-7 class="chart-item" :reverse="true">
|
||||
<polyline-chart :data="polylineChartData1" class="chart" />
|
||||
|
||||
<div class="config-info">
|
||||
<div class="title">Polyline-chart</div>
|
||||
|
||||
<highlight-code>
|
||||
<polyline-chart :data="data" />
|
||||
</highlight-code>
|
||||
|
||||
<highlight-code>
|
||||
data: {
|
||||
data: [
|
||||
{
|
||||
// 必填项 存在空位时 该点忽略
|
||||
data: [99.81, '', ..., '', 99.23, 99.62],
|
||||
// 非必须 配置此项 将进行颜色填充
|
||||
fillColor: ['rgba(0, 186, 255, 0.3)', 'rgba(0, 186, 255, 0)'],
|
||||
// 非必须 配置此项可更改数据点颜色
|
||||
pointColor: '#00db95',
|
||||
// 非必须 配置此项可更改线条颜色
|
||||
lineColor: '#ffc53d',
|
||||
// 非必须 默认为折线
|
||||
// 可选项有 polyline 折线 | smoothline 平滑曲线 | column 柱状
|
||||
type: 'polyline'
|
||||
// 默认为false 实线 非必须
|
||||
dashed: true
|
||||
},...
|
||||
],
|
||||
// 非必须 依次循环使用
|
||||
color: ['#00baff', '#3de7c9', ...],
|
||||
x: {
|
||||
// 必填项 不想显示底部刻度 可以全留空位
|
||||
data: [ '10/01', '', ..., '', '10/23' ],
|
||||
// unit: '日期' // 非必须 单位展示
|
||||
// fontSize: 20 // 非必须 x轴刻度字体大小
|
||||
// offset: 30 // 非必须 x轴向上偏移 此处未配置
|
||||
},
|
||||
y: {
|
||||
min: 96, // 非必须 y轴最小值 未配置则自动根据数据计算
|
||||
max: 100, // 非必须 y轴最大值 未配置则自动根据数据计算
|
||||
fixed: 2, // 非必须 y轴刻度精度
|
||||
num: 10, // 非必须刻度个数 默认为10 数据范围不足10则自动缩减
|
||||
unit: '%' // 非必须 单位展示
|
||||
// fontSize: 20 // 非必须 x轴刻度字体大小
|
||||
// offset: 30 // 非必须 x轴向上偏移
|
||||
},
|
||||
// boundaryGap: false // 非必须 配置为true 将不贴合边界进行绘制
|
||||
}
|
||||
</highlight-code>
|
||||
</div>
|
||||
</border-box-7>
|
||||
|
||||
<border-box-7 class="chart-item">
|
||||
<polyline-chart :data="polylineChartData2" class="chart" />
|
||||
|
||||
<div class="config-info">
|
||||
<div class="title">Polyline-chart</div>
|
||||
|
||||
<highlight-code>
|
||||
<polyline-chart :data="data" />
|
||||
</highlight-code>
|
||||
|
||||
<highlight-code>
|
||||
data: {
|
||||
data: [
|
||||
{
|
||||
data: [99.81, ..., 99.81, 99.56],
|
||||
fillColor: ['rgba(0, 186, 255, 0.3)', 'rgba(0, 186, 255, 0)'],
|
||||
pointColor: '#00db95',
|
||||
type: 'polyline'
|
||||
},
|
||||
{
|
||||
data: [97.81, ..., 97.23, 97.62],
|
||||
fillColor: ['rgba(0, 219, 149, 0.3)', 'rgba(0, 219, 149, 0)'],
|
||||
type: 'smoothline'
|
||||
}
|
||||
],
|
||||
color: ['#00baff', '#3de7c9', ...],
|
||||
x: {
|
||||
data: ['10/01', '', ..., '', '10/23']
|
||||
},
|
||||
y: {
|
||||
fixed: 2,
|
||||
unit: '%'
|
||||
},
|
||||
boundaryGap: true
|
||||
}
|
||||
</highlight-code>
|
||||
</div>
|
||||
</border-box-7>
|
||||
|
||||
<border-box-7 class="chart-item" :reverse="true">
|
||||
<polyline-chart :data="polylineChartData3" class="chart" />
|
||||
|
||||
<div class="config-info">
|
||||
<div class="title">Polyline-chart</div>
|
||||
|
||||
<highlight-code>
|
||||
<polyline-chart :data="data" />
|
||||
</highlight-code>
|
||||
|
||||
<highlight-code>
|
||||
data: {
|
||||
data: [
|
||||
{
|
||||
data: [99.81, 99.42, 99.56, 99.23, 99.62, 99.36, 99.56],
|
||||
columnColor: ['rgba(0, 186, 255, 0.3)', 'rgba(0, 186, 255, 0)'],
|
||||
type: 'column'
|
||||
},
|
||||
{
|
||||
data: [97.81, 97.42, 97.56, 100.23, 97.62, 97.36, 97.56],
|
||||
fillColor: ['rgba(0, 219, 149, 0.3)', 'rgba(0, 219, 149, 0)'],
|
||||
type: 'smoothline'
|
||||
}
|
||||
],
|
||||
color: ['#00baff', '#3de7c9', '#ffffff', '#ffc53d', '#469f4b'],
|
||||
x: {
|
||||
data: ['10/01', '10/02', '10/03', '10/04', '10/05', '10/06', '10/07']
|
||||
},
|
||||
y: {
|
||||
fixed: 2,
|
||||
unit: '%'
|
||||
},
|
||||
boundaryGap: true
|
||||
}
|
||||
</highlight-code>
|
||||
</div>
|
||||
</border-box-7>
|
||||
|
||||
<border-box-7 class="chart-item">
|
||||
<polyline-chart :data="polylineChartData4" class="chart" />
|
||||
|
||||
<div class="config-info">
|
||||
<div class="title">Polyline-chart</div>
|
||||
|
||||
<highlight-code>
|
||||
<polyline-chart :data="data" />
|
||||
</highlight-code>
|
||||
|
||||
<highlight-code>
|
||||
data: [
|
||||
data: [
|
||||
{
|
||||
data: [3, 4.5, 4, 6, 5, 4, 3],
|
||||
dashed: true
|
||||
},
|
||||
{
|
||||
data: [0.5, 1, 0.8, 3, 2, 1.5, 0.5],
|
||||
fillColor: ['rgba(61, 231, 201, 0.5)', 'rgba(61, 231, 201, 0.1)']
|
||||
},
|
||||
{
|
||||
data: [1, 3, 2, 4, 3, 2, 1],
|
||||
type: 'smoothline',
|
||||
fillColor: ['rgba(255, 197, 61, 0.4)', 'rgba(255, 197, 61, 0.1)']
|
||||
},
|
||||
{
|
||||
data: [2, 2.5, 3, 5, 4, 3, 2],
|
||||
type: 'column',
|
||||
columnColor: ['rgba(52, 36, 50, 0.8)', 'rgba(52, 36, 50, 0.4)']
|
||||
}
|
||||
],
|
||||
x: {
|
||||
data: ['10/01', '10/02', '10/03', '10/04', '10/05', '10/06', '10/07']
|
||||
},
|
||||
y: {
|
||||
max: 6,
|
||||
min: 0,
|
||||
unit: '单位'
|
||||
},
|
||||
labelLine: ['收费系统', '收费系统', '监控系统', '供配电系统'],
|
||||
color: ['#00baff', '#3de7c9', '#ffc53d', '#342432'],
|
||||
boundaryGap: true
|
||||
}
|
||||
</highlight-code>
|
||||
</div>
|
||||
</border-box-7>
|
||||
|
||||
<!-- <highlight-code class="chart-item" :reverse="true">
|
||||
<polyline-chart :data="polylineChartData" class="chart" />
|
||||
|
||||
|
|
@ -466,11 +290,14 @@ import attention from './chart/attention.vue'
|
|||
|
||||
import columnChartDemo from './chart/columnChartDemo'
|
||||
|
||||
import polylineChartDemo from './chart/polylineChartDemo'
|
||||
|
||||
export default {
|
||||
name: 'Chart',
|
||||
components: {
|
||||
attention,
|
||||
columnChartDemo
|
||||
columnChartDemo,
|
||||
polylineChartDemo
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
|
|
@ -483,6 +310,10 @@ export default {
|
|||
title: 'Column-Chart',
|
||||
target: 'column-chart'
|
||||
},
|
||||
{
|
||||
title: 'Polyline-Chart',
|
||||
target: 'polyline-chart'
|
||||
},
|
||||
{
|
||||
title: 'Radar-Chart',
|
||||
target: 'radar-chart'
|
||||
|
|
@ -520,208 +351,6 @@ export default {
|
|||
}
|
||||
},
|
||||
|
||||
columnChartData1: {
|
||||
data: [
|
||||
{
|
||||
data: [150, 290, 420, 200, 350, 219],
|
||||
fillColor: ['#247efc', '#ff2fdb']
|
||||
}
|
||||
],
|
||||
x: {
|
||||
data: ['西峡', '周口', '南阳', '驻马店', '郑州', '洛阳']
|
||||
},
|
||||
y: {
|
||||
unit: '辆'
|
||||
},
|
||||
labelLine: {
|
||||
color: '#2b7bfb',
|
||||
data: ['车流量'],
|
||||
type: 'rectangle'
|
||||
}
|
||||
},
|
||||
|
||||
columnChartData2: {
|
||||
data: [
|
||||
{
|
||||
data: [150, 290, 420, 200, 350, 219],
|
||||
fillColor: ['#247efc', '#ff2fdb']
|
||||
}
|
||||
],
|
||||
x: {
|
||||
data: ['西峡', '周口', '南阳', '驻马店', '郑州', '洛阳']
|
||||
},
|
||||
y: {
|
||||
unit: '辆',
|
||||
grid: true,
|
||||
gridLineType: 'dashed',
|
||||
gridLineDash: [2, 2],
|
||||
num: 6
|
||||
},
|
||||
labelLine: {
|
||||
color: '#2b7bfb',
|
||||
data: ['车流量'],
|
||||
type: 'rectangle'
|
||||
},
|
||||
showColumnBG: true,
|
||||
columnBGColor: 'rgba(100, 100, 100, 0.3)'
|
||||
},
|
||||
|
||||
columnChartData3: {
|
||||
data: [
|
||||
{
|
||||
data: [150, 290, 420, 200, 350, 219],
|
||||
fillColor: '#247efc'
|
||||
},
|
||||
{
|
||||
data: [
|
||||
[35, 70, 40],
|
||||
[74, 180, 45],
|
||||
[37, 200, 145],
|
||||
[35, 89, 30],
|
||||
[65, 100, 48],
|
||||
[55, 90, 70]
|
||||
],
|
||||
fillColor: ['#ff2fdb', '#e3b4a2', '#fafb5d']
|
||||
}
|
||||
],
|
||||
x: {
|
||||
data: ['西峡', '周口', '南阳', '驻马店', '郑州', '洛阳']
|
||||
},
|
||||
y: {
|
||||
unit: '万元',
|
||||
grid: true,
|
||||
gridLineType: 'dashed',
|
||||
gridLineDash: [2, 2],
|
||||
min: 0
|
||||
},
|
||||
labelLine: {
|
||||
color: ['#247efc', '#ff2fdb', '#e3b4a2', '#fafb5d'],
|
||||
data: ['玩具', '食品', '服装', '电器'],
|
||||
type: 'rectangle'
|
||||
},
|
||||
showColumnBG: true,
|
||||
columnBGColor: 'rgba(100, 100, 100, 0.3)'
|
||||
},
|
||||
|
||||
columnChartData4: {
|
||||
data: [
|
||||
{
|
||||
data: [150, 290, 420, 200, 350, 219],
|
||||
fillColor: ['#247efc', '#ff2fdb']
|
||||
},
|
||||
{
|
||||
data: [130, 313, 392, 180, 400, 188],
|
||||
fillColor: ['#00BAFF', '#3DE7C9']
|
||||
}
|
||||
],
|
||||
x: {
|
||||
data: ['西峡', '周口', '南阳', '驻马店', '郑州', '洛阳']
|
||||
},
|
||||
y: {
|
||||
grid: true,
|
||||
gridLineType: 'dashed',
|
||||
gridLineDash: [2, 2],
|
||||
unit: '辆'
|
||||
},
|
||||
labelLine: {
|
||||
color: ['#ff2fdb', '#3DE7C9'],
|
||||
data: ['同期', '环期'],
|
||||
type: 'rectangle'
|
||||
},
|
||||
roundColumn: true,
|
||||
spaceBetween: true,
|
||||
localGradient: true
|
||||
},
|
||||
|
||||
columnChartData5: {
|
||||
data: [
|
||||
{
|
||||
data: [150, 290, 420, 200, 350, 219],
|
||||
fillColor: ['#247efc', '#ff2fdb'],
|
||||
type: 'leftEchelon'
|
||||
},
|
||||
{
|
||||
data: [130, 313, 392, 180, 400, 188],
|
||||
fillColor: ['#00BAFF', '#3DE7C9'],
|
||||
type: 'rightEchelon'
|
||||
}
|
||||
],
|
||||
x: {
|
||||
data: ['西峡', '周口', '南阳', '驻马店', '郑州', '洛阳']
|
||||
},
|
||||
y: {
|
||||
grid: true,
|
||||
gridLineType: 'dashed',
|
||||
gridLineDash: [2, 2],
|
||||
unit: '辆',
|
||||
num: 7
|
||||
},
|
||||
labelLine: {
|
||||
color: ['#ff2fdb', '#3DE7C9'],
|
||||
data: ['同期', '环期'],
|
||||
type: 'rectangle'
|
||||
},
|
||||
showValueText: true,
|
||||
spaceBetween: true
|
||||
},
|
||||
|
||||
columnChartData6: {
|
||||
data: [
|
||||
{
|
||||
data: [175, 125, 90, 130, 45, 65, 65, 47, 50, 52, 45, 37],
|
||||
fillColor: ['#247efc', '#ff2fdb']
|
||||
},
|
||||
{
|
||||
data: [210, 142, 128, 142, 63, 72, 68, 57, 54, 60, 49, 42],
|
||||
fillColor: ['#00BAFF', '#3DE7C9']
|
||||
},
|
||||
{
|
||||
data: [23, 18, 16, 14, 10, 8, 6, 6, 6, 6, 6, 5],
|
||||
type: 'polyline',
|
||||
againstAxis: true,
|
||||
lineColor: '#ff2fdb',
|
||||
pointColor: '#3de7c9'
|
||||
}
|
||||
],
|
||||
x: {
|
||||
data: [
|
||||
'一月份', '二月份',
|
||||
'三月份', '四月份',
|
||||
'五月份', '六月份',
|
||||
'七月份', '八月份',
|
||||
'九月份', '十月份',
|
||||
'十一月份', '十二月份'
|
||||
],
|
||||
offset: 40,
|
||||
rotate: true
|
||||
},
|
||||
y: {
|
||||
grid: true,
|
||||
gridLineType: 'dashed',
|
||||
gridLineDash: [2, 2],
|
||||
min: 0,
|
||||
max: 250,
|
||||
num: 6,
|
||||
tagAfter: 'ml'
|
||||
},
|
||||
ay: {
|
||||
min: 0,
|
||||
max: 25,
|
||||
num: 6,
|
||||
tagAfter: '°C'
|
||||
},
|
||||
labelLine: {
|
||||
color: ['#ff2fdb', '#3DE7C9'],
|
||||
data: ['同期', '环期'],
|
||||
type: 'rectangle'
|
||||
},
|
||||
roundColumn: true,
|
||||
localGradient: true,
|
||||
spaceBetween: true
|
||||
},
|
||||
|
||||
columnChartData7: '',
|
||||
|
||||
radarChartData1: {
|
||||
data: [
|
||||
{
|
||||
|
|
@ -977,141 +606,6 @@ export default {
|
|||
active: false
|
||||
},
|
||||
|
||||
polylineChartData1: {
|
||||
data: [
|
||||
{
|
||||
data: [
|
||||
99.81, 99.42, 99.56, 99.23, 99.62,
|
||||
99.36, 99.56, '', 99.81, 99.56,
|
||||
99.42, 99.56, '', '', 99.36,
|
||||
99.42, '', 99.56, '', '',
|
||||
99.56, 99.23, 99.62
|
||||
],
|
||||
fillColor: ['rgba(0, 186, 255, 0.3)', 'rgba(0, 186, 255, 0)'],
|
||||
pointColor: '#00db95',
|
||||
lineColor: '#ffc53d',
|
||||
type: 'polyline',
|
||||
dashed: true
|
||||
}
|
||||
],
|
||||
color: ['#00baff', '#3de7c9', '#ffffff', '#ffc53d', '#469f4b'],
|
||||
x: {
|
||||
data: [
|
||||
'10/01', '', '10/03', '', '10/05', '',
|
||||
'10/07', '', '10/09', '', '10/11', '',
|
||||
'10/13', '', '10/15', '', '10/17', '',
|
||||
'10/19', '', '10/21', '', '10/23'
|
||||
]
|
||||
},
|
||||
y: {
|
||||
min: 96,
|
||||
max: 100,
|
||||
fixed: 2,
|
||||
num: 10,
|
||||
unit: '%'
|
||||
}
|
||||
},
|
||||
|
||||
polylineChartData2: {
|
||||
data: [
|
||||
{
|
||||
data: [
|
||||
99.81, 99.42, 99.56, 99.23, 99.62,
|
||||
99.36, 99.56, '', 99.81, 99.56,
|
||||
99.42, 99.56, '', '', 99.36,
|
||||
99.42, '', 99.56, '', '',
|
||||
99.56, 99.23, 99.62
|
||||
],
|
||||
fillColor: ['rgba(0, 186, 255, 0.3)', 'rgba(0, 186, 255, 0)'],
|
||||
pointColor: '#00db95',
|
||||
type: 'polyline'
|
||||
},
|
||||
{
|
||||
data: [
|
||||
97.81, 97.42, 97.56, 97.23, 97.62,
|
||||
97.36, 97.56, '', 97.81, 97.56,
|
||||
97.42, 97.56, '', '', 97.36,
|
||||
97.42, '', 97.56, '', '',
|
||||
97.56, 97.23, 97.62
|
||||
],
|
||||
fillColor: ['rgba(0, 219, 149, 0.3)', 'rgba(0, 219, 149, 0)'],
|
||||
type: 'smoothline'
|
||||
}
|
||||
],
|
||||
color: ['#00baff', '#3de7c9', '#ffffff', '#ffc53d', '#469f4b'],
|
||||
x: {
|
||||
data: [
|
||||
'10/01', '', '10/03', '', '10/05', '',
|
||||
'10/07', '', '10/09', '', '10/11', '',
|
||||
'10/13', '', '10/15', '', '10/17', '',
|
||||
'10/19', '', '10/21', '', '10/23'
|
||||
]
|
||||
},
|
||||
y: {
|
||||
fixed: 2,
|
||||
unit: '%'
|
||||
},
|
||||
boundaryGap: true
|
||||
},
|
||||
|
||||
polylineChartData3: {
|
||||
data: [
|
||||
{
|
||||
data: [99.81, 99.42, 99.56, 99.23, 99.62, 99.36, 99.56],
|
||||
columnColor: ['rgba(0, 186, 255, 0.3)', 'rgba(0, 186, 255, 0)'],
|
||||
type: 'column'
|
||||
},
|
||||
{
|
||||
data: [97.81, 97.42, 97.56, 100.23, 97.62, 97.36, 97.56],
|
||||
fillColor: ['rgba(0, 219, 149, 0.3)', 'rgba(0, 219, 149, 0)'],
|
||||
type: 'smoothline'
|
||||
}
|
||||
],
|
||||
color: ['#00baff', '#3de7c9', '#ffffff', '#ffc53d', '#469f4b'],
|
||||
x: {
|
||||
data: ['10/01', '10/02', '10/03', '10/04', '10/05', '10/06', '10/07']
|
||||
},
|
||||
y: {
|
||||
fixed: 2,
|
||||
unit: '%'
|
||||
},
|
||||
boundaryGap: true
|
||||
},
|
||||
|
||||
polylineChartData4: {
|
||||
data: [
|
||||
{
|
||||
data: [3, 4.5, 4, 6, 5, 4, 3],
|
||||
dashed: true
|
||||
},
|
||||
{
|
||||
data: [0.5, 1, 0.8, 3, 2, 1.5, 0.5],
|
||||
fillColor: ['rgba(61, 231, 201, 0.5)', 'rgba(61, 231, 201, 0.1)']
|
||||
},
|
||||
{
|
||||
data: [1, 3, 2, 4, 3, 2, 1],
|
||||
type: 'smoothline',
|
||||
fillColor: ['rgba(255, 197, 61, 0.4)', 'rgba(255, 197, 61, 0.1)']
|
||||
},
|
||||
{
|
||||
data: [2, 2.5, 3, 5, 4, 3, 2],
|
||||
type: 'column',
|
||||
columnColor: ['rgba(52, 36, 50, 0.8)', 'rgba(52, 36, 50, 0.4)']
|
||||
}
|
||||
],
|
||||
x: {
|
||||
data: ['10/01', '10/02', '10/03', '10/04', '10/05', '10/06', '10/07']
|
||||
},
|
||||
y: {
|
||||
max: 6,
|
||||
min: 0,
|
||||
unit: '单位'
|
||||
},
|
||||
labelLine: ['收费系统', '收费系统', '监控系统', '供配电系统'],
|
||||
color: ['#00baff', '#3de7c9', '#ffc53d', '#342432'],
|
||||
boundaryGap: true
|
||||
},
|
||||
|
||||
colors: ''
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -281,6 +281,8 @@ data: {
|
|||
</highlight-code>
|
||||
</div>
|
||||
</border-box-7>
|
||||
|
||||
<div id="polyline-chart" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
@ -306,7 +308,8 @@ export default {
|
|||
color: '#2b7bfb',
|
||||
data: ['车流量'],
|
||||
type: 'rectangle'
|
||||
}
|
||||
},
|
||||
showValueText: true
|
||||
},
|
||||
|
||||
columnChartData2: {
|
||||
|
|
@ -462,7 +465,7 @@ export default {
|
|||
'十一月份', '十二月份'
|
||||
],
|
||||
offset: 40,
|
||||
rotate: true
|
||||
rotate: 20
|
||||
},
|
||||
y: {
|
||||
grid: true,
|
||||
|
|
|
|||
|
|
@ -0,0 +1,228 @@
|
|||
<template>
|
||||
<div>
|
||||
<border-box-7 class="chart-item" :reverse="true">
|
||||
<polyline-chart :data="polylineChartData1" :colors="colors" class="chart" />
|
||||
|
||||
<div class="config-info">
|
||||
<div class="title">Polyline-chart</div>
|
||||
|
||||
<highlight-code>
|
||||
<polyline-chart :data="data" :colors="colors" />
|
||||
</highlight-code>
|
||||
|
||||
<highlight-code>
|
||||
// 折线图与柱状图折线部分相似
|
||||
data: [
|
||||
{
|
||||
data: [32, 30, 55, 24, 33, 25],
|
||||
lineColor: '#3de7c9'
|
||||
}
|
||||
],
|
||||
x: {
|
||||
data: ['西峡', '周口', '南阳', '驻马店', '郑州', '洛阳']
|
||||
},
|
||||
showValueText: true,
|
||||
// 非必需 数值展示位置偏移量
|
||||
valueTextOffset: [10, -5]
|
||||
</highlight-code>
|
||||
</div>
|
||||
</border-box-7>
|
||||
|
||||
<border-box-7 class="chart-item">
|
||||
<polyline-chart :data="polylineChartData2" class="chart" />
|
||||
|
||||
<div class="config-info">
|
||||
<div class="title">Polyline-chart</div>
|
||||
|
||||
<highlight-code>
|
||||
<polyline-chart :data="data" />
|
||||
</highlight-code>
|
||||
|
||||
<highlight-code>
|
||||
data: {
|
||||
data: [
|
||||
{
|
||||
data: [
|
||||
99.81, 99.42, 99.56, 99.23, 99.62,
|
||||
99.36, 99.56, '', 99.81, 99.56, ...
|
||||
],
|
||||
lineType: 'dashed',
|
||||
lineDash: [2, 2],
|
||||
lineColor: '#277dfb',
|
||||
pointColor: '#3de7c9',
|
||||
fillColor: ['rgba(40, 125, 252, 0.3)', 'rgba(40, 125, 252, 0)']
|
||||
},
|
||||
{
|
||||
data: [
|
||||
97.81, 97.42, 97.56, 97.23, 97.62,
|
||||
97.36, 97.56, '', 97.81, 97.56, ...
|
||||
],
|
||||
fillColor: ['rgba(0, 219, 149, 0.3)', 'rgba(0, 219, 149, 0)'],
|
||||
type: 'smoothline'
|
||||
}
|
||||
],
|
||||
x: {
|
||||
data: [
|
||||
'10/01', '', '10/03', '', '10/05', '',
|
||||
'10/07', '', '10/09', '', '10/11', '', ...
|
||||
]
|
||||
},
|
||||
y: {
|
||||
min: 96,
|
||||
max: 100,
|
||||
// 数据精度 数据最大最小差值较小时 建议设置精度
|
||||
fixed: 2,
|
||||
num: 10,
|
||||
unit: '%'
|
||||
}
|
||||
}
|
||||
</highlight-code>
|
||||
</div>
|
||||
</border-box-7>
|
||||
|
||||
<border-box-7 class="chart-item" :reverse="true">
|
||||
<polyline-chart :data="polylineChartData3" class="chart" />
|
||||
|
||||
<div class="config-info">
|
||||
<div class="title">Polyline-chart</div>
|
||||
|
||||
<highlight-code>
|
||||
<polyline-chart :data="data" />
|
||||
</highlight-code>
|
||||
|
||||
<highlight-code>
|
||||
data: {
|
||||
data: [
|
||||
{
|
||||
data: [2, 2.5, 3, 6, 3, 2.5, 2],
|
||||
fillColor: ['rgba(255, 38, 214, 0.5)', 'rgba(40, 82, 255, 0.1)']
|
||||
},
|
||||
{
|
||||
data: [3, 2, 4, 5, 4, 2, 3],
|
||||
type: 'smoothline'
|
||||
}
|
||||
],
|
||||
x: {
|
||||
data: ['10/01', '10/02', '10/03', '10/04', '10/05', '10/06', '10/07']
|
||||
},
|
||||
// 非必需 不贴合坐标轴绘制
|
||||
boundaryGap: true
|
||||
}
|
||||
</highlight-code>
|
||||
</div>
|
||||
</border-box-7>
|
||||
|
||||
<border-box-7 class="chart-item">
|
||||
<!-- <polyline-chart :data="polylineChartData4" class="chart" /> -->
|
||||
|
||||
<div class="config-info">
|
||||
<div class="title">Polyline-chart</div>
|
||||
|
||||
<highlight-code>
|
||||
<polyline-chart :data="data" />
|
||||
</highlight-code>
|
||||
|
||||
<highlight-code>
|
||||
data: [
|
||||
// 44444444
|
||||
}
|
||||
</highlight-code>
|
||||
</div>
|
||||
</border-box-7>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'PolylineChartDemo',
|
||||
data () {
|
||||
return {
|
||||
polylineChartData1: {
|
||||
data: [
|
||||
{
|
||||
data: [32, 30, 55, 24, 33, 25],
|
||||
lineColor: '#3de7c9'
|
||||
}
|
||||
],
|
||||
x: {
|
||||
data: ['西峡', '周口', '南阳', '驻马店', '郑州', '洛阳']
|
||||
},
|
||||
y: {
|
||||
},
|
||||
showValueText: true,
|
||||
valueTextOffset: [10, -5]
|
||||
},
|
||||
|
||||
polylineChartData2: {
|
||||
data: [
|
||||
{
|
||||
data: [
|
||||
99.81, 99.42, 99.56, 99.23, 99.62,
|
||||
99.36, 99.56, '', 99.81, 99.56,
|
||||
99.42, 99.56, '', '', 99.36,
|
||||
99.42, '', 99.56, '', '',
|
||||
99.56, 99.23, 99.62
|
||||
],
|
||||
lineType: 'dashed',
|
||||
lineDash: [2, 2],
|
||||
lineColor: '#277dfb',
|
||||
pointColor: '#3de7c9',
|
||||
fillColor: ['rgba(40, 125, 252, 0.3)', 'rgba(40, 125, 252, 0)']
|
||||
},
|
||||
{
|
||||
data: [
|
||||
97.81, 97.42, 97.56, 97.23, 97.62,
|
||||
97.36, 97.56, '', 97.81, 97.56,
|
||||
97.42, 97.56, '', '', 97.36,
|
||||
97.42, '', 97.56, '', '',
|
||||
97.56, 97.23, 97.62
|
||||
],
|
||||
fillColor: ['rgba(0, 219, 149, 0.3)', 'rgba(0, 219, 149, 0)'],
|
||||
type: 'smoothline'
|
||||
}
|
||||
],
|
||||
x: {
|
||||
data: [
|
||||
'10/01', '', '10/03', '', '10/05', '',
|
||||
'10/07', '', '10/09', '', '10/11', '',
|
||||
'10/13', '', '10/15', '', '10/17', '',
|
||||
'10/19', '', '10/21', '', '10/23'
|
||||
]
|
||||
},
|
||||
y: {
|
||||
min: 96,
|
||||
max: 100,
|
||||
fixed: 2,
|
||||
num: 10,
|
||||
unit: '%'
|
||||
}
|
||||
},
|
||||
|
||||
polylineChartData3: {
|
||||
data: [
|
||||
{
|
||||
data: [2, 2.5, 3, 6, 3, 2.5, 2],
|
||||
fillColor: ['rgba(255, 38, 214, 0.5)', 'rgba(40, 82, 255, 0.1)']
|
||||
},
|
||||
{
|
||||
data: [3, 2, 4, 5, 4, 2, 3],
|
||||
type: 'smoothline'
|
||||
}
|
||||
],
|
||||
x: {
|
||||
data: ['10/01', '10/02', '10/03', '10/04', '10/05', '10/06', '10/07']
|
||||
},
|
||||
labelLine: ['收费系统', '收费系统', '监控系统', '供配电系统'],
|
||||
color: ['#00baff', '#3de7c9', '#ffc53d', '#342432'],
|
||||
boundaryGap: true
|
||||
},
|
||||
|
||||
colors: ''
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less">
|
||||
|
||||
</style>
|
||||
|
|
@ -8,22 +8,17 @@
|
|||
|
||||
<div class="title">使用</div>
|
||||
|
||||
<div class="text-info">你需要将如下文件复制至你的项目内</div>
|
||||
<div class="text-info">./src/plugins</div>
|
||||
<div class="text-info">./src/components</div>
|
||||
<div class="text-info">./src/config</div>
|
||||
<div class="text-info">并在main.js中引入plugins和components</div>
|
||||
<div class="text-info">你需要将DataV文件夹复制至你的项目内</div>
|
||||
<div class="text-info">并在main.js中引入使用</div>
|
||||
|
||||
<highlight-code>
|
||||
// main.js
|
||||
import datavComponents from './components/index.js'
|
||||
import datavPlugins from './plugin/index.js'
|
||||
import dataV from './DataV/index.js'
|
||||
|
||||
Vue.use(datavComponents)
|
||||
Vue.use(datavPlugins)
|
||||
Vue.use(dataV)
|
||||
|
||||
// 可以直接在Views文件夹下的dataView页面直接编写页面
|
||||
// dataView页面已做全屏缩放处理 roterPath: #/datav/view
|
||||
// dataView页面已做全屏缩放处理 routerPath: #/datav/view
|
||||
</highlight-code>
|
||||
|
||||
<div class="text-info">组件具体用法见示例</div>
|
||||
|
|
|
|||
Loading…
Reference in New Issue