Echarts是百度出的一个关于图表的库，在比较了很多图表库后来决定了要用Echarts，一方面文档比较全，另外一方面我觉得和react的思想也比较接近，这篇文章可以基于上一篇关于webpack2 + react 的文章上继续尝试。
这里是初步的尝试，我会定期继续更新自己的简书
想到要在react中使用Echarts，相信很多人会和我一样，去github上搜索关键字react echarts ,找一找star数比较多的，去尝试一下，我本来也是想通过这种方式，后来发现自己完全可以不借助第三方的包来实现，首先可以去官网，针对webpack，百度给出了自己的文档,这里面有官方说明
http://echarts.baidu.com/tutorial.html
首先通过npm安装Echarts
npm install echarts --save-dev
新建一个chart.jsx文件
下面写我们的这个图表类，具体说明我会尽量在注释里面写清楚，第一步引入我们需要引入的内容
import React, { Component } from 'react'
/**
* 说明：第一个import echarts是必须的
* 第二个是引入的具体的一个图表类型 （可选）
* 第三个是表的title(可选)
*/
import echarts from 'echarts/lib/echarts'
import 'echarts/lib/chart/pie'
import 'echarts/lib/component/title'
新建一个config.js放这个图表的配置
因为不希望自己的组件的jsx文件太过冗长，遵循CommonJS规范，单独建立config存放自己的配置文件，所以你的配置文件可能看起来是这个样子,这个配置项完全参照百度给的Demo，别忘了在你的文件头部加载进去
module.exports = {
backgroundColor: '#2c343c',
title: {
text: 'Customized Pie',
left: 'center',
top: 20,
textStyle: {
color: '#ccc'
}
},
tooltip : {
trigger: 'item',
formatter: "{a} <br/>{b} : {c} ({d}%)"
},
visualMap: {
show: false,
min: 80,
max: 600,
inRange: {
colorLightness: [0, 1]
}
},
series : [
{
name:'访问来源',
type:'pie',
radius : '55%',
center: ['50%', '50%'],
data:[
{value:335, name:'直接访问'},
{value:310, name:'邮件营销'},
{value:274, name:'联盟广告'},
{value:235, name:'视频广告'},
{value:400, name:'搜索引擎'}
].sort(function (a, b) { return a.value - b.value; }),
roseType: 'radius',
label: {
normal: {
textStyle: {
color: 'rgba(255, 255, 255, 0.3)'
}
}
},
labelLine: {
normal: {
lineStyle: {
color: 'rgba(255, 255, 255, 0.3)'
},
smooth: 0.2,
length: 10,
length2: 20
}
},
itemStyle: {
normal: {
color: '#c23531',
shadowBlur: 200,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
},
animationType: 'scale',
animationEasing: 'elasticOut',
animationDelay: function (idx) {
return Math.random() * 200;
}
}
]
};
下面开始写component
这里我把完成的代码贴出来啦，写了注释，这是我的第一次尝试，图表绘制出来了并且刷新数据也是正常的
import React, { Component } from 'react'
import config from './chart.config.js'
/**
* 说明：第一个import echarts是必须的
* 第二个是引入的具体的一个图表类型 （可选）
* 第三个是表的title(可选)
*/
import echarts from 'echarts/lib/echarts'
import 'echarts/lib/chart/pie'
import 'echarts/lib/component/title'
export class PieReact extends React.Component {
/**
* 初始化id id是随机生成的一串唯一的字符串
*/
constructor(props) {
super(props)
let id = ( '_' + Math.random()).replace('.','_');
this.state = {
pieId : 'pie' + id
}
}
/**
* 生成图表，主要做了一个判断，因为如果不去判断dom有没有生成，
* 在后面如果定期去更新图表，每次生成一个dom节点会导致浏览器
* 占用的cpu和内存非常高，踩过坑。
* 这里的config就是引入的配置文件中的config,文件头部会有说明
*/
initPie(id) {
let myChart = echarts.getInstanceByDom(document.getElementById(id));
if( myChart === undefined){
myChart = echarts.init(document.getElementById(id));
}
myChart.setOption(config)
}
componentDidMount() {
/**
* 在这里去调用生成图表的方法是因为，在组件加载后生成
* dom节点，这个时候canvas才能根据id去绘制图表
* 在这里去写了一个setTimeout修改了其中的一些数据，来
* 测试图表的刷新，是否刷新了，后期大家可能是定期去某
* 接口中获取数据，方法同理
*/
this.initPie(this.state.pieId);
setTimeout(()=>{
config.series[0].data = [
{value:335, name:'中国'},
{value:310, name:'美国'},
{value:274, name:'英国'},
{value:235, name:'俄罗斯'},
{value:400, name:'法国'}
].sort(function (a, b) { return a.value - b.value; })
this.initPie(this.state.pieId);
},1000*5)
}
componentDidUpdate() {
console.log('componentDidUpdate!')
this.initPie()
}
render() {
return (
<div>
<div id={this.state.pieId} style={{width: "500px", height: "500px"}}></div>
</div>
)
}
}
export default PieReact
代码可以去拉一下github上的代码，但是我还在尝试中，所以能看个大概，但是可以继续开发,实现原理我已经写的很详细了
https://github.com/Tangpriest/LearnReactEchart
网友评论