Echarts在线免费图表

 
            const echartsDataYear = [2016, 2017, 2018, 2019, 2020]
const echartsData = [
   [10, 20, 30, 40, 50],
   [50, 40, 30, 20, 10]
]
option = {
   //  grid: {
   //    left: 30,
   //    right: 0,
   //    top: 40,
   //    bottom: 20
   //  },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'none'
      },
      className: 'my-tooltip-box',
      formatter: function (params) {
        var str = `<div class="my-tooltip">${params[0].name}`
        params.forEach((el) => {
          str += `<div><span class="name large">${el.seriesName}：</span><span class="value">${el.value}</span></div>`
        })
        str += '</div>'
        return str
      }
    },
    xAxis: {
      data: echartsDataYear,
      axisLine: {
        show: true, // 隐藏X轴轴线
        lineStyle: {
          color: '#EEEEEE',
          width: 2
        }
      },
      axisTick: {
        show: false // 隐藏X轴刻度
      },
      axisLabel: {
        show: true,
        textStyle: {
          color: '#9B9B9B', // X轴文字颜色
          fontSize: 14
        }
      }
    },
    yAxis: [
      {
        type: 'value',
        name: '单位：万人',
        nameTextStyle: {
          color: '#9B9B9B',
          padding: [0, 0, 0, 10],
          fontSize: 14
        },
        splitLine: {
          show: true,
          lineStyle: {
            type: 'dashed'
          }
        },
        axisTick: {
          show: false
        },
        axisLine: {
          show: false
        },
        axisLabel: {
          show: true,
          textStyle: {
            color: '#9B9B9B',
            fontSize: 14
          }
        }
      }
    ],
    series: [
      {
        name: '养老保险',
        type: 'bar',
        barWidth: 14,
        itemStyle: {
          normal: {
            color: 'rgba(47,84,237,0.35)',
            borderColor: '#2F54ED',
            borderWidth: 2
          }
        },
        data: echartsData[0]
      },
      {
        name: '医疗保险',
        type: 'bar',
        barWidth: 14,
        itemStyle: {
          normal: {
            color: 'rgba(54,164,255,0.35)',
            borderColor: '#36A4FF',
            borderWidth: 2
          }
        },
        data: echartsData[1]
      }
    ]
  }