Dva引用echarts制作统计图表

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;