Echarts在线免费图表

 
            const x = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]
const y1 = [100, 100, 100, 200, 300, 400, 290, 380, 800, 100, 20, 30]
const y2 = [10, 50, 100, 20, 800, 40, 290, 190, 80, 0, 200, 730]
const gdpUnit = '亿元'
option = {
   toolbox: {
    feature: {
      saveAsImage: {},
      restore: {},
      dataView: {},
      dataZoom: {},
      magicType: {
        type: ['line', 'bar', 'stack']
      },
      brush: {
        type:['rect','polygon','lineX','keep','clear']
      }
    }
  },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow',
        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.seriesName}年${el.axisValue}月：</span><span class="value">${el.value} 亿元</span></div>`
          }
        })
        str += '</div>'
        return str
      }
    },
    legend: {
      data: ['2016', '2017'],
      bottom: '0%',
      clickable: false,
      selectedMode: false,
      itemWidth: 15,
      itemHeight: 10,
      textStyle: {
        color: 'rgba(107, 107, 107, 1)',
        fontSize: 16
      }
    },
    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: '单位：' + gdpUnit,
        nameTextStyle: {
          color: 'rgba(107, 107, 107, 1)',
          padding: [0, 0, 0, 0],
          fontSize: 12
        },
        splitLine: {
          show: false,
          lineStyle: {
            type: 'dashed'
          }
        },
        axisTick: {
          show: false
        },
        axisLine: {
          show: false
        },
        axisLabel: {
          show: true,
          textStyle: {
            color: 'rgba(107, 107, 107, 1)',
            fontSize: 12
          }
        }
      }
    ],
    series: [
      {
        name:'2016',
        type: 'line',
        symbolSize: 6,
        smooth: true,
        itemStyle: {
          normal: {
            color: 'rgba(160, 79, 226, 1)',
            lineStyle: {
              color: 'rgba(160, 79, 226, 1)',
              width: 2
            },
            areaStyle: {
              color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                {
                  offset: 0,
                  color: 'rgba(206, 127, 255, 0)'
                },
                {
                  offset: 1,
                  color: 'rgba(206, 127, 255, 0.5)'
                }
              ])
            }
          }
        },
        data: y1
      },
      {
        name: '2017',
        type: 'line',
        symbolSize: 6,
        smooth: true,
        itemStyle: {
          normal: {
            color: 'rgba(60, 129, 255, 1)',
            lineStyle: {
              color: 'rgba(60, 129, 255, 1)',
              width: 2
            },
            areaStyle: {
              color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                {
                  offset: 0,
                  color: 'rgba(113, 168, 252, 0)'
                },
                {
                  offset: 1,
                  color: 'rgba(113, 157, 252, 0.5)'
                }
              ])
            }
          }
        },
        data: y2
      }
    ]
  }