你不知道的Echarts柱状图应用在React中

最新推荐文章于 2025-10-10 15:23:27 发布

原创最新推荐文章于 2025-10-10 15:23:27 发布 · 1k 阅读

0 ·

CC 4.0 BY-SA版权

React 同时被 2 个专栏收录

6 篇文章

订阅专栏

echarts

2 篇文章

订阅专栏

本文探讨了如何在React应用中创新使用Echarts柱状图，以Y轴为坐标，X轴为值，展示双正数轴的效果。通过引入相关文件，设置参数，以及在组件生命周期方法中进行配置，实现了这一特殊布局的柱状图。

echarts 柱状图在React里面的运用:

正常的echarts 都是竖直型的，或者一个里边包含多个的。这次做个不同的， y轴为坐标，x轴为值，左右都为正数展开。

（1）、引入相关的文件

import React, { Compoent } from 'react';
import { Spin } from 'antd';
import echarts from 'echarts';
import styles from './chart.less';

（2）、定义一些参数等

const y2 = ['测试一', '测试二', '测试三', '测试四', '测试五'];
const le2 = ['星期一', '星期二', '星期三'];
const xLeft1Value = [-90, -100, -95, -100, -60];
const xLeft2Value = [-80, -90, -75, -98, -55];
const xRightValue = [8, 8, 9, 9, 10];

（3）、在render里面定义

<div id="situationChart" className={styles.situationChartMain}></div>

（4）、componentDidMount里面

componentDidMount() {
    const myChart = echarts.init(document.getElementById('situationChart'));
    myChart.setOption({
      color: ['#ff0000', '#3398DB', '#00FFFF'],
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'shadow',
        },
      },
      legend: {
        data: le2,
      },
      grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true,
      },
      xAxis: [
        {
          type: 'value',
          axisLabel: {
            show: false,
            // formatter: value => {
            //   if (value < 0) return -value
            //   return value
            // },
          },
           // 控制网格线是否显示
          splitLine: {
            show: false,
          },
          axisTick: {
            show: false,
          },
          axisLine: {
            show: false,
          },
        },
      ],
      yAxis: [
        {
          type: 'category',
          axisTick: {
            show: false,
          },
          axisLine: {
            show: false,
          },
          data: y2,
        },
      ],
      series: [
        {
          name: '周一',
          type: 'bar',
          label: {
            show: true,
            formatter: '{c}',
            position: 'right',
          },
          itemStyle: {

          },
          data: xRightValue,
        },
        {
          name: '周二',
          type: 'bar',
          // barGap: '30%',
          label: {
            show: true,
            formatter: value =>
              // 值都是负数的 所以需要取反一下
              `${-value.data}`,
            position: 'left',
          },
          itemStyle: {

          },
          data: xLeft1Value,
        },
        {
          name: '周三',
          type: 'bar',
          label: {
            show: true,
            formatter: value =>
              `${-value.data}`,
            position: 'left',
          },
          itemStyle: {

          },
          data: xLeft2Value,
        },
      ],
    });
    myChart.resize();
  }

柱状图样子: