Echarts在线免费图表

 
            option = {
   backgroundColor: '#070e2e',
   color: ['#0C65F6', '#00FFA6', '#F4DF58'],
   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 (typeof (params[i].color) === 'string') {
               relVal += `<div class="g-flex"><div style="width: 13px;height: 5px; margin-right: 5px; background: ${params[i].color}"></div><div class="g-p-r-20">${params[i].seriesName}</div>${params[i].value} ${unit}</div>`
            } else {
               relVal += `<div class="g-flex"><div style="width: 13px;height: 5px; margin-right: 5px; background: ${params[i].color.colorStops[0].color}"></div><div class="g-p-r-20">${params[i].seriesName}</div>${params[i].value} ${unit}</div>`
            }
         }
         return relVal
      },
   },
   grid: {
      left: '12%',
      right: '14%',
      bottom: '10%',
      top: '3%',
   },
   legend: {
      icon: 'rect',
      orient: 'horizontal',
       x: 'center',
      y: '23%',
      itemWidth: 12,
      itemHeight: 12,
      formatter: ['{a|{name}}'].join('\n'),
      textStyle: {
         color: '#fff',
         height: 8,
         rich: {
            a: {
               verticalAlign: 'bottom',
            },
         },
      },
      data: ['蔬菜产值', '同比增长'],
   },
   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',
      name: '(亿元)',
      nameTextStyle: {
         color: '#fff',
         padding: [0, 0, 0, 30],
      },
      min: 0,
      minInterval: 1,
      splitArea: {
         show: false,
      },
      axisLine: {
         show: false,
      },
      axisTick: {
         show: false,
      },
      splitLine: {
         lineStyle: {
            color: 'rgba(255, 255, 255, 0.15)',
         },
      },
      axisLabel: {
         color: '#FFF',
         formatter: (params) => (params === 1 ? 0 : params),
      },
   }, {
      type: 'value',
      name: '(%)',
      nameTextStyle: {
         color: '#fff',
         padding: [0, 0, 0, 15],
      },
      axisLine: {
         show: false,
      },
      axisTick: {
         show: false,
      },
      splitLine: {
         show: false,
      },
      axisLabel: {
         formatter: '{value}%', // 右侧Y轴文字显示
         color: '#FFF',
      },
      splitArea: {
         show: false,
      },
      min: 0,
      max: 100,
   }],
   series: [
      {
         name: '蔬菜产值',
         type: 'bar',
         barWidth: 16,
         barMinHeight: 10,
         itemStyle: {
            shadowColor: '#ffffff33',
            shadowBlur: 1,
            shadowOffsetX: 4,
            shadowOffsetY: -3,
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
               { offset: 0, color: '#5FD5EC' },
               { offset: 1, color: 'rgba(95, 213, 236, 0)' },
            ]),
         },
         data: [319, 998, 512, 198, 766],
      },
      {
         name: '同比增长',
         type: 'line',
         yAxisIndex: 1, // 使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用QUANMEI
         smooth: false, // 平滑曲线显示
         symbol: 'circle', // 标记的图形为实心圆
         symbolSize: 8, // 标记的大小
         data: [52, 42, 12, 40, 25],
         itemStyle: { color: '#FFCF5F' },
      },
   ],
};