关于echarts: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, 心愿你对有所帮忙, 让咱们一起致力走向巅峰!