echarts 柱状图-斜线

柱状图：是一种通过柱形的长度来表现数据大小的一种常用图表类型。

ECharts最基本的代码结构：
引入js文件，DOM容器，初始化对象，设置option

有一种场景就是来表示未发生或正在发生但还没完结的数据，效果如下图：

option代码如下：

	option.value = {
      tooltip: {
        trigger: 'item',
        backgroundColor:'rgba(5, 56, 61,1)',
        borderColor:'rgba(5, 56, 61,1)',
        formatter: function(params, ticket, callback) {
          let tip = `
          <span style='font-size: 16px;font-family: Microsoft YaHei;font-weight: 400;color: #fff;margin-left:5px;'>${params.name}</span>
          <span style='font-size: 16px;margin-left:20px;font-family: Microsoft YaHei;font-weight: 400;color: #fff;'>${params.value}</span>`;
          return tip;
        }
      },
      xAxis: {
        type: 'category',
        data: ['2018年', '2019年', '2020年', '2021年', '2022年'],
        nameTextStyle:{
          color:'#A1AAA8',
          fontSize:20,
        },
        axisTick: {
          show: true
        },
        axisLabel: {
            show: true,
            color: '#A1AAA8',
            fontSize:16
        },
        boundaryGap: true,
      },
      yAxis: {
        nameLocation: 'start',
        nameTextStyle: {
          padding: [-20, 0, 0, -50],
          fontSize: '14px',
          color: '#A1AAA8'
        },
        type:'value',
          axisLabel: {
          color: '#A1AAA8',
        },
        splitLine: {
          show: true,
          
          lineStyle: {
              color:'rgba(255,255,255,0.25)'
          },
        },
      },
      grid: {
        x: 40,
        y: 40,
        // width:'100%'
        right:10,
        bottom:60,
        top:80
      },
      series: [
        {
          type: 'bar',
          showBackground: true,
          backgroundStyle: {
            color: 'rgba(10, 51, 53, 1)'
          },
          barWidth:20,
          color:'',
          data: [
            {
              value: 1.88,
              itemStyle: {
                decal: {
                  symbol: 'none'
                }
              }
            },
            {
              value: 2.05,
              itemStyle: {
                decal: {
                  symbol: 'none'
                }
              }
            },
            {
              value: 2,
              itemStyle: {
                decal: {
                  symbol: 'none'
                }
              }
            },
            {
              value: 2.15,
              itemStyle: {
                decal: {
                  symbol: 'none'
                }
              }
            },
            2.5
          ],
          color: new echarts.graphic.LinearGradient(
                0, 0, 0, 1,
                [
                    {offset: 0, color: '#30FAE9'},                   //柱图渐变色
                    {offset: 1, color: '#152824'},                   //柱图渐变色
                ]
            )
        },
      ],
      //-------------------加斜线柱状图位置-------------------
      aria:{
        enabled:true,
        decal:{
          show: true,
          decals: [
            {
              color: decalColor,
              dashArrayX: [1, 0],
              dashArrayY: [4, 3],
              rotation: -Math.PI / 4
            },
          ]
        }
      }
    };
    option.value && chartDom.value.setOption(option.value);
    //-------------------自动轮播tooltip，xData-X轴数据-------------------
    let timer = null;
    var index2 = 0; //播放所在下标
    if (timer) clearInterval(timer);
    timer = setInterval(() => {
      chartDom.value.dispatchAction({
        type: 'showTip',
        seriesIndex: 0,
        dataIndex: index2,
      });
      index2++;
      if (index2 >= xData.length) {
        index2 = 0;
      }
    }, 2000);复制

Echarts图表效果图模板 — Make A Pie