echarts折线图配置详解

做项目的时候难免会遇到配置可视话图表的时候，经常会为了一个功能查找很久，于是把做过的功能比较齐全的折线图具体配置项纪录下来

1. 更换鼠标提示框背景图片，动态设置悬浮框的位置
2. 更改折线图表格背景颜色
3. 更改坐标轴样式，设置坐标轴偏移量
4. 设置折线样式，主图位置
5. 设置折线拐点样式
6. 设置指示线和标示线
7. 设置折线以下面积区域渐变色

// 获取echarts图
    initChart(dataNum, date, flag) {
      let value = this.echartsValue;
      let arr = [
        value.thresholdHigh,
        value.thresholdHighHigh,
        value.thresholdLow,
        value.thresholdLowLow,
      ];
      // 取零数为整数，如15变成20，以便设置y轴最大值
      let max = Math.ceil(Math.max(...arr) / 10) * 10;
      const barChart = Echarts.init(this.$refs["lineCharts"], "shine");
      let option = {
        color: ["#002339"],
        tooltip: {
          trigger: "axis",
          // 设置浮框跟随鼠标并显示在鼠标上方，这个功能不能太薄精确的显示在鼠标上方
          position: function (point, params, dom, rect, size) {
            // 鼠标坐标和提示框位置的参考坐标系是：以外层div的左上角那一点为原点，x轴向右，y轴向下
            // 提示框位置
            var x = 0; // x坐标位置
            var y = 0; // y坐标位置
            // 当前鼠标位置
            var pointX = point[0];
            var pointY = point[1];
            // 提示框大小
            var boxWidth = size.contentSize[0];
            var boxHeight = size.contentSize[1];
            // boxWidth > pointX 说明鼠标左边放不下提示框
            if (boxWidth > pointX) {
              x = 6;
            } else {
              // 左边放的下
              x = pointX - boxWidth / 2;
            }
            // boxHeight > pointY 说明鼠标上边放不下提示框
            // if (boxHeight > pointY) {
            //   y = 5;
            // } else {
            //   // 上边放得下
            y = pointY - boxHeight;
            // }
            return [x, y];
          },
          // 更换悬浮框的背景图片
          backgroundColor: "transparent",
          borderWidth: 0,
          formatter: function (params) {
            var str = `<div style = "background:url( ${require("../../assets/images/production/left/line.png")}) no-repeat center center ;padding: 0 10px;height:26px; text-align: center;color: #fff">${
              params[0].data
            }</div>`;
            return str;
          },
          //垂直指示线样式更改
          axisPointer: {
            lineStyle: {
              width: 1,
              type: "dotted",
              color: "#27C6E0",
            },
          },
        },
        // echarts主图位置移动
        grid: {
          show: true,
          top: "10%",
          left: "12%",
          bottom: "12%",
          right: "5%",
          // containLabel: true,
          // 设置折线图表格区域背景颜色
          backgroundColor: "#002339",
          borderColor: "transparent",
        },
        xAxis: {
          type: "category",
          data: date,
          // 更改坐标轴文字颜色，文字大小，设置最小间隔，可以最大程度的把x轴数据显示完全
          axisLabel: {
            interval: 0,
            textStyle: {
              color: "#fff",
              fontSize: 15,
            },
          },
          // 是否显示刻度
          axisTick: {
            show: false,
          },
          // 是否显示表格背景线
          splitLine: { show: false },
          // 折线颜色
          axisLine: {
            lineStyle: {
              color: "#45515D",
              width: 1,
            },
          },
        },
        yAxis: {
          type: "value",
          // 坐标轴位置偏移
          offset: 8,
          // 最小显示刻度
          minInterval: 1,
          // 最大值
          max: max,
          // interval: 25,
          // 坐标轴文字颜色
          axisLabel: {
            textStyle: {
              color: "#fff",
              fontSize: 15,
            },
          },
          // 设置坐标轴颜色
          axisLine: {
            lineStyle: {
              color: "#45515D",
              width: 1,
            },
          },
        },
        series: [
          {
            data: dataNum,
            type: "line",
            // 是否显示折线上面的点
            showSymbol: true,
            // 是否平滑曲线显示
            smooth: true,
            // 折线拐点样式
            symbol: "circle",
            symbolSize: 4,
            // 折线点的样式
            itemStyle: {
              color: "#FFFFFF",
              borderColor: "#2FE4FF",
              borderWidth: 1,
            },
            //折线下面的面积区域颜色
            // areaStyle: {
            //   z: 10,
            //   type: "default",
            //   // 渐变色实现
            //   color: new Echarts.graphic.LinearGradient(
            //     0,
            //     0,
            //     0,
            //     1,
            //     // 变化度
            //     // 三种由深及浅的颜色
            //     [
            //       {
            //         offset: 0,
            //         color: "#0C556C",
            //       },
            //       {
            //         offset: 0.5,
            //         color: "#074157",
            //       },
            //       {
            //         offset: 1,
            //         color: "rgba(4, 53, 76, .7)",
            //       },
            //     ]
            //   ),
            // },
            lineStyle: {
              // 折线的样式
              width: 1,
              type: "solid",
              color: "#2BD7F1",
            },
            /*
             * 标记的四条虚线
             */
            markLine: {
             // 是否显示虚线箭头
              symbol: "none",
              // 图形是否不响应和触发鼠标事件
              silent: true,
              // 线的样式
              lineStyle: { normal: { type: "dashed" } },
              // 虚线后面label的显示样式
              label: {
                position: "insideEndTop",
                formatter: "{b}",
                color: "#fff",
              },
              data: [
                {
                  name: "上限",
                  yAxis: value.thresholdHigh ? value.thresholdHigh : -1,
                  lineStyle: { width: 1.656, color: "#ff6367" },
                },
                {
                  name: "上上限",
                  yAxis: value.thresholdHighHigh ? value.thresholdHighHigh : -1,
                  lineStyle: { width: 1.656, color: "#D8D8D8" },
                },
                {
                  name: "下限",
                  yAxis: value.thresholdLow ? value.thresholdLow : -1,
                  lineStyle: { width: 1.656, color: "#46C67F" },
                },
                {
                  name: "下下限",
                  yAxis: value.thresholdLowLow ? value.thresholdLowLow : -1,
                  lineStyle: { width: 1.656, color: "#46C67F" },
                  // label: { show: false },
                },
              ],
            },
          },
        ],
      };
      barChart.setOption(option);
    },

最终效果图