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: ['绝对值', '增速'],
      top: '0%',
      clickable: false,
      selectedMode: false,
      itemWidth: 18,
      itemHeight: 12,
      textStyle: {
         color: 'rgba(138, 138, 138, 1)',
         fontSize: 14
      }
   },
   xAxis: {
      data: x,
      axisLine: {
         show: true, // 隐藏X轴轴线
         lineStyle: {
            type: 'dashed',
            color: 'rgba(237, 237, 237, 1)',
            width: 1
         }
      },
      axisTick: {
         show: false // 隐藏X轴刻度
      },
      axisLabel: {
         show: true,
         textStyle: {
            color: 'rgba(138, 138, 138, 1)', // X轴文字颜色
            fontSize: 14
         }
      }
   },
   yAxis: [
      {
         type: 'value',
         name: '总量',
         nameTextStyle: {
            color: 'rgba(138, 138, 138, 1)',
            padding: [0, 20, 0, 0],
            fontSize: 14
         },
         splitLine: {
            show: true,
            lineStyle: {
               type: 'dashed'
            }
         },
         axisTick: {
            show: false
         },
         axisLine: {
            show: false
         },
         axisLabel: {
            show: true,
            textStyle: {
               color: 'rgba(138, 138, 138, 1)',
               fontSize: 14
            }
         }
      },
      {
         type: 'value',
         name: '增量',
         nameTextStyle: {
            color: 'rgba(138, 138, 138, 1)',
            padding: [0, 0, 0, 10],
            fontSize: 14
         },
         position: 'right',
         splitLine: {
            show: false
         },
         axisTick: {
            show: false
         },
         axisLine: {
            show: false
         },
         axisLabel: {
            show: true,
            textStyle: {
               color: 'rgba(138, 138, 138, 1)',
               fontSize: 14
            }
         }
      }
   ],
   series: [
      {
         name: '绝对值',
         type: 'line',
         symbolSize: 2,
         smooth: false,
         itemStyle: {
            color: 'rgba(250, 139, 22, 1)'
         },
         emphasis: {
            itemStyle: {
               color: ''
            }
         },
         data: y1,
         zlevel: 10
      },
      {
         name: '增速',
         type: 'line',
         yAxisIndex: 1,
         symbolSize: 2,
         smooth: false,
         itemStyle: {
            color: 'rgba(54, 164, 255, 1)',
         },
         emphasis: {
            itemStyle: {
               color: ''
            }
         },
         data: y2,
         zlevel: 11
      }
   ]
}