Polyline-chart
<polyline-chart :data="data" :colors="colors" />
// 折线图与柱状图折线部分相似
data: [
{
data: [32, 30, 55, 24, 33, 25],
lineColor: '#3de7c9'
}
],
x: {
data: ['西峡', '周口', '南阳', '驻马店', '郑州', '洛阳']
},
showValueText: true,
// 非必需 数值展示位置偏移量
valueTextOffset: [10, -5]
Polyline-chart
<polyline-chart :data="data" />
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: '%'
}
}
Polyline-chart
<polyline-chart :data="data" />
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
}