yylib-quick-mobile/dist/yylib/chart/YYChart.js

yylib-quick-mobile

import React, {Component} from 'react';
import classnames from 'classnames';
class YYChart extends Component{
	componentDidMount(){
		let {RunInDesign,uikey}=this.props;
		 if(window.echarts){
		 	  this.myChart=echarts.init(document.getElementById(uikey));
		 }else{
		 	console.error("项目中未引入图表组件,请手动引入或联系管理员");
		 }
        if(RunInDesign){
        	if(this.myChart){
        		this.myChart.setOption({
            title: {
                text: 'EChart',
                subtext:"此数据只是设计态展示,开发者需要在运行态实现图表的设置数据部分"
            },
            tooltip: {},
            legend: {
                data:['销量']
            },
            xAxis: {
                data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
            },
            yAxis: {},
            series: [{
                name: '销量',
                type: 'bar',
                data: [5, 20, 36, 10, 10, 20]
            }]
        })
        	}
        }
	}
	/*****获取echart实例****/
	getechart(){
		if(!this.myChart){
			console.error("当前未引入百度图表或者初始化失败!")
		}
		return this.myChart;
	}
	componentWillReceiveProps (){
		if(this.myChart){
			this.myChart.resize();
		}
	}
    render() {
      let {RunInDesign,uititle,height,uikey,visible,className}=this.props;
      let wrapClz = classnames({
        'yy-chart': true,
        'hidden': !visible,
        className,
      });
      return (<div  id={uikey} style={{height:height,backgroundColor:"#FFFFFF"}} className={wrapClz} ></div>);
    }
}
YYChart.defaultProps = {
  visible: true
}
module.exports = YYChart;