使用Echarts绘制柱状图

写在前面

• 本文基于React18+Echarts5来实现柱状图表，文末有完整代码例子；
• 版本号： React18.2.0 Echarts5.5 Node18.20.2；
• 项目的话就是基于reacte-react-app搭建的一个简易项目。

1.渲染一个基础的柱状图表

• 定义一个容器给上指定宽高
• 通过init方法创建一个echarts实例，再调用实例对象上的setOption方法进行渲染
• 代码以及浏览器预览效果如下图
  
  

2.增加常用的一些配置

• 上面已经渲染了基础的图表，接着再添加一些配置，如图例，提示框等组件
• 往option对象里边添加配置，tooltop,legend
  
  

3.每一项都展示两个柱状图型

• 有些时候，我们希望在一个图表中比对两种数据，例如一个图表中展示两个柱形
• 实现方式：只需要在series数组中新增一项柱状图配置即可
  
  

4.设置两条坐标轴

• 在上边例子中，两种柱状图一个是数量，另一个是百分比，如果只使用一条坐标轴的话，无法表示两个图表的数量关系；
• 因为一个是纯数量，一个是百分比数据；百分比显然要比数量小太多，而默认的话左侧的坐标轴刻度使用的是数量的，那么百分比的柱状图就会很低甚至忽略不计；
• 就像下面这样：可以看到占比的柱形图已经很低了，要是数量再大的话，占比图的图形甚至会忽略不计
  
• 接下来我们需要调整yAxis和series的配置；
• 其中yAxis需要将对象改为数组形式，并且添加position属性，通过left,right标识该坐标轴用于左侧还是右侧；
• series数组中需要将每个对象设置yAxisIndex属性，这里0标识刻度使用左侧y轴，1则是右侧y轴；
• 代码以及效果如下图：
  
  

5.处理图表数量过多的问题，配置dataZoom

• 当咱们数据量特别大的时候，可能一个图表就放不下了，增加4项展示如下：
• 可以看到，图表自适应之后图与图之间变得更加紧密，图形宽度也变小了，要是再多一些…
  
• 要解决上面的问题，可以自定义图表宽度，间隔又或是其他的，但这里使用dataZoom来处理
• 通过type指定缩放组件为滑块，通过start和end设置窗口范围的起始百分比，还可以设置摆放位置，高度等等
  

6.处理X轴文字过长问题

• 上面可以看到x轴文字都是水平摆放，并且文字还是比较简短的，但是当文字过长的时候；
• 如下图可以看到，不仅展示不了，还会影响其他文字的正常展示；
• 
• 处理方式就是可以设置文字大小，文字旋转角度，超出换行等；
• 在xAxis中新增配置以及效果如下图，能够看到文字正常展示了；
  
  

7.完整代码

import './App.css';
import { useEffect, useState } from 'react';
import * as echarts from 'echarts'
let chartRef = null
function App() {
  // const [chartRef, setChartRef] = useState(null)

  const initChart = () => {
    chartRef = echarts.init(document.getElementById('chart'))
    const option = {
      title: {
        text: '北极星',
        // 自定义文本样式
        textStyle: {
          color: '#345345'
        }
      },
      tooltip: {
        // TODO 可以自定义返回值
        // format: function(params) {
        //   return params.value
        // }
      },
      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, //左侧y轴
          barGap: '2%',//不同柱形图的间距，2%标识柱子宽度的百分2
          label: {
            show: true,
            position: 'top',
            distance: 5
          }
        },
        {
          name: '占比图',
          type: 'bar',
          yAxisIndex: 1, //右侧y轴
          data: [ 12, 20, 15, 8, 17, 11, 29, 15, 8, 17, 11],
          label: {
            show: true,
            position: 'top',
            distance: 5
          }
        },
      ],
      dataZoom: [
        {
          type: 'slider',
          height: 20,
          // 数据窗口范围的起始百分比。范围是：0 ~ 100。表示 0% ~ 100%
          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;
  /* background-color: aquamarine; */
}

写在最后

• 以上就是所有内容啦，主要就是记录了一些常见的问题处理方式，希望对你有所帮助吧；
• 感谢你这么优秀还能看我的文章~