Echarts在线免费图表

 
            const x = [2016, 2017, 2018, 2019, 2020]
const y2 = [1, 10, 100, 80, 20]
option = {
   //  grid: {
   //    top: 40,
   //    left: 30,
   //    right: 10,
   //    bottom: 20
   //  },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'line',
        shadowStyle: {
          color: 'rgba(81, 127, 253, 0.1)'
        },
        label: {
          show: false,
          color: '#517FFD',
          backgroundColor: 'transparent',
          fontSize: 12
        }
      },
      className: 'my-tooltip-box',
      formatter: function (params) {
        var str = '<div class="my-tooltip">'
        params.forEach((el) => {
          if (el.seriesName !== 'maxdata') {
            str += `<div><span class="name large">${el.name}年</span><br/><span class="value">${el.value} %</span></div>`
          }
        })
        str += '</div>'
        return str
      }
    },
    xAxis: {
      data: x,
      axisLine: {
        show: true, // 隐藏X轴轴线
        lineStyle: {
          color: 'rgba(221, 221, 221, 1)',
          width: 2
        }
      },
      axisTick: {
        show: false // 隐藏X轴刻度
      },
      axisLabel: {
        show: true,
        textStyle: {
          color: 'rgba(107, 107, 107, 1)', // X轴文字颜色
          fontSize: 12
        }
      }
    },
    yAxis: [
      {
        type: 'value',
        name: '单位：%',
        nameTextStyle: {
          color: 'rgba(107, 107, 107, 1)',
          padding: [0, 10, 0, 0],
          fontSize: 12
        },
        max: 100, // 可设置最大值
        splitLine: {
          show: false
        },
        axisTick: {
          show: false
        },
        axisLine: {
          show: false
        },
        axisLabel: {
          show: true,
          textStyle: {
            color: 'rgba(107, 107, 107, 1)',
            fontSize: 12
          }
        }
      }
    ],
    series: [
      {
        name: '增速',
        type: 'line',
        yAxisIndex: 0, // 使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用
        // symbol: 'circle', // 标记的图形为实心圆
        symbolSize: 6, // 标记的大小
        smooth: true,
        itemStyle: {
          // 折线拐点标志的样式
          color: 'rgba(47, 213, 166, 1)',
          borderColor: 'rgba(47, 213, 166, 1)',
          width: 2
        },
        areaStyle: {
          //区域填充样式
          normal: {
            //线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
            color: new echarts.graphic.LinearGradient(
              0,
              0,
              0,
              1,
              [
                {
                  offset: 0,
                  color: 'rgba(113, 248, 252, 0.24)'
                },
                {
                  offset: 1,
                  color: 'rgba(113, 248, 252, 0)'
                }
              ],
              false
            ),
            shadowColor: 'rgba(13, 248, 252, 0.24)', //阴影颜色
            shadowBlur: 20 //shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。
          }
        },
        lineStyle: {
          color: 'rgba(47, 213, 166, 1)',
          width: 2
        },
        data: y2,
        zlevel: 11
      }
    ]
  }