Echarts 柱状图,区间类型的波浪

96 阅读1分钟

波浪形柱子,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;
  }
};