React中使用Echarts实现数据可视化的小案例（基础文章）

最新推荐文章于 2025-07-03 16:25:47 发布

Always--Learning

最新推荐文章于 2025-07-03 16:25:47 发布

阅读量1.1k

点赞数

CC 4.0 BY-SA版权

分类专栏： Per Day 前端 React 文章标签： echarts react.js

本文链接：https://blog.csdn.net/sinat_41696687/article/details/119899189

本文详细介绍了在React应用中如何利用echarts-for-react插件进行数据可视化，包括安装插件、导入ReactEcharts库、设置数据源option以及如何将柱状图转换为折线图和调整柱状图颜色的方法。通过实例代码和官方文档，帮助开发者更好地理解和应用Echarts图表。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1. 安装echarts-for-react插件(两个都要装)

npm install echarts-for-react
npm install echarts

2. 导入ReactEcharts库

import ReactECharts from 'echarts-for-react';

3. 渲染ReactEcharts组件，并通过option导入数据

<ReactECharts option={
   
   this.getOption(sales,stores)} />

4. 设置数据源option

getOption = (sales,stores) => {
   
   
    return {
   
   
        title: {
   
   
            text: 'ECharts 入门示例'
        },
        tooltip: {
   
   },
        legend: {
   
   
            data: ['销量', '库存']
        },
        xAxis: {
   
   
            data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
        },
        yAxis: {
   
   },
        series: [{
   
   
            name: '销量',
            type: 'bar',
            data: [1,2,3,4],
        }, {