echarts基础用法记录--react

最新推荐文章于 2025-02-14 15:10:33 发布

zxy_wtnl

最新推荐文章于 2025-02-14 15:10:33 发布

阅读量174

点赞数

文章标签： echarts

本文链接：https://blog.youkuaiyun.com/zxy_wtnl/article/details/119738698

版权

本文介绍了如何在React项目中使用ECharts库创建折线图和饼图。通过`npm install`安装依赖，然后引用`echarts-for-react`和`echarts`，在组件中插入`<ReactEcharts>`并设置图表配置项。示例展示了包含标题、图例、网格和数据的折线图，以及环形图的饼图，详细展示了每个系列的数据和样式设置。

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

准备工作

下载：
npm install --save echarts-for-react
npm install --save echarts
引用：
import ReactEcharts from "echarts-for-react";
import * as echarts from 'echarts'

 在需要使用的地方插入   
<ReactEcharts option={this.getOptionLine()} />

折线图：

//折线图
    getOptionLine = () => {
      return {
        title: {  //标题
             text: 'XX统计',
             // subtext:'',
             x: 'center',
             y: '7px',
             textStyle: {
                  color: '#3A7BD5',
                  fontSize: 16
             },
             textAlign: 'left'
        },
        tooltip: {    //提示框  可自定义
            trigger: 'axis'
        },
        legend: {  // 图例
            data: ['搜索引擎', '外部链接', '直接访问'],
            x:'left',  // x、y设置位置  
            y:'bottom',
            padding:[0,0,20,0]    
        },
        grid: {    //图表在div框中的位置
            top:'4%',
            left: '3%',
            right: '4%',
            containLabel: true
        },
        xAxis: {    
            type: 'category',
            boundaryGap: false,    //折线从横坐标0点开始
            data: ['1', '2', '3', '4', '5', '6', '7'],
            axisLabel: {
                interval:5,  //x轴数据每隔多少个显示一个
                //rotate:45, //代表逆时针旋转45度 文本过长时使用
            }
        },
        yAxis: {
            type: 'value',
            axisLabel:{
                 formatter:'{value}%' //formatter 设置文本内容
            }  
        },
        series: [
            {
                name: '搜索引擎',
                type: 'line',
                stack: 'searchEngine',  //累加的stack设置一样的内容
                data: [120, 132, 101, 134, 90, 230, 210]
            },
            {
                name: '外部链接',
                type: 'line',
                stack: 'inboundLinks',
                data: [220, 182, 191, 234, 290, 330, 310]
            },
            {
                name: '直接访问',
                type: 'line',
                stack: 'directAccess',
                data: [150, 232, 201, 154, 190, 330, 410]
            },
        ]
      }
    }

饼图：

series: [
            {
                name: '访问来源',
                type: 'pie', 
                radius: ['50%','65%'],  //一个为饼图，两个为环形图 第一个为内圆半径
                center:['50%','35%'], //饼图位置设置， 第一个为左右 第二个为上下
                data: [
                    {value: 119218, name: '搜索引擎'},
                    {value: 25299, name: '外部链接'},
                    {value: 127058, name: '直接访问'},
                ],
                labelLine:{   //图例折线样式
                  length: 5, //第一段线的长度
                  length2: 5, //第二段线的长度
                },
                label: {    //图例文本
                  formatter: '{b|{b}}', 
                  rich: {  //富文本
                      b: { 
                          fontSize: 12,
                          lineHeight: 12
                      },
                  }
              },
            }
        ]

将组件插入到使用的地方

<ReactEcharts option={this.getOptionPvUv()} notMerge={true}/> //notMerge 是否合并，true不合并，重新渲染