Echarts在线免费图表

 
            const data = [
   {
      nf: 2016,
      jdz: 76,
      zs: 10
   },
   {
      nf: 2017,
      jdz: 76,
      zs: 20
   },
   {
      nf: 2018,
      jdz: 76,
      zs: 36
   },
   {
      nf: 2019,
      jdz: 76,
      zs: 46
   }
]

const x = data.map((item) => item.nf)
const y1 = data.map((item) => item.jdz)
const y2 = data.map((item) => item.zs)
const gdpUnit = '亿元'
option = {
   //  grid: {
   //    top: 50,
   //    left: 42,
   //    right: 30,
   //    bottom: 60
   //  },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'none',
        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[0].name}<br/>`
        params.forEach((el) => {
          if (el.seriesName !== 'maxdata') {
            str += `<div><span class="name large">${el.seriesName}：</span><span class="value">${
              el.value
            } ${el.componentSubType === 'bar' ? gdpUnit || '' : '%'}</span></div>`
          }
        })
        str += '</div>'
        return str
      }
    },
    legend: {
      data: ['绝对值', '增速'],
      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, 20, 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
          }
        }
      },
      {
        type: 'value',
        name: '单位：%',
        nameTextStyle: {
          color: 'rgba(107, 107, 107, 1)',
          padding: [0, 0, 0, 10],
          fontSize: 12
        },
        max: 100,
        position: 'right',
        splitLine: {
          show: false
        },
        axisTick: {
          show: false
        },
        axisLine: {
          show: false
        },
        axisLabel: {
          show: true,
          textStyle: {
            color: 'rgba(107, 107, 107, 1)',
            fontSize: 12
          }
        }
      }
    ],
    series: [
      {
        name: '绝对值',
        type: 'bar',
        barWidth: 12,
        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
          }
        },
        emphasis: {
          itemStyle: {
            color: ''
          }
        },
        data: y1,
        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.7

          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)
      },
      {
        name: '增速',
        type: 'line',
        yAxisIndex: 1, // 使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用
        symbol: 'circle', // 标记的图形为实心圆
        symbolSize: 2, // 标记的大小
        smooth: true,
        itemStyle: {
          // 折线拐点标志的样式
          color: 'rgba(252, 212, 121, 1)',
          borderColor: 'rgba(252, 212, 121, 1)',
          width: 2
        },
        emphasis: {
          itemStyle: {
            color: ''
          }
        },
        lineStyle: {
          color: 'rgba(252, 212, 121, 1)',
          width: 2
        },
        data: y2,
        zlevel: 11
      }
    ]
  }