react+echarts实现环形图

最新推荐文章于 2024-07-25 18:06:29 发布

weixin_30414635

最新推荐文章于 2024-07-25 18:06:29 发布

阅读量1.1k

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/zanderblogs/p/9083840.html

版权

本文详细介绍了如何结合React与ECharts库来实现一个动态的环形图组件，展示了一种将JavaScript库集成到React应用中的方法。

摘要由CSDN通过智能技术生成

  1 import React, { Component } from 'react';
  2 import axios from 'axios';
  3 import echarts from 'echarts/lib/echarts';
  4 import 'echarts/lib/chart/pie';
  5 import 'echarts/lib/component/tooltip';
  6 import 'echarts/lib/component/title';
  7 
  8 class ProjectBar extends Component {
  9     constructor(props) {
 10         super(props);
 11         this.state = {
 12             alldata: {},
 13             yeardata: {}
 14         };
 15         this.refreshDate = this.refreshDate.bind(this);
 16         this.initData = this.initData.bind(this);
 17     }
 18     async componentWillMount() {
 19         const res = await axios.post('*******');
 20         if (res.data.success === 'success') {
 21             this.setState({
 22                 alldata: res.data.detailMsg.data.all,
 23                 yeardata: res.data.detailMsg.data.year
 24                 // totalcontract: res.data.detailMsg.data.totalcontract,
 25                 // hsytotalcontract: res.data.detailMsg.data.hsytotalcontract
 26             });
 27             this.initData(this.state.yeardata, 'year');
 28         }
 29     }
 30     refreshDate(type) {
 31         return () => {
 32             if (type === 'all') {
 33                 document.getElementById('all1').style.backgroundColor = '#F6E1E0';
 34                 document.getElementById('year1').style.backgroundColor = '#FFFFFF';
 35                 document.getElementById('all1').style.color = '#C13837';
 36                 document.getElementById('year1').style.color = '#595959';
 37                 this.initData(this.state.alldata, type);
 38             } else {
 39                 document.getElementById('year1').style.backgroundColor = '#F6E1E0';
 40                 document.getElementById('all1').style.backgroundColor = '#FFFFFF';
 41                 document.getElementById('all1').style.color = '#595959';
 42                 document.getElementById('year1').style.color = '#C13837';
 43                 this.initData(this.state.yeardata, type);
 44             }
 45         };
 46