使用Echarts绘制柱状图

大家好，欢迎来到IT知识分享网。

写在前面

• 本文基于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: '#' } }, 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; */ } 

写在最后

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