echarts修改折线图样式，总结踩坑以及常用

以折线图为例。最终呈现的效果是这样的

在最外层可以设置，距离外层box的距离

myChart.setOption({
        grid: {
          //距离外层box左右位置
          x: 30,//左
          y: 45,//上
          x2: 45,//右
          y2: 40,//下
          borderWidth: 1,
        },
        }）

在xAxis,x坐标轴中，可以设置的样式，同样可作用于y轴。

修改x轴字体颜色

 axisLabel: { //字体        
            show: true,
            textStyle: {
              color: "#0079B8",
              fontSize: 12,
            },

修改x轴坐标轴颜色

 axisLine: {
            //坐标轴颜色
            lineStyle: {
              color: "#0079B8",
            },
          },

yAxis样式
1.name是 顶部文字
2，刻度数值的最大最小，min到max
3，坐标轴y轴的颜色修改
4，网格样式修改，solid是实线
5.y轴第一个值0隐藏（这个我找了好久）

  yAxis: {
      type: "value",
      name: "日期"
      nameLocation: "end",//name的具体位置，可调整上中下左
      // min: 0,
      // max: 100,
      axisLine: {
        //线
        lineStyle: {
          color: "#0079B8",
          width: 1,
        },
      },
      splitLine: {
        //网格区域
        show: true,
        lineStyle: {
          color: "#70707033",
          width: 1,
          type: "dotted",
        },
      },
      axisLabel: {
        formatter: function (value, index) {//隐藏 0
          let texts = [];
          if (value == 0) {
            texts.push("");
          } else {
            texts.push(value);
          }
          return texts;
        },
        show: true,
        textStyle: {
          color: "#0079B8", //更改坐标轴文字颜色
          fontSize: 12, //更改坐标轴文字大小
        },
      },
    },

series具体样式了
1、空心的折线图小圆点设置
2.渐变色设置
3.折线颜色修改
4.折线修改为曲线

 {
            data: [82, 93, 90, 93, 129, 133, 130, 92, 1, 94, 190],
            type: "line",//折线修改为曲线
            smooth: true,//显示
            symbol: "circle",//折线节点为小圆点
            symbolSize: "5", //折线点大小

            itemStyle: {
              borderColor: that.color, //折线点边框色，这里我函数调用了。大家直接换成自己要的颜色
              color: "#002440",
            },

            areaStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: that.color, // 0% 处的颜色
                  },
                  {
                    offset: 1,
                    color: "#ffffff00", // 100% 处的颜色
                  },
                ]), //背景渐变色
              },
            },
            lineStyle: {
              width: 1,
              type: "solid",
              color: that.color, //折线的颜色
            },
          },