echarts折线图配置虚线

echarts折线图配置虚线

1.开发环境 vue+echarts
2.电脑系统 windows10专业版
3.在开发的过程中,我们经常会使用到echarts绘制,现在我来分享一下,使用折线图怎么配置虚线?效果如下:

4.配置代码如下:

yAxis: {
          type: "value",
          min: a.echartsObj.echartsZhuMin,
          max: a.echartsObj.echartsZhuMax,
          interval:
            (a.echartsObj.echartsZhuMin + a.echartsObj.echartsZhuMax) / 2,
          splitLine: {
            //网格线
            lineStyle: {
              type: "dashed", //设置网格线类型 dotted：虚线   solid:实线
              width: 4,
            },
            show: true, //隐藏或显示
          },
        },

5.配置整体代码如下:

this.Chenoptionzhe = {
        title: {
          text: "ECharts 入门示例2",
        },
        tooltip: {
          trigger: "axis",
        },
        xAxis: {
          type: "category",
          data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun", ""],
          show: false,
        },
        yAxis: {
          type: "value",
          min: a.echartsObj.echartsZhuMin,
          max: a.echartsObj.echartsZhuMax,
          interval:
            (a.echartsObj.echartsZhuMin + a.echartsObj.echartsZhuMax) / 2,
          splitLine: {
            //网格线
            lineStyle: {
              type: "dashed", //设置网格线类型 dotted：虚线   solid:实线
              width: 4,
              //color:"red"
            },
            show: true, //隐藏或显示
          },
        },
        series: [
          {
            // data: [820, 932, 901, 934, 1290, 1330, 1320],
            data: a.echartsObj.echartsZhuArr,
            type: "line",
          },
        ],
      };

6.本期的教程到了这里就结束啦,是不是很nice,希望你对有所帮助,让我们一起努力走向巅峰!