Echarts在线免费图表

 
            const dataArr = [
   {
      nf: 2016,
      jdz: 781,
      zs: 50
   },
   {
      nf: 2017,
      jdz: 921,
      zs: 1200
   },
   {
      nf: 2018,
      jdz: 1000,
      zs: 1000
   },
   {
      nf: 2019,
      jdz: 30,
      zs: 500
   },
   {
      nf: 2020,
      jdz: 123,
      zs: 9812
   }
]
const x = dataArr.map((item) => item.nf)
const y1 = dataArr.map((item) => item.jdz)
const y2 = dataArr.map((item) => item.zs)
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
         }
      },
   },
   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: true, // 隐藏X轴轴线
         lineStyle: {
            type: 'dashed',
            color: 'rgba(221, 221, 221, 1)',
            width: 1
         }
      },
      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, 20, 0, 0],
            fontSize: 12
         },
         splitLine: {
            show: true,
            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
         },
         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: 'line',
         barWidth: 12,
         smooth: false,
         itemStyle: {
            color: {
               type: 'linear',
               x: 0,
               y: 0,
               x2: 0,
               y2: 1,
               colorStops: [
                  {
                     offset: 0,
                     color: 'rgba(37, 114, 254, 1)'
                  },
                  {
                     offset: 1,
                     color: 'rgba(110, 161, 255, 1)'
                  }
               ],
               global: false
            }
         },
         emphasis: {
            itemStyle: {
               color: ''
            }
         },
         data: y1,
         zlevel: 10
      },
      // {
      //    name: 'maxdata',
      //    type: 'custom',
      //    itemStyle: {
      //       color: 'rgba(216, 230, 255, .2)'
      //    },
      //    renderItem: function (params, api) {
      //       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,
         symbol: 'circle',
         symbolSize: 2,
         smooth: false,
         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
      }
   ]
}