Echarts在线免费图表

 
            const gdpUnit = '亿元'
const x = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]
let y1 = [10, 40, 50, 80, 90, 120, 130, 160, 170, 190, 220, 230]
let y2 = [20, 30, 60, 70, 100, 110, 140, 150, 180, 200, 210, 240]
option = {
   //  grid: {
   //    top: 50,
   //    left: 40,
   //    right: 10,
   //    bottom: 50
   //  },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow',
        shadowStyle: {
          color: 'rgba(216, 230, 255, .2)'
        },
        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} ${
              el.componentSubType === 'bar' ? gdpUnit || '' : '%'
            }</span></div>`
          }
        })
        str += '</div>'
        return str
      }
    },
    legend: {
      data: [2016, 2017],
      bottom: '0%',
      clickable: false,
      selectedMode: false,
      itemWidth: 12,
      itemHeight: 12,
      textStyle: {
        color: 'rgba(107, 107, 107, 1)',
        fontSize: 16
      }
    },
    xAxis: {
      data: x,
      axisLine: {
        show: false, // 隐藏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, 15, 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: 'bar',
        barWidth: 10,
        itemStyle: {
          color: {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              {
                offset: 0,
                color: 'rgba(37, 114, 254, 1)' // 0% 处的颜色
              },
              {
                offset: 1,
                color: 'rgba(110, 161, 255, 1)' // 100% 处的颜色
              }
            ],
            global: false // 缺省为 false
          }
        },
        data: y1,
        zlevel: 10
      },
      {
        name: '2017',
        type: 'bar',
        barWidth: 10,
        itemStyle: {
          color: {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              {
                offset: 0,
                color: 'rgba(159, 47, 213, 1)' // 0% 处的颜色
              },
              {
                offset: 1,
                color: 'rgba(206, 127, 255, 1)' // 100% 处的颜色
              }
            ],
            global: false // 缺省为 false
          }
        },
        data: y2,
        zlevel: 10
      },
      {
        name: 'maxdata',
        type: 'custom',
        itemStyle: {
          color: 'rgba(216, 230, 255, .2)'
        },
        renderItem: function (params, api) {
          //获取对应类目的axisTick中心点坐标
          var start = api.coord([api.value(0)])

          //通过坐标系的宽度和类目数，计算单个类目的背景
          var width = (params.coordSys.width / 7) * 0.4

          return {
            type: 'rect',
            shape: {
              // 相对左上角坐标
              x: start[0] - width / 2,
              y: params.coordSys.y,
              width: width,
              height: params.coordSys.height
            },
            style: api.style()
          }
        },
        data: x.map(() => 0)
      }
    ]
  }