Echarts在线免费图表

 
            option = {
   backgroundColor: '#070e2e',
   color: ['#0C65F6', '#00FFA6', '#F4DF58'],
   grid: {
      left: '13%',
      right: '13%',
      bottom: '15%',
      top: '13%',
   },
   legend: {
      icon: 'rect',
      x: 'center',
      y: '23%',
      orient: 'horizontal',
      itemWidth: 12,
      itemHeight: 12,
      formatter: ['{a|{name}}'].join('\n'),
      textStyle: {
         color: '#fff',
         height: 8,
         rich: {
            a: {
               verticalAlign: 'bottom',
            },
         },
      },
      data: ['税收收入', '同比增长'],
   },
   tooltip: {
      confine: true,
      trigger: 'axis',
      axisPointer: {
         type: 'shadow',
      },
      textStyle: {
         color: '#fff',
         fontSize: 12,
         lineHeight: 24,
      },
      padding: [5, 10],
      backgroundColor: 'rgba(0, 0, 0, 0.50)',
      formatter(params) {	// 根据条件修改
         let unit = '个'
         let relVal = params[0].name
         for (let i = 0; i < params.length; i++) {
            if (i === 1) {
               unit = '%'
            }
            if (params[i].seriesName) {
               if (typeof (params[i].color) === 'string') {
                  relVal += `<div style="display:flex;align-items:center"><div style="width: 13px;height: 5px; margin-right: 5px; background: ${params[i].color}"></div><div style="padding-right: 20px">${params[i].seriesName}</div>${params[i].value} ${unit}</div>`
               } else {
                  relVal += `<div style="display:flex;align-items:center"><div style="width: 13px;height: 5px; margin-right: 5px; background: ${params[i].color.colorStops[0].color}"></div><div style="padding-right: 20px">${params[i].seriesName}</div>${params[i].value} ${unit}</div>`
               }
            }
         }
         return relVal
      },
   },
   xAxis: {
      type: 'category',
      data: ['2019年', '2020年', '2021年', '2022年', '2023年'],
      axisLine: {
         lineStyle: {
            color: 'rgba(255,255,255,0.45)',
         },
      },
      axisLabel: {
         color: '#fff',
      },
      axisTick: {
         show: false,
      },
   },
   yAxis: [{
      type: 'value',
      min: 0,
      minInterval: 1,
      splitArea: {
         show: false,
      },
      axisLine: {
         show: false,
      },
      axisTick: {
         show: false,
      },
      splitLine: {
         lineStyle: {
            color: 'rgba(255, 255, 255, 0.15)',
            // type: 'dashed', // dotted 虚线
         },
      },
      axisLabel: {
         color: '#fff',
      },
   }, {
      type: 'value',
      axisLine: {
         show: false,
      },
      axisTick: {
         show: false,
      },
      splitLine: {
         show: false,
      },
      axisLabel: {
         formatter: '{value}%', // 右侧Y轴文字显示
         color: '#fff',
      },
      splitArea: {
         show: false,
      },
   }],
   series: [
      {
         name: '',
         type: 'bar',
         z: 1,
         barGap: '-100%',
         barWidth: 16,
         itemStyle: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
               { offset: 0, color: 'rgba(0, 43, 215, 0)' },
               { offset: 1, color: 'rgba(37, 152, 255, 0.8)' },
            ]),
         },
         data: [1000, 1000, 1000, 1000, 1000],
      },
      { // 柱底圆片
         name: '',
         type: 'pictorialBar',
         symbolSize: [16.1, 9], // 调整截面形状
         z: 1,
         symbolOffset: [0, 3],
         itemStyle: {
            color: '#00ABFF',
         },
         data: [319, 998, 512, 198, 766],
      },
      {
         name: '税收收入',
         type: 'bar',
         z: 2,
         barWidth: 16,
         barMinHeight: 10,
         itemStyle: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
               { offset: 0, color: '#002BD7' },
               { offset: 1, color: '#2598FF' },
            ]),
         },
         data: [319, 998, 512, 198, 766],
      },
      { // 柱顶圆片
         name: '',
         type: 'pictorialBar',
         symbolSize: [16, 9], // 调整截面形状
         symbolOffset: [0, -4],
         z: 3,
         symbolPosition: 'end',
         itemStyle: {
            color: '#008FDF',
         },
         data: [319, 998, 512, 198, 766],
      },
      {
         name: '同比增长',
         type: 'line',
         yAxisIndex: 1, // 使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用QUANMEI
         z: 4,
         smooth: false, // 平滑曲线显示
         symbol: 'circle', // 标记的图形为实心圆
         symbolSize: 8, // 标记的大小
         data: [520, 512, 512, 540, 250],
         itemStyle: { color: '#FFCF5F' },
      },
   ],
};