npm命令安装:
npm install echarts --save
import你需要用到的组件 至于制作什么图表 可以去echarts的官网查看实例 以及 api http://www.echartsjs.com/examples/
官网的实例都是左侧代码,右侧运行结果,超级方便
我的示例代码如下
import React, { Component } from 'react';
// 引入 ECharts 主模块
import echarts from 'echarts/lib/echarts';
// 引入饼状图
import 'echarts/lib/chart/pie';
// 引入提示框和标题组件
import 'echarts/lib/component/tooltip';
import 'echarts/lib/component/title';
// 引入图例组件
import 'echarts/lib/component/legend';
class Pie extends Component {
componentDidUpdate() {
var myChart = echarts.init(document.getElementById('pie'));
// 绘制图表
myChart.setOption({
tooltip: {
trigger: 'item',
formatter: "{a} <br/>{b}: {c} ({d}%)"
},
legend: {
orient: 'vertical',
x: 'right',
top: 'middle',
data:['已签到','未签到']
},
series: [
{
name:'考勤统计',
type:'pie',
radius: ['50%', '70%'],
avoidLabelOverlap: false,
label: {
normal: {
show: false,
position: 'center'
},
emphasis: {
show: true,
textStyle: {
fontSize: '30',
fontWeight: 'bold'
}
}
},
labelLine: {
normal: {
show: false
}
},
data:[
{
value: this.props.attendNumber,
name:'已签到',
itemStyle: {
normal: {
color: '#3AA0FF'
}
}},
{
value: this.props.unAttendNumber,
name:'未签到',
itemStyle: {
normal: {
color: '#E56363'
}
}
}
]
}
]
});
};
render() {
return (
<div>
<div id="pie" style={{width: '450px', height:'400px'}}></div>
</div>)
}
}
export default Pie;