Echarts是百度出的一個關(guān)于圖表的庫，在比較了很多圖表庫后來決定了要用Echarts，一方面文檔比較全，另外一方面我覺得和react的思想也比較接近，這篇文章可以基于上一篇關(guān)于webpack2 + react 的文章上繼續(xù)嘗試。
這里是初步的嘗試，我會定期繼續(xù)更新自己的簡書
想到要在react中使用Echarts，相信很多人會和我一樣，去github上搜索關(guān)鍵字react echarts ,找一找star數(shù)比較多的，去嘗試一下，我本來也是想通過這種方式，后來發(fā)現(xiàn)自己完全可以不借助第三方的包來實(shí)現(xiàn)，首先可以去官網(wǎng)，針對webpack，百度給出了自己的文檔,這里面有官方說明
http://echarts.baidu.com/tutorial.html
首先通過npm安裝Echarts
npm install echarts --save-dev
新建一個chart.jsx文件
下面寫我們的這個圖表類，具體說明我會盡量在注釋里面寫清楚，第一步引入我們需要引入的內(nèi)容
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放這個圖表的配置
因?yàn)椴幌Ｍ约旱慕M件的jsx文件太過冗長，遵循CommonJS規(guī)范，單獨(dú)建立config存放自己的配置文件，所以你的配置文件可能看起來是這個樣子,這個配置項完全參照百度給的Demo，別忘了在你的文件頭部加載進(jìn)去
module.exports = {
backgroundColor: '#2c343c',
title: {
text: 'Customized Pie',
left: 'center',
top: 20,
textStyle: {
color: '#ccc'
}
},
tooltip : {
trigger: 'item',
formatter: "{a} <br/> : {c} (4uz6cq4%)"
},
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:'聯(lián)盟廣告'},
{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
這里我把完成的代碼貼出來啦，寫了注釋，這是我的第一次嘗試，圖表繪制出來了并且刷新數(shù)據(jù)也是正常的
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是隨機(jī)生成的一串唯一的字符串
*/
constructor(props) {
super(props)
let id = ( '_' + Math.random()).replace('.','_');
this.state = {
pieId : 'pie' + id
}
}
/**
* 生成圖表，主要做了一個判斷，因?yàn)槿绻蝗ヅ袛郿om有沒有生成，
* 在后面如果定期去更新圖表，每次生成一個dom節(jié)點(diǎn)會導(dǎo)致瀏覽器
* 占用的cpu和內(nèi)存非常高，踩過坑。
* 這里的config就是引入的配置文件中的config,文件頭部會有說明
*/
initPie(id) {
let myChart = echarts.getInstanceByDom(document.getElementById(id));
if( myChart === undefined){
myChart = echarts.init(document.getElementById(id));
}
myChart.setOption(config)
}
componentDidMount() {
/**
* 在這里去調(diào)用生成圖表的方法是因?yàn)?，在組件加載后生成
* dom節(jié)點(diǎn)，這個時候canvas才能根據(jù)id去繪制圖表
* 在這里去寫了一個setTimeout修改了其中的一些數(shù)據(jù)，來
* 測試圖表的刷新，是否刷新了，后期大家可能是定期去某
* 接口中獲取數(shù)據(jù)，方法同理
*/
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上的代碼，但是我還在嘗試中，所以能看個大概，但是可以繼續(xù)開發(fā),實(shí)現(xiàn)原理我已經(jīng)寫的很詳細(xì)了
https://github.com/Tangpriest/LearnReactEchart
