波浪形柱子,x轴内容分三个颜色区间型显示,带上分割虚线,采用多个数组,拆分x轴内容,可设置柱子宽度即维度
var xAxisData = [];
var data1 = [];
var data2 = [];
var data3 = [];
for (var i = 0; i < 150; i++) {
xAxisData.push('A' + i);
const v = (Math.sin(i / 5) * (i / 5 - 10) + i / 6) * 5;
// const v = 150 - i;
data1.push(v);
data2.push(i%50 === 0 ? 200 : 1);
data3.push(v);
}
option = {
title: {
text: 'Bar Animation Delay'
},
legend: {
data: ['bar']
},
toolbox: {
// y: 'bottom',
feature: {
magicType: {
type: ['stack']
},
dataView: {},
saveAsImage: {
pixelRatio: 1
}
}
},
tooltip: {},
xAxis: {
data: xAxisData,
splitLine: {
show: false
}
},
yAxis: {},
series: [
{
data: [],
type: 'line',
markLine: {
lineStyle: {
type: 'dashed',
color: 'red',
},
silent: true,
symbol:'none',
blur: {
lineStyle: {
opacity: 1,
}
},
data: [[{ xAxis: 'A42', yAxis:0 }, { xAxis: 'A42', yAxis:120 }]]
},
},
{
data: [],
type: 'line',
markLine: {
lineStyle: {
type: 'dashed',
color: 'red',
},
silent: true,
symbol:'none',
blur: {
lineStyle: {
opacity: 1,
}
},
data: [[{ xAxis: 'A112', yAxis:0 }, { xAxis: 'A112', yAxis:120 }]]
},
},
{
name: 'bar',
type: 'bar',
data: data1,
emphasis: {
focus: 'series'
},
animationDelay: function (idx) {
return idx * 10;
},
itemStyle: {
color: (params) => params.dataIndex <= 42 ? '#FA4D56' : params.dataIndex >=112 ? '#70C247' : '#D9D9D9',
// color: '#D9D9D9'
},
},
{
data: data3,
type: 'line',
smooth: true,
showSymbol: false,
clip: true,
lineStyle: {
color: '#979797',
},
},
],
animationEasing: 'elasticOut',
animationDelayUpdate: function (idx) {
return idx * 5;
}
};