使用Echarts绘制柱状图

使用Echarts绘制柱状图

引用

CSDN

1.

https://blog.csdn.net/qq_52569656/article/details/137844107

基础柱状图绘制

在React18项目中使用Echarts5绘制柱状图，首先需要定义一个容器并设置其宽高。然后通过init方法创建一个Echarts实例，并调用实例对象上的setOption方法进行渲染。

添加常用配置

在基础图表上，可以添加一些常用配置，如图例（legend）和提示框（tooltip），使图表更加完整和易读。

同一图表展示两个柱状图

有时需要在一个图表中展示两种数据的对比，例如数量和百分比。这可以通过在series数组中新增一项柱状图配置来实现。

设置两条坐标轴

当图表中包含不同类型的数据时，可以设置两条坐标轴来区分。例如，一个表示数量，另一个表示百分比。

处理数据量过多的问题

当数据量特别大时，可以使用dataZoom组件来处理。通过设置start和end属性，可以控制图表的显示范围。

处理X轴文字过长问题

当X轴的文字过长时，可以通过设置axisLabel的rotate属性来旋转文字，或者通过formatter函数来换行显示。

完整代码

import './App.css';
import { useEffect, useState } from 'react';
import * as echarts from 'echarts'

let chartRef = null

function App() {
  const initChart = () => {
    chartRef = echarts.init(document.getElementById('chart'))
    const option = {
      title: {
        text: '北极星',
        textStyle: {
          color: '#345345'
        }
      },
      tooltip: {},
      legend: {
        data: [
          {
            name: '数量图',
            icon: 'circle'
          },
          {
            name: '占比图',
            icon: 'circle'
          }
        ],
        itemWidth: 25,
        itemHeight: 14,
      },
      xAxis: {
        type: 'category',
        data: ['大白', '小黑', '哈哈', '呵呵', '嘿嘿', '北极星超级超级超级超级', '超级', '小黑3', '你干嘛', '恶狠狠', '嘿嘿9'],
        axisPointer: {
          show: true,
          type: 'line',
        },
        axisLabel: {
          rotate: 23,
          fontSize: 11,
          formatter: (params) => {
            if (params.length > 6) {
              const pre = params.slice(0, 6)
              const end = params.slice(6) 
              return pre + '\n' + end
            }
            return params
          }
        }
      },
      yAxis: [
        {
          type: 'value',
          name: '单位：个',
          position: "left",
        },
        {
          type: 'value',
          name: '百分比：%',
          position: "right",
        }
      ],
      color: ['#73c0de', '#3ba272'],
      series: [
        {
          name: '数量图',
          type: 'bar',
          data: [ 1200, 200, 150, 800, 170, 110, 130, 150, 800, 170, 110],
          yAxisIndex: 0,
          barGap: '2%',
          label: {
            show: true,
            position: 'top',
            distance: 5
          }
        },
        {
          name: '占比图',
          type: 'bar',
          yAxisIndex: 1,
          data: [ 12, 20, 15, 8, 17, 11, 29, 15, 8, 17, 11],
          label: {
            show: true,
            position: 'top',
            distance: 5
          }
        },
      ],
      dataZoom: [
        {
          type: 'slider',
          height: 20,
          start: 2,
          end: 70
        }
      ]
    }
    chartRef.setOption(option)
  }
  useEffect(() => {
    initChart()
  }, [])

  return (
    <div className="App">
      <div className='box' id='chart'></div>
    </div>
  );
}

export default App;

/* App.css */
.App {
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: 50px;
}
.box {
  width: 700px;
  height: 500px;
  border: 1px solid #000;
}