【Echarts系列】—— 自定义折线图

记录一下做项目过程中做过的图

const chartInstance = this.$echarts.init(this.$refs.fold_line)
      const xAxisData = ['2023-05', '2023-04', '2023-03', '2023-02', '2023-01', '2022-12', '2022-11', '2022-10', '2022-09', '2022-08', '2022-07', '2022-06']
      const yAxisData = [2, 1, 5, 0, 7, 2, 4, 8, 3, 10, 3, 5]
      const initOption = {
        grid: {
          containLabel: true,
          left: 30,
          right: 30,
          bottom: 10,
          top: 30
        },
        tooltip: {
          trigger: 'axis'
        },
        xAxis: [
          {
            type: 'category',
            boundaryGap: false,
            data: xAxisData,
            axisLine: {
              show: true,
              lineStyle: {
                color: '#3b3b3c'
              }
            },
            axisLabel: {
              show: true,
              color: '#3b3b3c',
              fontSize: 14,
              interval: 0,
              rotate: 15,
              padding: [30, -20, 20, 15]
            },
            splitLine: {
              show: false
            }
          }
        ],
        yAxis: [
          {
            type: 'value',
            axisLabel: {
              color: '#3b3b3c'
            },
            splitLine: {
              show: false
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: '#3b3b3c'
              }
            }
          }
        ],
        dataZoom: [
          {
            type: 'inside',
            start: 0,
            end: 50
          },
          {
            start: 0,
            end: 50
          }
        ],
        series: [
          {
            type: 'line',
            smooth: true,
            data: yAxisData,
            symbol: 'arrow',
            symbolOffset: [5, -10],
            symbolSize: 8,
            symbolRotate: -105,
            areaStyle: {
              color: this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: 'rgb(255, 158, 68)'
                },
                {
                  offset: 1,
                  color: '#2be598'
                }
              ])
            },
            itemStyle: {
              color: '#2be598'
            }
          }
        ]
      }
      chartInstance.setOption(initOption, true)