some modify
This commit is contained in:
jiaming
parent
ce6987a714
commit
dea174d3f6
|
|
@ -1,500 +0,0 @@
|
||||||
export default {
|
|
||||||
data () {
|
|
||||||
return {
|
|
||||||
defaultAxisLineColor: '#333',
|
|
||||||
defaultAxisTagColor: '#333',
|
|
||||||
defaultGridLineColor: '#333',
|
|
||||||
defaultTagColor: '#333',
|
|
||||||
|
|
||||||
defaultGridLineType: 'line',
|
|
||||||
defaultGridLineDash: [5, 5],
|
|
||||||
|
|
||||||
defaultXAxisOffset: 30,
|
|
||||||
defaultAxisLineTagGap: 5,
|
|
||||||
defaultAxisFontSize: 10,
|
|
||||||
defaultAxisFontFamily: 'Arial',
|
|
||||||
|
|
||||||
valueMaxMin: [],
|
|
||||||
agValueMaxMin: [],
|
|
||||||
|
|
||||||
valueAxisMaxMin: [],
|
|
||||||
agValueAxisMaxMin: [],
|
|
||||||
|
|
||||||
valueAxisTag: [],
|
|
||||||
agValueAxisTag: [],
|
|
||||||
|
|
||||||
labelAxisTag: [],
|
|
||||||
agLabelAxisTag: [],
|
|
||||||
|
|
||||||
xAxisTagBA: ['', ''],
|
|
||||||
agXAxisTagBA: ['', ''],
|
|
||||||
yAxisTagBA: ['', ''],
|
|
||||||
agYAxisTagBA: ['', ''],
|
|
||||||
|
|
||||||
addBAValueAxisTag: [],
|
|
||||||
addBAAGValueAxisTag: [],
|
|
||||||
|
|
||||||
addBALabelAxisTag: [],
|
|
||||||
addBAAGLabelAxisTag: [],
|
|
||||||
|
|
||||||
axisUnit: [],
|
|
||||||
|
|
||||||
axisFontSize: 0,
|
|
||||||
axisFontFamily: '',
|
|
||||||
|
|
||||||
axisOffset: [],
|
|
||||||
|
|
||||||
axisOriginPos: [],
|
|
||||||
axisWH: [],
|
|
||||||
|
|
||||||
axisAnglePos: {},
|
|
||||||
|
|
||||||
valueAxisTagPos: [],
|
|
||||||
agValueAxisTagPos: [],
|
|
||||||
|
|
||||||
labelAxisTagPos: [],
|
|
||||||
agLabelAxisTagPos: [],
|
|
||||||
|
|
||||||
tagAlign: {},
|
|
||||||
|
|
||||||
xGridConfig: '',
|
|
||||||
agXGridConfig: '',
|
|
||||||
yGridConfig: '',
|
|
||||||
agYGridConfig: ''
|
|
||||||
}
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
initAxis () {
|
|
||||||
const { calcValuesMaxMin, calcValueAxisData, calcLabelAxisData } = this
|
|
||||||
|
|
||||||
calcValuesMaxMin()
|
|
||||||
|
|
||||||
calcValueAxisData()
|
|
||||||
|
|
||||||
calcLabelAxisData()
|
|
||||||
|
|
||||||
const { calcTagBA, calcAddBATag, calcAxisUnit } = this
|
|
||||||
|
|
||||||
calcTagBA()
|
|
||||||
|
|
||||||
calcAddBATag()
|
|
||||||
|
|
||||||
calcAxisUnit()
|
|
||||||
|
|
||||||
const { calcAxisFontData, calcAxisOffset, calcAxisAreaData } = this
|
|
||||||
|
|
||||||
calcAxisFontData()
|
|
||||||
|
|
||||||
calcAxisOffset()
|
|
||||||
|
|
||||||
calcAxisAreaData()
|
|
||||||
|
|
||||||
const { calcAxisAnglePos, calcValueAxisTagPos, calcLabelAxisTagPos } = this
|
|
||||||
|
|
||||||
calcAxisAnglePos()
|
|
||||||
|
|
||||||
calcValueAxisTagPos()
|
|
||||||
|
|
||||||
calcLabelAxisTagPos()
|
|
||||||
|
|
||||||
const { calcTagAlign, calcGridConfig } = this
|
|
||||||
|
|
||||||
calcTagAlign()
|
|
||||||
|
|
||||||
calcGridConfig()
|
|
||||||
},
|
|
||||||
calcValuesMaxMin () {
|
|
||||||
const { data: { data }, calcValueMaxMin } = this
|
|
||||||
|
|
||||||
const valueSeries = data.filter(({ againstAxis }) => !againstAxis)
|
|
||||||
|
|
||||||
if (valueSeries.length) this.valueMaxMin = calcValueMaxMin(valueSeries)
|
|
||||||
|
|
||||||
const agValueSeries = data.filter(({ againstAxis }) => againstAxis)
|
|
||||||
|
|
||||||
if (agValueSeries.length) this.agValueMaxMin = calcValueMaxMin(agValueSeries)
|
|
||||||
},
|
|
||||||
calcValueMaxMin (data) {
|
|
||||||
const { mulValueAdd, calcMulValueAdd, getArrayMaxMin } = this
|
|
||||||
|
|
||||||
let valueSeries = data.map(({ data: td }) => td)
|
|
||||||
|
|
||||||
mulValueAdd && (valueSeries = calcMulValueAdd(valueSeries))
|
|
||||||
|
|
||||||
return getArrayMaxMin(valueSeries)
|
|
||||||
},
|
|
||||||
calcMulValueAdd (values) {
|
|
||||||
const { multipleSum, filterNull } = this
|
|
||||||
|
|
||||||
return values.map(series =>
|
|
||||||
filterNull(series).map(n =>
|
|
||||||
n instanceof Array ? multipleSum(...filterNull(n)) : n))
|
|
||||||
},
|
|
||||||
calcValueAxisData () {
|
|
||||||
const { horizon, data: { x, ax, y, ay }, calcValueAxisTag } = this
|
|
||||||
|
|
||||||
const { valueMaxMin, agValueMaxMin, getValueAxisMaxMin } = this
|
|
||||||
|
|
||||||
const valueAxis = horizon ? [x, ax] : [y, ay]
|
|
||||||
|
|
||||||
if (valueMaxMin.length) {
|
|
||||||
const valueAxisTag = this.valueAxisTag = calcValueAxisTag(valueMaxMin, valueAxis[0])
|
|
||||||
|
|
||||||
this.valueAxisMaxMin = getValueAxisMaxMin(valueAxisTag)
|
|
||||||
}
|
|
||||||
|
|
||||||
if (agValueMaxMin.length) {
|
|
||||||
const agValueAxisTag = this.agValueAxisTag = calcValueAxisTag(agValueMaxMin, valueAxis[1])
|
|
||||||
|
|
||||||
this.agValueAxisMaxMin = getValueAxisMaxMin(agValueAxisTag)
|
|
||||||
}
|
|
||||||
},
|
|
||||||
calcValueAxisTag ([vmax, vmin], { max, min, num, fixed } = {}) {
|
|
||||||
let [trueMax, trueMin] = [max, min]
|
|
||||||
|
|
||||||
const thirdValueMinus = parseInt((vmax - vmin) / 3)
|
|
||||||
|
|
||||||
!max && (max !== 0) && (trueMax = vmax + thirdValueMinus)
|
|
||||||
!min && (min !== 0) && (trueMin = vmin - thirdValueMinus)
|
|
||||||
|
|
||||||
const trueMinus = trueMax - trueMin
|
|
||||||
|
|
||||||
!num && trueMinus < 9 && (num = trueMinus + 1)
|
|
||||||
!num && (num = 10)
|
|
||||||
|
|
||||||
const valueGap = trueMinus / (num - 1)
|
|
||||||
|
|
||||||
return Array(num).fill(0).map((t, i) =>
|
|
||||||
(trueMin + i * valueGap).toFixed(fixed))
|
|
||||||
},
|
|
||||||
getValueAxisMaxMin (valueTag) {
|
|
||||||
const lastIndex = valueTag.length - 1
|
|
||||||
|
|
||||||
return [
|
|
||||||
parseFloat(valueTag[lastIndex]),
|
|
||||||
parseFloat(valueTag[0])
|
|
||||||
]
|
|
||||||
},
|
|
||||||
calcLabelAxisData () {
|
|
||||||
const { horizon, data: { x, ax, y, ay } } = this
|
|
||||||
|
|
||||||
const labelAxis = horizon ? [y, ay] : [x, ax]
|
|
||||||
|
|
||||||
if (labelAxis[0] && labelAxis[0].data) this.labelAxisTag = labelAxis[0].data
|
|
||||||
|
|
||||||
if (labelAxis[1] && labelAxis[1].data) this.agLabelAxisTag = labelAxis[1].data
|
|
||||||
},
|
|
||||||
calcTagBA () {
|
|
||||||
const { data: { x, ax, y, ay } } = this
|
|
||||||
|
|
||||||
if (x && x.tagBefore) this.xAxisTagBA[0] = x.tagBefore
|
|
||||||
if (ax && ax.tagBefore) this.agXAxisTagBA[0] = ax.tagBefore
|
|
||||||
if (y && y.tagBefore) this.yAxisTagBA[0] = y.tagBefore
|
|
||||||
if (ay && ay.tagBefore) this.agYAxisTagBA[0] = ay.tagBefore
|
|
||||||
|
|
||||||
if (x && x.tagAfter) this.xAxisTagBA[1] = x.tagAfter
|
|
||||||
if (ax && ax.tagAfter) this.agXAxisTagBA[1] = ax.tagAfter
|
|
||||||
if (y && y.tagAfter) this.yAxisTagBA[1] = y.tagAfter
|
|
||||||
if (ay && ay.tagAfter) this.agYAxisTagBA[1] = ay.tagAfter
|
|
||||||
},
|
|
||||||
calcAddBATag () {
|
|
||||||
const { xAxisTagBA, agXAxisTagBA, yAxisTagBA, agYAxisTagBA } = this
|
|
||||||
|
|
||||||
const { valueAxisTag, agValueAxisTag, labelAxisTag, agLabelAxisTag } = this
|
|
||||||
|
|
||||||
const { horizon, addBATag } = this
|
|
||||||
|
|
||||||
const valueTagBA = horizon ? [xAxisTagBA, agXAxisTagBA] : [yAxisTagBA, agYAxisTagBA]
|
|
||||||
|
|
||||||
const labelTagBA = horizon ? [yAxisTagBA, agYAxisTagBA] : [xAxisTagBA, agXAxisTagBA]
|
|
||||||
|
|
||||||
if (valueAxisTag.length) this.addBAValueAxisTag = addBATag(valueAxisTag, valueTagBA[0])
|
|
||||||
if (agValueAxisTag.length) this.addBAAGValueAxisTag = addBATag(agValueAxisTag, valueTagBA[1])
|
|
||||||
if (labelAxisTag.length) this.addBALabelAxisTag = addBATag(labelAxisTag, labelTagBA[0])
|
|
||||||
if (agLabelAxisTag.length) this.addBAAGLabelAxisTag = addBATag(agLabelAxisTag, labelTagBA[1])
|
|
||||||
},
|
|
||||||
addBATag (tags, ba) {
|
|
||||||
return tags.map(tag => tag ? `${ba[0]}${tag}${ba[1]}` : tag)
|
|
||||||
},
|
|
||||||
calcAxisUnit () {
|
|
||||||
const { data: { x, ax, y, ay } } = this
|
|
||||||
|
|
||||||
if (x && x.unit) this.axisUnit[0] = x.unit
|
|
||||||
if (ax && ax.unit) this.axisUnit[1] = ax.unit
|
|
||||||
if (y && y.unit) this.axisUnit[2] = y.unit
|
|
||||||
if (ay && ay.unit) this.axisUnit[3] = ay.unit
|
|
||||||
},
|
|
||||||
calcAxisFontData () {
|
|
||||||
const { defaultAxisFontSize, defaultAxisFontFamily } = this
|
|
||||||
|
|
||||||
const { data: { axisFontSize, axisFontFamily } } = this
|
|
||||||
|
|
||||||
this.axisFontSize = axisFontSize || defaultAxisFontSize
|
|
||||||
|
|
||||||
this.axisFontFamily = axisFontFamily || defaultAxisFontFamily
|
|
||||||
},
|
|
||||||
calcAxisOffset () {
|
|
||||||
const { horizon, axisUnit, defaultXAxisOffset } = this
|
|
||||||
|
|
||||||
const { addBAValueAxisTag, addBAAGValueAxisTag, addBALabelAxisTag, addBAAGLabelAxisTag } = this
|
|
||||||
|
|
||||||
const { axisFontSize, axisFontFamily, defaultAxisLineTagGap } = this
|
|
||||||
|
|
||||||
const { data: { x, ax, y, ay } } = this
|
|
||||||
|
|
||||||
const { ctx, canvas: { getTextsWidth }, boundaryGap } = this
|
|
||||||
|
|
||||||
ctx.font = `${axisFontSize}px ${axisFontFamily}`
|
|
||||||
|
|
||||||
this.axisOffset[0] = (ax && ax.offset) || defaultXAxisOffset
|
|
||||||
this.axisOffset[2] = (x && x.offset) || defaultXAxisOffset
|
|
||||||
|
|
||||||
const horizonAxisTags = horizon
|
|
||||||
? [addBALabelAxisTag, addBAAGLabelAxisTag]
|
|
||||||
: [addBAValueAxisTag, addBAAGValueAxisTag]
|
|
||||||
|
|
||||||
this.axisOffset[3] = (y && y.offset) ||
|
|
||||||
Math.max(...getTextsWidth(ctx, [axisUnit[2] || '']),
|
|
||||||
...getTextsWidth(ctx, horizonAxisTags[0].length ? horizonAxisTags[0] : 0)) + defaultAxisLineTagGap
|
|
||||||
|
|
||||||
// axis offset 1
|
|
||||||
const xAxisTags = horizon ? addBAValueAxisTag : addBALabelAxisTag
|
|
||||||
|
|
||||||
let xAxisTagsHalfWidth = 0
|
|
||||||
|
|
||||||
xAxisTags.length && (xAxisTagsHalfWidth = ctx.measureText(xAxisTags.length - 1).width / 2)
|
|
||||||
|
|
||||||
let rightOffset = Math.max(...getTextsWidth(ctx, [axisUnit[3] || '']),
|
|
||||||
...getTextsWidth(ctx, [axisUnit[0] || '']),
|
|
||||||
...getTextsWidth(ctx, horizonAxisTags[1].length ? horizonAxisTags[1] : 0)) + defaultAxisLineTagGap
|
|
||||||
|
|
||||||
!boundaryGap && (rightOffset += xAxisTagsHalfWidth)
|
|
||||||
|
|
||||||
this.axisOffset[1] = (ay && ay.offset) || rightOffset
|
|
||||||
|
|
||||||
if (y && y.noTag) this.axisOffset[3] = 1
|
|
||||||
if (ay && ay.noTag) this.axisOffset[1] = 1
|
|
||||||
},
|
|
||||||
calcAxisAreaData () {
|
|
||||||
const { canvasWH, axisOffset, axisWH, axisOriginPos } = this
|
|
||||||
|
|
||||||
axisWH[0] = canvasWH[0] - axisOffset[1] - axisOffset[3]
|
|
||||||
axisWH[1] = canvasWH[1] - axisOffset[0] - axisOffset[2]
|
|
||||||
|
|
||||||
axisOriginPos[0] = axisOffset[3]
|
|
||||||
axisOriginPos[1] = axisWH[1] + axisOffset[0]
|
|
||||||
},
|
|
||||||
calcAxisAnglePos () {
|
|
||||||
const { axisWH, axisOriginPos, axisAnglePos } = this
|
|
||||||
|
|
||||||
axisAnglePos.leftTop = [axisOriginPos[0], axisOriginPos[1] - axisWH[1]]
|
|
||||||
axisAnglePos.rightTop = [axisOriginPos[0] + axisWH[0], axisOriginPos[1] - axisWH[1]]
|
|
||||||
|
|
||||||
axisAnglePos.leftBottom = axisOriginPos
|
|
||||||
axisAnglePos.rightBottom = [axisOriginPos[0] + axisWH[0], axisOriginPos[1]]
|
|
||||||
},
|
|
||||||
calcValueAxisTagPos () {
|
|
||||||
const { horizon, axisOriginPos, axisAnglePos } = this
|
|
||||||
|
|
||||||
const { valueAxisTag, agValueAxisTag, getValueAxisTagPos } = this
|
|
||||||
|
|
||||||
if (valueAxisTag) this.valueAxisTagPos = getValueAxisTagPos(valueAxisTag, axisOriginPos)
|
|
||||||
|
|
||||||
const basePoint = horizon ? axisAnglePos.leftTop : axisAnglePos.rightBottom
|
|
||||||
|
|
||||||
if (agValueAxisTag) this.agValueAxisTagPos = getValueAxisTagPos(agValueAxisTag, basePoint)
|
|
||||||
},
|
|
||||||
getValueAxisTagPos (tags, [x, y]) {
|
|
||||||
const { horizon, axisWH } = this
|
|
||||||
|
|
||||||
const tagsNum = tags.length
|
|
||||||
|
|
||||||
const areaLength = horizon ? axisWH[0] : axisWH[1]
|
|
||||||
|
|
||||||
const tagGap = areaLength / (tagsNum - 1)
|
|
||||||
|
|
||||||
return new Array(tagsNum).fill(0).map((t, i) =>
|
|
||||||
horizon ? [x + tagGap * i, y] : [x, y - tagGap * i])
|
|
||||||
},
|
|
||||||
calcLabelAxisTagPos () {
|
|
||||||
const { horizon, getLabelAxisTagPos, axisAnglePos } = this
|
|
||||||
|
|
||||||
const { labelAxisTag, agLabelAxisTag, axisOriginPos } = this
|
|
||||||
|
|
||||||
if (labelAxisTag.length) this.labelAxisTagPos = getLabelAxisTagPos(labelAxisTag, axisOriginPos)
|
|
||||||
|
|
||||||
const basePoint = horizon ? axisAnglePos.rightBottom : axisAnglePos.leftTop
|
|
||||||
|
|
||||||
if (agLabelAxisTag.length) this.agLabelAxisTagPos = getLabelAxisTagPos(agLabelAxisTag, basePoint)
|
|
||||||
},
|
|
||||||
getLabelAxisTagPos (tags, [x, y]) {
|
|
||||||
const { horizon, axisWH, boundaryGap } = this
|
|
||||||
|
|
||||||
const tagsNum = tags.length
|
|
||||||
|
|
||||||
const areaLength = horizon ? axisWH[1] : axisWH[0]
|
|
||||||
|
|
||||||
const tagGap = areaLength / (boundaryGap ? tagsNum : tagsNum - 1)
|
|
||||||
|
|
||||||
const halfGap = tagGap / 2
|
|
||||||
|
|
||||||
const tempPos = new Array(tagsNum).fill(0)
|
|
||||||
|
|
||||||
if (boundaryGap) {
|
|
||||||
return tempPos.map((t, i) =>
|
|
||||||
horizon ? [x, y + (tagGap * i) + halfGap] : [x + (tagGap * i) + halfGap, y])
|
|
||||||
}
|
|
||||||
|
|
||||||
if (!boundaryGap) {
|
|
||||||
return tempPos.map((t, i) =>
|
|
||||||
horizon ? [x, y + tagGap * i] : [x + tagGap * i, y])
|
|
||||||
}
|
|
||||||
},
|
|
||||||
calcTagAlign () {
|
|
||||||
const { tagAlign } = this
|
|
||||||
|
|
||||||
tagAlign.x = ['center', 'top']
|
|
||||||
tagAlign.y = ['right', 'middle']
|
|
||||||
tagAlign.ax = ['left', 'middle']
|
|
||||||
tagAlign.ay = ['left', 'center']
|
|
||||||
},
|
|
||||||
calcGridConfig () {
|
|
||||||
const { data: { x, ax, y, ay } } = this
|
|
||||||
|
|
||||||
const { getGridConfig } = this
|
|
||||||
|
|
||||||
if (x && x.grid) this.xGridConfig = getGridConfig(x)
|
|
||||||
if (ax && ax.grid) this.agXGridConfig = getGridConfig(ax)
|
|
||||||
if (y && y.grid) this.yGridConfig = getGridConfig(y)
|
|
||||||
if (ay && ay.grid) this.agYGridConfig = getGridConfig(ay)
|
|
||||||
},
|
|
||||||
getGridConfig ({ gridLineType, gridLineDash, gridLineColor }) {
|
|
||||||
const { defaultGridLineDash, defaultGridLineType, defaultGridLineColor } = this
|
|
||||||
|
|
||||||
const dash = gridLineDash || defaultGridLineDash
|
|
||||||
|
|
||||||
const config = {
|
|
||||||
color: gridLineColor || defaultGridLineColor,
|
|
||||||
dash: gridLineType || defaultGridLineType,
|
|
||||||
mulColor: false
|
|
||||||
}
|
|
||||||
|
|
||||||
config.dash === 'dashed' && (config.dash = dash)
|
|
||||||
config.dash !== 'dashed' && (config.dash = [10, 0])
|
|
||||||
|
|
||||||
config.color instanceof Array && (config.mulColor = true)
|
|
||||||
|
|
||||||
return config
|
|
||||||
},
|
|
||||||
drawAxis () {
|
|
||||||
const { drawAxisLine, drawAxisTag, drawUnit } = this
|
|
||||||
|
|
||||||
drawAxisLine()
|
|
||||||
|
|
||||||
drawAxisTag()
|
|
||||||
|
|
||||||
drawUnit()
|
|
||||||
|
|
||||||
const { drawGrid } = this
|
|
||||||
|
|
||||||
drawGrid()
|
|
||||||
},
|
|
||||||
drawAxisLine () {
|
|
||||||
const { ctx, horizon, axisOriginPos, axisAnglePos } = this
|
|
||||||
|
|
||||||
const { defaultAxisLineColor, agValueAxisTag, agLabelAxisTag } = this
|
|
||||||
|
|
||||||
const { data: { x, ax, y, ay } } = this
|
|
||||||
|
|
||||||
ctx.lineWidth = 1
|
|
||||||
|
|
||||||
if (!x.noAxisLine) {
|
|
||||||
ctx.strokeStyle = (x && x.axisLineColor) || defaultAxisLineColor
|
|
||||||
ctx.beginPath()
|
|
||||||
ctx.moveTo(...axisOriginPos)
|
|
||||||
ctx.lineTo(...axisAnglePos.rightBottom)
|
|
||||||
ctx.stroke()
|
|
||||||
}
|
|
||||||
|
|
||||||
if (!y.noAxisLine) {
|
|
||||||
ctx.strokeStyle = (y && y.axisLineColor) || defaultAxisLineColor
|
|
||||||
ctx.beginPath()
|
|
||||||
ctx.moveTo(...axisOriginPos)
|
|
||||||
ctx.lineTo(...axisAnglePos.leftTop)
|
|
||||||
ctx.stroke()
|
|
||||||
}
|
|
||||||
|
|
||||||
const agValueAxis = horizon ? ay : ax
|
|
||||||
|
|
||||||
if (agValueAxisTag.length && (!agValueAxis || !agValueAxis.noAxisLine)) {
|
|
||||||
ctx.strokeStyle = (agValueAxis && agValueAxis.axisLineColor) || defaultAxisLineColor
|
|
||||||
ctx.beginPath()
|
|
||||||
ctx.moveTo(...(horizon ? axisAnglePos.leftTop : axisAnglePos.rightTop))
|
|
||||||
ctx.lineTo(...(horizon ? axisAnglePos.rightTop : axisAnglePos.rightBottom))
|
|
||||||
ctx.stroke()
|
|
||||||
}
|
|
||||||
|
|
||||||
const agLebalAxis = horizon ? ax : ay
|
|
||||||
|
|
||||||
if (agLabelAxisTag.length && (!agLebalAxis || !agLebalAxis.noAxisLine)) {
|
|
||||||
ctx.strokeStyle = (agLebalAxis && agLebalAxis.axisLineColor) || defaultAxisLineColor
|
|
||||||
ctx.beginPath()
|
|
||||||
ctx.moveTo(...(horizon ? axisAnglePos.rightTop : axisAnglePos.leftTop))
|
|
||||||
ctx.lineTo(...(horizon ? axisAnglePos.rightBottom : axisAnglePos.rightTop))
|
|
||||||
ctx.stroke()
|
|
||||||
}
|
|
||||||
},
|
|
||||||
drawAxisTag () {
|
|
||||||
const { horizon, tagAlign, defaultAxisLineTagGap: offset } = this
|
|
||||||
|
|
||||||
const { data: { x, ax, y, ay }, drawAxisSeriesTag } = this
|
|
||||||
|
|
||||||
const xAxis = horizon ? ['addBAValueAxisTag', 'valueAxisTagPos'] : ['addBALabelAxisTag', 'labelAxisTagPos']
|
|
||||||
const yAxis = horizon ? ['addBALabelAxisTag', 'labelAxisTagPos'] : ['addBAValueAxisTag', 'valueAxisTagPos']
|
|
||||||
const agXAxis = horizon ? ['addBAAGValueAxisTag', 'agValueAxisTagPos'] : ['addBAAGLabelAxisTag', 'agLabelAxisTagPos']
|
|
||||||
const agYAxis = horizon ? ['addBAAGLabelAxisTag', 'agLabelAxisTagPos'] : ['addBAAGValueAxisTag', 'agValueAxisTagPos']
|
|
||||||
|
|
||||||
drawAxisSeriesTag(...xAxis.map(td => this[td]), x, tagAlign.x, [0, offset], x && x.rotate)
|
|
||||||
drawAxisSeriesTag(...yAxis.map(td => this[td]), y, tagAlign.y, [-offset, 0])
|
|
||||||
drawAxisSeriesTag(...agXAxis.map(td => this[td]), ax, tagAlign.ax, [0, -offset])
|
|
||||||
drawAxisSeriesTag(...agYAxis.map(td => this[td]), ay, tagAlign.ay, [offset, 0])
|
|
||||||
},
|
|
||||||
drawAxisSeriesTag (tags, tagPos, { tagFontSize, tagFontFamily, tagColor } = {}, align, offset, rotate = false) {
|
|
||||||
const { ctx, defaultAxisFontSize, defaultAxisFontFamily, defaultTagColor, drawColors } = this
|
|
||||||
|
|
||||||
let color = tagColor || defaultTagColor
|
|
||||||
|
|
||||||
color === 'colors' && (color = drawColors)
|
|
||||||
|
|
||||||
const colorNum = color.length
|
|
||||||
|
|
||||||
const mulColor = color instanceof Array
|
|
||||||
|
|
||||||
ctx.font = `${tagFontSize || defaultAxisFontSize}px ${tagFontFamily || defaultAxisFontFamily}`
|
|
||||||
|
|
||||||
!mulColor && (ctx.fillStyle = color)
|
|
||||||
|
|
||||||
ctx.textAlign = align[0]
|
|
||||||
ctx.textBaseline = align[1]
|
|
||||||
|
|
||||||
tags.forEach((tag, i) => {
|
|
||||||
if (!tag) return
|
|
||||||
|
|
||||||
const currentPos = [tagPos[i][0] + offset[0], tagPos[i][1] + offset[1]]
|
|
||||||
|
|
||||||
mulColor && (ctx.fillStyle = color[i % colorNum])
|
|
||||||
|
|
||||||
if (rotate) {
|
|
||||||
ctx.save()
|
|
||||||
ctx.translate(...currentPos)
|
|
||||||
ctx.rotate(Math.PI / 4)
|
|
||||||
}
|
|
||||||
|
|
||||||
ctx.fillText(tag, ...(rotate ? [0, 0] : currentPos))
|
|
||||||
|
|
||||||
if (rotate) ctx.restore()
|
|
||||||
})
|
|
||||||
},
|
|
||||||
drawUnit () {}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
@ -36,7 +36,7 @@ colors: ['#9cf4a7', '#66d7ee', '#eee966', '#a866ee', '#ee8f66', '#ee66aa']
|
||||||
</div>
|
</div>
|
||||||
</border-box-7>
|
</border-box-7>
|
||||||
|
|
||||||
<border-box-7 class="chart-item">
|
<!-- <border-box-7 class="chart-item">
|
||||||
<point-chart :data="pointChartData1" :colors="colors" class="chart" />
|
<point-chart :data="pointChartData1" :colors="colors" class="chart" />
|
||||||
|
|
||||||
<div class="config-info">
|
<div class="config-info">
|
||||||
|
|
@ -50,7 +50,7 @@ data: {
|
||||||
}
|
}
|
||||||
</highlight-code>
|
</highlight-code>
|
||||||
</div>
|
</div>
|
||||||
</border-box-7>
|
</border-box-7> -->
|
||||||
|
|
||||||
<border-box-7 class="chart-item">
|
<border-box-7 class="chart-item">
|
||||||
<column-chart :data="columnChartData1" :colors="colors" class="chart" />
|
<column-chart :data="columnChartData1" :colors="colors" class="chart" />
|
||||||
|
|
@ -62,27 +62,7 @@ data: {
|
||||||
</highlight-code>
|
</highlight-code>
|
||||||
|
|
||||||
<highlight-code>
|
<highlight-code>
|
||||||
data: {
|
// 1111
|
||||||
data: [
|
|
||||||
{ // 必须 允许空位 空位数据不参与绘制
|
|
||||||
data: [180, 290, 420, 200, 350, 219],
|
|
||||||
// 非必须 可单独设置该列数据填充色 多个颜色自动渐变 允许colors指代
|
|
||||||
fillColor: ['#247efc', '#ff2fdb']
|
|
||||||
}, ...
|
|
||||||
],
|
|
||||||
x: {
|
|
||||||
// 必须 允许空位 空位保留占位
|
|
||||||
data: ['西峡', '周口', '南阳', '驻马店', '郑州', '洛阳']
|
|
||||||
},
|
|
||||||
labelLine: {
|
|
||||||
// 非必须 若不配置 自动使用全角色 多个颜色 循环使用
|
|
||||||
color: '#2b7bfb',
|
|
||||||
// 非必须
|
|
||||||
data: ['车流量'],
|
|
||||||
// 非必须 rect | rectangle 正方形 或长方形
|
|
||||||
type: 'rectangle'
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</highlight-code>
|
</highlight-code>
|
||||||
</div>
|
</div>
|
||||||
</border-box-7>
|
</border-box-7>
|
||||||
|
|
@ -97,22 +77,7 @@ data: {
|
||||||
</highlight-code>
|
</highlight-code>
|
||||||
|
|
||||||
<highlight-code>
|
<highlight-code>
|
||||||
// 相同配置不再赘述
|
// 2222
|
||||||
data: {
|
|
||||||
x: {
|
|
||||||
// 非必须 设置是否绘制网格
|
|
||||||
grid: true,
|
|
||||||
// 非必须 设置网格类型 line | dashed 虚实线
|
|
||||||
gridType: 'dashed'
|
|
||||||
},
|
|
||||||
y: {
|
|
||||||
min: 0, // 非必须 强制设定该轴最小值
|
|
||||||
max: 450, // 非必须 强制设定该轴最大值
|
|
||||||
unit: '次', // 非必须 设置该轴单位
|
|
||||||
grid: true,
|
|
||||||
gridColor: '#333' // 非必须 设置网格颜色 允许colors指代
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</highlight-code>
|
</highlight-code>
|
||||||
</div>
|
</div>
|
||||||
</border-box-7>
|
</border-box-7>
|
||||||
|
|
@ -123,17 +88,10 @@ data: {
|
||||||
<div class="config-info">
|
<div class="config-info">
|
||||||
<div class="title">Column-Chart</div>
|
<div class="title">Column-Chart</div>
|
||||||
<highlight-code>
|
<highlight-code>
|
||||||
<column-chart :data="data" :colors="colors" />
|
|
||||||
</highlight-code>
|
</highlight-code>
|
||||||
|
|
||||||
<highlight-code>
|
<highlight-code>
|
||||||
// 相同配置不再赘述
|
// 333
|
||||||
data: {
|
|
||||||
// 非必须 配置该项 将绘制背景色
|
|
||||||
showColumnBG: true,
|
|
||||||
// 非必须 可设置背景色 多个颜色将自动循环使用
|
|
||||||
bgColor: 'rgba(200, 200, 200, 0.2)'
|
|
||||||
}
|
|
||||||
</highlight-code>
|
</highlight-code>
|
||||||
</div>
|
</div>
|
||||||
</border-box-7>
|
</border-box-7>
|
||||||
|
|
@ -144,43 +102,10 @@ data: {
|
||||||
<div class="config-info">
|
<div class="config-info">
|
||||||
<div class="title">Column-Chart</div>
|
<div class="title">Column-Chart</div>
|
||||||
<highlight-code>
|
<highlight-code>
|
||||||
<column-chart :data="data" :colors="colors" />
|
|
||||||
</highlight-code>
|
</highlight-code>
|
||||||
|
|
||||||
<highlight-code>
|
<highlight-code>
|
||||||
// 相同配置不再赘述
|
// 44444
|
||||||
data: {
|
|
||||||
data: [
|
|
||||||
{
|
|
||||||
data: [180, 290, 420, 200, 350, 219],
|
|
||||||
fillColor: '#247af7'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
data: [
|
|
||||||
[32, 110, 75],
|
|
||||||
[66, 80, 15],
|
|
||||||
[125, 136, 116],
|
|
||||||
[110, 66, 67],
|
|
||||||
[84, 20, 50],
|
|
||||||
[69, 28, 45]
|
|
||||||
],
|
|
||||||
fillColor: ['#47bf97', '#292163', '#fafb5d']
|
|
||||||
},
|
|
||||||
{
|
|
||||||
data: [250, 120, 350, 333, 125, 200],
|
|
||||||
fillColor: '#ff23d4'
|
|
||||||
}
|
|
||||||
],
|
|
||||||
x: {
|
|
||||||
data: [ '布拉迪斯拉发', '斯里巴加湾市', ...],
|
|
||||||
// 非必须 旋转该轴文字以适应长标签 仅在轴生效
|
|
||||||
rotate: true,
|
|
||||||
// 非必须 设置该轴偏移
|
|
||||||
offset: 60,
|
|
||||||
// 设置该轴宽度或长度 | unitHeight
|
|
||||||
unitWidth: 10
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</highlight-code>
|
</highlight-code>
|
||||||
</div>
|
</div>
|
||||||
</border-box-7>
|
</border-box-7>
|
||||||
|
|
@ -195,25 +120,7 @@ data: {
|
||||||
</highlight-code>
|
</highlight-code>
|
||||||
|
|
||||||
<highlight-code>
|
<highlight-code>
|
||||||
// 相同配置不再赘述
|
// 55555
|
||||||
data: {
|
|
||||||
data: [
|
|
||||||
x: {
|
|
||||||
min: 0,
|
|
||||||
max: 450,
|
|
||||||
unit: '次',
|
|
||||||
grid: true,
|
|
||||||
gridColor: '#333'
|
|
||||||
},
|
|
||||||
y: {
|
|
||||||
data: ['西峡', '周口', '南阳', '驻马店', '郑州', '洛阳']
|
|
||||||
},
|
|
||||||
// 非必须 配置该项可以绘制圆角柱
|
|
||||||
columnType: 'round',
|
|
||||||
// 非必须 水平柱状图需配置该项
|
|
||||||
horizon: true,
|
|
||||||
showColumnBG: true
|
|
||||||
},
|
|
||||||
</highlight-code>
|
</highlight-code>
|
||||||
</div>
|
</div>
|
||||||
</border-box-7>
|
</border-box-7>
|
||||||
|
|
@ -228,19 +135,7 @@ data: {
|
||||||
</highlight-code>
|
</highlight-code>
|
||||||
|
|
||||||
<highlight-code>
|
<highlight-code>
|
||||||
// 相同配置不再赘述
|
// 66666
|
||||||
data: {
|
|
||||||
x: {
|
|
||||||
// 非必须 配置该项将不绘制坐标线
|
|
||||||
noAxisLine: true,
|
|
||||||
// 非必须 配置该项将不绘制坐标刻度标识
|
|
||||||
noAxisTag: true
|
|
||||||
},
|
|
||||||
y: {
|
|
||||||
noAxisLine: true,
|
|
||||||
noAxisTag: true
|
|
||||||
}
|
|
||||||
},
|
|
||||||
</highlight-code>
|
</highlight-code>
|
||||||
</div>
|
</div>
|
||||||
<div id="radar-chart" />
|
<div id="radar-chart" />
|
||||||
|
|
@ -252,7 +147,6 @@ data: {
|
||||||
<div class="config-info">
|
<div class="config-info">
|
||||||
<div class="title">Radar-Chart</div>
|
<div class="title">Radar-Chart</div>
|
||||||
<highlight-code>
|
<highlight-code>
|
||||||
<radar-chart :data="data" :colors="colors" />
|
|
||||||
</highlight-code>
|
</highlight-code>
|
||||||
|
|
||||||
<highlight-code>
|
<highlight-code>
|
||||||
|
|
@ -742,81 +636,10 @@ export default {
|
||||||
{
|
{
|
||||||
data: [180, 290, 420, 200, 350, 219],
|
data: [180, 290, 420, 200, 350, 219],
|
||||||
fillColor: ['#247efc', '#ff2fdb']
|
fillColor: ['#247efc', '#ff2fdb']
|
||||||
}
|
|
||||||
],
|
|
||||||
x: {
|
|
||||||
data: ['西峡', '周口', '南阳', '驻马店', '郑州', '洛阳']
|
|
||||||
},
|
|
||||||
y: {
|
|
||||||
},
|
|
||||||
labelLine: {
|
|
||||||
color: '#2b7bfb',
|
|
||||||
data: ['车流量'],
|
|
||||||
type: 'rectangle'
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
columnChartData2: {
|
|
||||||
data: [
|
|
||||||
{
|
|
||||||
data: [180, 290, 420, 200, 350, 219],
|
|
||||||
fillColor: ['#247efc', '#ff2fdb']
|
|
||||||
}
|
|
||||||
],
|
|
||||||
x: {
|
|
||||||
data: ['西峡', '周口', '南阳', '驻马店', '郑州', '洛阳'],
|
|
||||||
grid: true,
|
|
||||||
gridType: 'dashed'
|
|
||||||
},
|
|
||||||
y: {
|
|
||||||
min: 0,
|
|
||||||
max: 450,
|
|
||||||
unit: '次',
|
|
||||||
grid: true,
|
|
||||||
gridColor: '#333'
|
|
||||||
},
|
|
||||||
labelLine: {
|
|
||||||
color: '#2b7bfb',
|
|
||||||
data: ['车流量'],
|
|
||||||
type: 'rectangle'
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
columnChartData3: {
|
|
||||||
data: [
|
|
||||||
{
|
|
||||||
data: [180, 290, 420, 200, 350, 219],
|
|
||||||
fillColor: ['#247efc', '#ff2fdb']
|
|
||||||
}
|
|
||||||
],
|
|
||||||
x: {
|
|
||||||
data: ['西峡', '周口', '南阳', '驻马店', '郑州', '洛阳']
|
|
||||||
},
|
|
||||||
y: {
|
|
||||||
min: 0,
|
|
||||||
max: 450,
|
|
||||||
unit: '次',
|
|
||||||
grid: true,
|
|
||||||
gridColor: '#333'
|
|
||||||
},
|
|
||||||
labelLine: {
|
|
||||||
color: '#2b7bfb',
|
|
||||||
data: ['车流量'],
|
|
||||||
type: 'rectangle'
|
|
||||||
},
|
|
||||||
showColumnBG: true,
|
|
||||||
bgColor: 'rgba(200, 200, 200, 0.2)'
|
|
||||||
},
|
|
||||||
|
|
||||||
columnChartData4: {
|
|
||||||
data: [
|
|
||||||
{
|
|
||||||
data: [180, 290, 420, 200, 350, 219],
|
|
||||||
fillColor: '#247af7'
|
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
data: [
|
data: [
|
||||||
[32, 110, 75],
|
[30, 110, 75],
|
||||||
[66, 80, 15],
|
[66, 80, 15],
|
||||||
[125, 136, 116],
|
[125, 136, 116],
|
||||||
[110, 66, 67],
|
[110, 66, 67],
|
||||||
|
|
@ -826,91 +649,191 @@ export default {
|
||||||
fillColor: ['#47bf97', '#e3b4a2', '#fafb5d']
|
fillColor: ['#47bf97', '#e3b4a2', '#fafb5d']
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
data: [250, 120, 350, 333, 125, 200],
|
data: [11, 17, 19, 30, 20, 25],
|
||||||
fillColor: '#ff23d4'
|
type: 'polyline',
|
||||||
|
againstAxis: true
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
x: {
|
x: {
|
||||||
data: [
|
|
||||||
'布拉迪斯拉发',
|
|
||||||
'斯里巴加湾市',
|
|
||||||
'达累斯萨拉姆',
|
|
||||||
'亚的斯亚贝巴',
|
|
||||||
'特古西加尔巴',
|
|
||||||
'下诺夫哥罗德'
|
|
||||||
],
|
|
||||||
offset: 60,
|
|
||||||
rotate: true,
|
|
||||||
unitWidth: 10
|
|
||||||
},
|
|
||||||
y: {
|
|
||||||
min: 0,
|
|
||||||
max: 450,
|
|
||||||
unit: '次',
|
|
||||||
grid: true,
|
|
||||||
gridColor: '#333'
|
|
||||||
},
|
|
||||||
labelLine: {
|
|
||||||
color: ['#247af7', '#47bf97', '#e3b4a2', '#fafb5d', '#ff23d4'],
|
|
||||||
data: ['玩具', '书本', '食品', '服装', '娱乐'],
|
|
||||||
type: 'rectangle'
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
columnChartData5: {
|
|
||||||
data: [
|
|
||||||
{
|
|
||||||
data: [250, 120, 350, 333, 125, 200],
|
|
||||||
fillColor: ['#247efc', '#ff2fdb']
|
|
||||||
}
|
|
||||||
],
|
|
||||||
x: {
|
|
||||||
min: 0,
|
|
||||||
max: 450,
|
|
||||||
unit: '次',
|
|
||||||
grid: true,
|
|
||||||
gridColor: '#333'
|
|
||||||
},
|
|
||||||
y: {
|
|
||||||
data: ['西峡', '周口', '南阳', '驻马店', '郑州', '洛阳']
|
data: ['西峡', '周口', '南阳', '驻马店', '郑州', '洛阳']
|
||||||
},
|
},
|
||||||
|
y: {
|
||||||
|
// data: ['西峡', '周口', '南阳', '驻马店', '郑州', '洛阳']
|
||||||
|
},
|
||||||
|
ax: {
|
||||||
|
},
|
||||||
|
ay: {
|
||||||
|
},
|
||||||
labelLine: {
|
labelLine: {
|
||||||
color: '#2b7bfb',
|
color: '#2b7bfb',
|
||||||
data: ['车流量'],
|
data: ['车流量'],
|
||||||
type: 'rectangle'
|
type: 'rectangle'
|
||||||
},
|
},
|
||||||
columnType: 'round',
|
spaceBetween: true,
|
||||||
horizon: true,
|
// horizon: true,
|
||||||
showColumnBG: true
|
localGradient: true
|
||||||
},
|
},
|
||||||
|
|
||||||
columnChartData6: {
|
columnChartData2: '',
|
||||||
data: [
|
columnChartData3: '',
|
||||||
{
|
columnChartData4: '',
|
||||||
data: [250, 120, 350, 333, 125, 200],
|
columnChartData5: '',
|
||||||
fillColor: ['#247efc', '#ff2fdb']
|
columnChartData6: '',
|
||||||
}
|
|
||||||
],
|
// columnChartData2: {
|
||||||
x: {
|
// data: [
|
||||||
data: ['西峡', '周口', '南阳', '驻马店', '郑州', '洛阳'],
|
// {
|
||||||
noAxisLine: true,
|
// data: [180, 290, 420, 200, 350, 219],
|
||||||
noAxisTag: true,
|
// fillColor: ['#247efc', '#ff2fdb']
|
||||||
offset: 10
|
// }
|
||||||
},
|
// ],
|
||||||
y: {
|
// x: {
|
||||||
min: 0,
|
// data: ['西峡', '周口', '南阳', '驻马店', '郑州', '洛阳'],
|
||||||
max: 450,
|
// grid: true,
|
||||||
noAxisLine: true,
|
// gridType: 'dashed'
|
||||||
noAxisTag: true,
|
// },
|
||||||
offset: 1
|
// y: {
|
||||||
},
|
// min: 0,
|
||||||
labelLine: {
|
// max: 450,
|
||||||
color: '#2b7bfb',
|
// unit: '次',
|
||||||
data: ['车流量'],
|
// grid: true,
|
||||||
type: 'rectangle'
|
// gridColor: '#333'
|
||||||
},
|
// },
|
||||||
showColumnBG: true
|
// labelLine: {
|
||||||
},
|
// color: '#2b7bfb',
|
||||||
|
// data: ['车流量'],
|
||||||
|
// type: 'rectangle'
|
||||||
|
// }
|
||||||
|
// },
|
||||||
|
|
||||||
|
// columnChartData3: {
|
||||||
|
// data: [
|
||||||
|
// {
|
||||||
|
// data: [180, 290, 420, 200, 350, 219],
|
||||||
|
// fillColor: ['#247efc', '#ff2fdb']
|
||||||
|
// }
|
||||||
|
// ],
|
||||||
|
// x: {
|
||||||
|
// data: ['西峡', '周口', '南阳', '驻马店', '郑州', '洛阳']
|
||||||
|
// },
|
||||||
|
// y: {
|
||||||
|
// min: 0,
|
||||||
|
// max: 450,
|
||||||
|
// unit: '次',
|
||||||
|
// grid: true,
|
||||||
|
// gridColor: '#333'
|
||||||
|
// },
|
||||||
|
// labelLine: {
|
||||||
|
// color: '#2b7bfb',
|
||||||
|
// data: ['车流量'],
|
||||||
|
// type: 'rectangle'
|
||||||
|
// },
|
||||||
|
// showColumnBG: true,
|
||||||
|
// bgColor: 'rgba(200, 200, 200, 0.2)'
|
||||||
|
// },
|
||||||
|
// columnChartData4: {
|
||||||
|
// data: [
|
||||||
|
// {
|
||||||
|
// data: [180, 290, 420, 200, 350, 219],
|
||||||
|
// fillColor: '#247af7'
|
||||||
|
// },
|
||||||
|
// {
|
||||||
|
// data: [
|
||||||
|
// [32, 110, 75],
|
||||||
|
// [66, 80, 15],
|
||||||
|
// [125, 136, 116],
|
||||||
|
// [110, 66, 67],
|
||||||
|
// [84, 20, 50],
|
||||||
|
// [69, 28, 45]
|
||||||
|
// ],
|
||||||
|
// fillColor: ['#47bf97', '#e3b4a2', '#fafb5d']
|
||||||
|
// },
|
||||||
|
// {
|
||||||
|
// data: [250, 120, 350, 333, 125, 200],
|
||||||
|
// fillColor: '#ff23d4'
|
||||||
|
// }
|
||||||
|
// ],
|
||||||
|
// x: {
|
||||||
|
// data: [
|
||||||
|
// '布拉迪斯拉发',
|
||||||
|
// '斯里巴加湾市',
|
||||||
|
// '达累斯萨拉姆',
|
||||||
|
// '亚的斯亚贝巴',
|
||||||
|
// '特古西加尔巴',
|
||||||
|
// '下诺夫哥罗德'
|
||||||
|
// ],
|
||||||
|
// offset: 60,
|
||||||
|
// rotate: true,
|
||||||
|
// unitWidth: 10
|
||||||
|
// },
|
||||||
|
// y: {
|
||||||
|
// min: 0,
|
||||||
|
// max: 450,
|
||||||
|
// unit: '次',
|
||||||
|
// grid: true,
|
||||||
|
// gridColor: '#333'
|
||||||
|
// },
|
||||||
|
// labelLine: {
|
||||||
|
// color: ['#247af7', '#47bf97', '#e3b4a2', '#fafb5d', '#ff23d4'],
|
||||||
|
// data: ['玩具', '书本', '食品', '服装', '娱乐'],
|
||||||
|
// type: 'rectangle'
|
||||||
|
// }
|
||||||
|
// },
|
||||||
|
|
||||||
|
// columnChartData5: {
|
||||||
|
// data: [
|
||||||
|
// {
|
||||||
|
// data: [250, 120, 350, 333, 125, 200],
|
||||||
|
// fillColor: ['#247efc', '#ff2fdb']
|
||||||
|
// }
|
||||||
|
// ],
|
||||||
|
// x: {
|
||||||
|
// min: 0,
|
||||||
|
// max: 450,
|
||||||
|
// unit: '次',
|
||||||
|
// grid: true,
|
||||||
|
// gridColor: '#333'
|
||||||
|
// },
|
||||||
|
// y: {
|
||||||
|
// data: ['西峡', '周口', '南阳', '驻马店', '郑州', '洛阳']
|
||||||
|
// },
|
||||||
|
// labelLine: {
|
||||||
|
// color: '#2b7bfb',
|
||||||
|
// data: ['车流量'],
|
||||||
|
// type: 'rectangle'
|
||||||
|
// },
|
||||||
|
// columnType: 'round',
|
||||||
|
// horizon: true,
|
||||||
|
// showColumnBG: true
|
||||||
|
// },
|
||||||
|
|
||||||
|
// columnChartData6: {
|
||||||
|
// data: [
|
||||||
|
// {
|
||||||
|
// data: [250, 120, 350, 333, 125, 200],
|
||||||
|
// fillColor: ['#247efc', '#ff2fdb']
|
||||||
|
// }
|
||||||
|
// ],
|
||||||
|
// x: {
|
||||||
|
// data: ['西峡', '周口', '南阳', '驻马店', '郑州', '洛阳'],
|
||||||
|
// noAxisLine: true,
|
||||||
|
// noAxisTag: true,
|
||||||
|
// offset: 10
|
||||||
|
// },
|
||||||
|
// y: {
|
||||||
|
// min: 0,
|
||||||
|
// max: 450,
|
||||||
|
// noAxisLine: true,
|
||||||
|
// noAxisTag: true,
|
||||||
|
// offset: 1
|
||||||
|
// },
|
||||||
|
// labelLine: {
|
||||||
|
// color: '#2b7bfb',
|
||||||
|
// data: ['车流量'],
|
||||||
|
// type: 'rectangle'
|
||||||
|
// },
|
||||||
|
// showColumnBG: true
|
||||||
|
// },
|
||||||
|
|
||||||
radarChartData1: {
|
radarChartData1: {
|
||||||
data: [
|
data: [
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue