React简单封装ECharts饼图

ztyzz 发布于2019-08-01 17:13 / 3028人阅读

摘要：默认使用得到的是已经加载了所有图表和组件的包，因此体积会比较大，如果在项目中对体积要求比较苛刻，也可以只按需引入需要的模块。官方式这么说的，所以我们要到去查看可以引入的模块列表，并按需引入。

使用ECharts 获取ECharts

Echarts官网教程中就有告诉通过各种方式获取Echarts：http://echarts.baidu.com/tutorial.html

最简单的方式就是直接引用js文件就o了~

当然，这次要用的是webpack来进行包管理，所以就要通过webpack来获取Echarts：

</>复制代码 
npm install echarts --save

引入ECharts

通过webpack获取的ECharts会放在项目的node_modules目录下，可以直接通过require("echarts")得到。

</>复制代码 
默认使用 require("echarts") 得到的是已经加载了所有图表和组件的 ECharts 包，因此体积会比较大，如果在项目中对体积要求比较苛刻，也可以只按需引入需要的模块。

官方式这么说的，所以我们要到https://github.com/ecomfe/echarts/blob/master/index.js去查看可以引入的模块列表，并按需引入。

比如这次我需要画一个饼图，我就需要引入：

</>复制代码 
var echarts = require("echarts/lib/echarts")
require("echarts/lib/chart/pie")
require("echarts/lib/component/title")

gogogo 定义组件

我们先定义一个Component,ECharts的渲染是需要在这个div有宽高的前提下，所以在这个组件的render()方法中要有一个div容器来展示ECharts,并且这个div要设置宽高。

</>复制代码 
render() {
    return (
    
      
      
    
  )
}

initPieChart()

就像平时使用ECharts一样，我们先是获取数据，然后initECharts，然后setOption，就搞定了~

</>复制代码 
initPieChart() {
  const { data } = this.props
  let myChart = echarts.init(this.refs.pieChart)
  let options = this.setOption(data)
  myChart.setOption(options)
}
//这是一个最简单的饼图~
setOption(data) {
  return {
    title:{
      text:"编程语言",
      left:"center"
    },
    series : [
      {
        name: "比例",
        type: "pie",
        data: data,
        label: {
          normal: {
            formatter: "{d}% 
{b}",
          }
        }
      }
    ]
  }
}

绑定方法

</>复制代码 
constructor(props) {
  super(props)
  this.setOption = this.setOption.bind(this)
  this.initChart = this.initChart.bind(this)
}

初始化ECarts

上面已经定义了initPieChart方法，我们该在什么时候用这个方法呢？

当然是要在DOM渲染完成了之后啊，然后通过refs去获取这个DOM节点~

也就是componentDidMount的时候：

</>复制代码 
componentDidMount() {
  this.iniChart();
}

更新

</>复制代码 
componentDidUpdate() {
  this.iniChart();
}

传数据

</>复制代码 
import Pie from "./pie";
const data = [
  {value: 2, name: "JavaScript"},
  {value: 1, name: "Java"},
  {value: 1, name: "HTML/CSS"}
]
export default class ComponentBody extends React.Component{
  render(){
    return(
      
        
      
    )
  }
}

结果

完整代码见https://github.com/axuebin/react-echarts-demo/blob/master/src/pie.js

原文地址~

GPU云服务器云服务器三维饼图数据饼图 python 饼图 HighCharts?饼图

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/51024.html

React简单封装ECharts饼图

摘要：默认使用得到的是已经加载了所有图表和组件的包，因此体积会比较大，如果在项目中对体积要求比较苛刻，也可以只按需引入需要的模块。官方式这么说的，所以我们要到去查看可以引入的模块列表，并按需引入。使用ECharts 获取ECharts Echarts官网教程中就有告诉通过各种方式获取Echarts：http://echarts.baidu.com/tutorial.html 最简单的方式就...

lingdududu 2019-08-20 18:09 评论0 收藏0
三大图表库：ECharts 、 BizCharts 和 G2，该如何选择？

摘要：最近阿里正式开源的图表库基于技术栈，各个图表项皆采用了组件的形式，贴近的使用特点。相关文档组件化阿里的图表组件手拉手，用开发动态刷新组件文档地址一安装通过引入二引用成功安装完成之后，即可使用或进行引用。最近阿里正式开源的BizCharts图表库基于React技术栈，各个图表项皆采用了组件的形式，贴近React的使用特点。同时BizCharts基于G2进行封装，Bizcharts也继承了G2相...

draveness 2019-04-23 13:19 评论0 收藏0
ECharts 学习笔记02, 饼图与南丁格尔图

摘要：目标使用绘制饼状图并在此基础上绘制南丁格尔饼图示例如下搭建环境新建文件夹目录结构如下编写我们在中放入和分别用于显示饼状图和南丁格尔图编写文件为了使和并列我们需要加上样式编写文件饼状图需要设置。目标使用 echarts 绘制饼状图, 并在此基础上绘制南丁格尔饼图, 示例如下 showImg(https://segmentfault.com/img/bVbqkV8?w=400&h=4...

张迁 2019-08-23 16:18 评论0 收藏0
echarts.js 画报表、数据可视化(第一部分)

摘要：画报表数据可视化第一部分目标本次目标主要可以通过这个框架画出各种图标，例如矩形图饼图折线图等等。可以这样设置这样设置，是可是数据中每个的的，只要设置了即可，其他参数可以附带。画一个饼图看效果演示饼图销售额销售额万元京东淘宝天猫一号店未完待续 echarts.js 画报表、数据可视化(第一部分) 目标: 本次目标主要可以通过这个框架画出各种图标，例如：矩形图、饼图、折线图等等。搭...

Rainie 2019-08-20 18:22 评论0 收藏0