Echarts在线免费图表

 
            const lineData = [
   {
      name: '2020-04',
      value1: 122.8,
      value2: 1769
   },
   {
      name: '2020-05',
      value1: -12.89,
      value2: 1541
   },
   {
      name: '2020-06',
      value1: 20,
      value2: 1949
   },
   {
      name: '2020-07',
      value1: 10,
      value2: 1800
   },
   {
      name: '2020-08',
      value1: -11.37,
      value2: 1653
   },
   {
      name: '2020-09',
      value1: 21.48,
      value2: 2008
   },
   {
      name: '2020-10',
      value1: -30,
      value2: 1723
   },
   {
      name: '2020-11',
      value1: 3.31,
      value2: 1800
   },
   {
      name: '2020-12',
      value1: 51.85,
      value2: 2703
   },
   {
      name: '2021-01',
      value1: -65.33,
      value2: 937
   },
   {
      name: '2021-02',
      value1: -9.93,
      value2: 844
   },
   {
      name: '2021-06',
      value1: 80.2,
      value2: 1793
   },
   {
      name: '2021-07',
      value1: -0.84,
      value2: 1600
   },
   {
      name: '2021-08',
      value1: -15.02,
      value2: 1511
   },
   {
      name: '2021-09',
      value1: -60,
      value2: 663
   },
   {
      name: '2021-10',
      value1: -50,
      value2: 410
   },
   {
      name: '2021-11',
      value1: -12.68,
      value2: 358
   },
   {
      name: '2021-12',
      value1: -10,
      value2: 346
   },
   {
      name: '2022-01',
      value1: -1,
      value2: 280
   },
   {
      name: '2022-02',
      value1: -16.79,
      value2: 233
   },
   {
      name: '2022-03',
      value1: 130.04,
      value2: 536
   },
   {
      name: '2022-04',
      value1: -35.26,
      value2: 347
   },
   {
      name: '2022-05',
      value1: -57.93,
      value2: 146
   },
   {
      name: '2022-06',
      value1: 4.11,
      value2: 152
   }
];
const title = [
   {
      name: '新增参保企业'
   },
   {
      name: '环比'
   }
];

const option = {
   backgroundColor: '#001552',
   tooltip: {
      trigger: 'axis'
   },
   legend: {
      align: 'left',
      left: '5%',
      top: '20%',
      textStyle: {
         color: '#ffffff',
         fontSize: 14
      },
      icon: 'rect',
      itemGap: 25,
      itemWidth: 16,
      data: title
   },
   grid: {
      top: '25%',
      bottom: '25%'
   },
   xAxis: [
      {
         type: 'category',
         boundaryGap: true,
         axisLine: {
            show: true
         },
         axisLabel: {
            rotate: 50,
            textStyle: {
               color: '#cacfe4',
               fontSize: 12
            }
         },
         splitLine: {
            show: false,
            lineStyle: {
               color: '#fff'
            }
         },
         axisTick: {
            show: false
         },
         data: lineData.map(item => item.name)
      }
   ],
   yAxis: [
      {
         max: 3000,
         min: 0,
         position: 'left',
         splitLine: {
            show: false,
            lineStyle: {
               color: '#fff'
            }
         },
         axisLine: {
            show: true
         },
         axisLabel: {
            show: true,
            textStyle: {
               color: '#cacfe4'
            }
         },
         axisTick: {
            show: false
         }
      },
      {
         max: 150,
         min: -100,
         position: 'right',
         splitLine: {
            show: false,
            lineStyle: {
               color: '#fff'
            }
         },
         axisLine: {
            show: true
         },
         axisLabel: {
            show: true,
            formatter: '{value}%',
            textStyle: {
               color: '#cacfe4'
            }
         },
         axisTick: {
            show: false
         }
      }
   ],
   series: [
      {
         name: title[0].name,
         type: 'line',
         symbol: 'circle', // 默认是空心圆（中间是白色的），改成实心圆
         showAllSymbol: true,
         showSymbol: true,
         smooth: true, // 平滑
         symbolSize: 10,
         yAxisIndex: 1, // 关联到左侧 Y 轴
         label: {
            show: true,
            position: 'top',
            color: '#ffa242'
         },
         lineStyle: {
            normal: {
               width: 1,
               color: '#ffa242' // 线条颜色
            }
         },
         itemStyle: {
            color: '#ffa242'
         },
         tooltip: {
            show: true
         },

         data: lineData.map(item => item.value1)
      },
      {
         name: title[1].name,
         type: 'line',
         symbol: 'circle', // 默认是空心圆（中间是白色的），改成实心圆
         showAllSymbol: true,
         showSymbol: true,
         smooth: true, // 平滑
         symbolSize: 10,
         position: 'right',
         yAxisIndex: 0, // 关联到右侧 Y 轴
         label: {
            show: true,
            position: 'bottom',
            color: '#42a2f7'
         },
         lineStyle: {
            normal: {
               width: 1,
               color: '#42a2f7' // 线条颜色
            },
            type: 'solid'
         },
         itemStyle: {
            color: '#42a2f7'
         },
         tooltip: {
            show: true
         },
         data: lineData.map(item => item.value2)
      }
   ]
};