echarts折线图属性

1、x轴信息全部显示、倾斜度

xAxis: {
          type: "category",

          axisTick: {
            show: false,
          },
          axisLine: {
            show: false,
          },
          axisLabel: {
            interval: 0, //横轴信息全部显示
            rotate: 15,//倾斜度
            textStyle: {
              color: "#666",
            },
          },
          //data: this.axis,
        },

2、y轴显示单位、调整单位位置、设置背景网格线为虚线

      yAxis: {
          name: "单位：个",
          nameTextStyle: { // y轴name的样式调整
            padding: [0, 50, 0, 0] // 加上padding可以调整其位置
          },
          type: "value",
          //显示最小值、最大值
          min: function (value) {
            return value.min;
          },

          // max: function (value) {
          //   return value.max;
          // },
          axisTick: {
            show: false,
          },
          axisLine: {
            show: false,
          },
          splitLine: {
            lineStyle: {
              color: "#ddd",
              type: "dashed", //设置背景网格线为虚线
              // type: "solid", //设置背景网格线为实线

            },
          },
          axisLabel: {
            textStyle: {
              color: "#666",
            },
          },
          rotate: {
            type: Number,
            default: 0,
          },
        },

 3、折线不显示拐点（见上图 ↑ ）

  // symbol: "none",//不显示拐点

4、折线不显示拐点，鼠标滑过显示拐点、拐点大小

showSymbol: false, //鼠标滑过显示拐点
symbolSize: 5, //拐点大小

5、折线面积渐变色（见上图 ↑ ）

   areaStyle: {
              normal: {
                color: {
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [
                    {
                      offset: 0.1,
                      color: "#FCCC80", // 0% 处的颜色
                    },
                    {
                      offset: 0.5,
                      color: "rgba(252,204,128, 0.3)", // 0% 处的颜色
                    },
                    {
                      offset: 0.7,
                      color: "rgba(252,204,128, 0.1)", // 0% 处的颜色
                    },
                    {
                      offset: 0.9,
                      color: "rgba(0,0,0, 0.0)", // 100% 处的颜色
                    },
                  ],
                  globalCoord: false, // 缺省为 false
                },
              },
            },

 全部

 option = {
        grid: {
          top: "30",
          bottom: "50",
          left: "70",
          right: "20",
        },
        tooltip: {
          textStyle: {
            color: "#fff",
          },
          borderWidth: 0,
          trigger: "axis",
        },
        legend: {
          show: this.legend,
          bottom: "-6",
          type: "scroll",
          itemGap: 40, //间距
        },
        xAxis: {
          type: "category",

          axisTick: {
            show: false,
          },
          axisLine: {
            show: false,
          },
          axisLabel: {
            interval: 0, //横轴信息全部显示
            rotate: this.rotate,
            textStyle: {
              color: "#666",
            },
          },
          data: this.axis,
        },
        yAxis: {
          name: this.isShowUnit ? "单位：个" : "单位：台",
          nameTextStyle: { // y轴name的样式调整
            padding: [0, 50, 0, 0] // 加上padding可以调整其位置
          },
          type: "value",
          min: function (value) {
            return value.min;
          },

          // max: function (value) {
          //   return value.max;
          // },
          axisTick: {
            show: false,
          },
          axisLine: {
            show: false,
          },
          splitLine: {
            lineStyle: {
              color: "#ddd",
              type: "dashed", //设置背景网格线为虚线
              // type: "solid", //设置背景网格线为实线

            },
          },
          axisLabel: {
            textStyle: {
              color: "#666",
            },
          },
          rotate: {
            type: Number,
            default: 0,
          },
        },
        series:[{
            name: '设备',
            data: [],
            type: "line",
            // symbol: "none",//不显示拐点
            showSymbol: false, //鼠标滑过显示拐点
            symbolSize: 5, //拐点大小
        //设置拐点和折线颜色
      itemStyle: {
        normal: {
          color: "rgba(225, 192, 17, 1)", // 改变折线点的颜色
          lineStyle: {
            color: "rgba(225, 192, 17, 1)", // 改变折线颜色
          },
        },
      },
      lineStyle: {
            //折线从左到右渐变色
          color: {
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              {
                offset: 0.1,
                color: "rgba(182, 35, 247, 0.5)", // 0% 处的颜色
              },
              // {
              //   offset: 0.5,
              //   color: "rgba(182, 35, 247, 0.5)", // 0% 处的颜色
              // },
              // {
              //   offset: 0.7,
              //   color: "rgba(182, 35, 247, .3)", // 0% 处的颜色
              // },
              {
                offset: 0.9,
                color: "rgba(224, 203, 245, 0)", // 100% 处的颜色
              },
            ],
            globalCoord: false, // 缺省为 false
          },
        width: 10，//折线粗细
      },
            areaStyle: {
              normal: {
                color: {
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [
                    {
                      offset: 0.1,
                      color: "#FCCC80", // 0% 处的颜色
                    },
                    {
                      offset: 0.5,
                      color: "rgba(252,204,128, 0.3)", // 0% 处的颜色
                    },
                    {
                      offset: 0.7,
                      color: "rgba(252,204,128, 0.1)", // 0% 处的颜色
                    },
                    {
                      offset: 0.9,
                      color: "rgba(0,0,0, 0.0)", // 100% 处的颜色
                    },
                  ],
                  globalCoord: false, // 缺省为 false
                },
              },
            },
}
]