react 项目使用echarts，安装以及使用

废话不多说，公司项目要求，要画一个折线形的统计图！以前没用过，现在特此记录下！！！

• 1：安装
  安装命令：yarn add echarts echarts-for-react 或者npm install --save echarts echarts-for-react
  echarts比较大，下载可能得费点时间！！！
• 2：引用

	//由于echarts包不小，为了不为打包的时候添麻烦！所以我是按需引入的！
	import * as echarts from 'echarts';//引入主模块
	/**
		引入线型图
		//line是线，因为我们要用折线图，柱形图的话把line改成bar；
		//例如import 'echarts/lib/chart/line'
	*/
	import 'echarts/lib/chart/line';

	// 引入提示框和标题组件
	import 'echarts/lib/component/tooltip';
	import 'echarts/lib/component/title';

注意：引入主模块的时候使用import echarts from ‘echarts/lib/echarts’；这样引入可能会报TypeError: Cannot read property…什么找不到之类的，所以我用的是上面那种方法！

• 3：使用

	  componentDidMount() {
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(this.refs.mainBox);
        console.log(myChart)
        // // 绘制图表
        myChart.setOption({
            title: { text: '2020年上半年趋势图' },//图表的title
            tooltip: {},//鼠标放到点上会有弹框出现
            xAxis: {//该对象中是用来设置x轴的
                data: ["2020-01", "2020-02", "2020-03", "2020-04", "2020-05", "2020-06"],//数据
                axisLabel:{
                    rotate:45,//设置x轴倾斜度
                    color:'#888',//设置x轴字体的颜色
                    interval:0,//内容全部展示
                    fontSize:10//控制x轴字号
                },
            },

            yAxis: {//该对象中是用来设置x轴的
                axisLabel:{
                    color:'red',//设置Y轴字体的颜色
                    fontSize:12,//控制Y轴字号
                    formatter: function (value, index) {//设置y轴的单位！
                        if (value >= 10 && value < 100) {
                            value = value / 10 + "万";
                        } else if (value >= 100) {
                            value = value / 100 + "万";
                        }
                        return value;
                    },
                },
               
            },
            series: [
                {
                name: '销量',
                type: 'line',
                data: [5, 20, 36, 10, 10, 20],//点位数据
                itemStyle: {
                    normal: {
                        color: 'red',//设置线条颜色
                        lineStyle:{
                            width:0.8//设置线条粗细
                        }
                    },
                    
                    }
               },
               {
                name: '产量',
                type: 'line',
                data: [5,1, 22, 33, 3, 25],
                itemStyle: {
                    normal: {
                        color: '#0f0',//设置线条颜色
                        lineStyle:{
                            width:0.8//设置线条粗细
                        }
                    },
            
            }
               }
        ]
        });
    }
	  render() {
        return (
        	// 定义ref，可以理解成盒子；装画好的图；
            <div ref='mainBox' style={{ width: 400, height: 400 }}></div>
        );
    }

里面用到的属性 都可以从官网上找找！（https://echarts.apache.org/zh/index.html）！希望对你有所帮助！后期我会一直记录下去的！咱们相互学习！