vue或者react中使用echarts图表

在vue中使用echarts，首先npm 下载echarts 包

npm install echarts --save

在main.js中引入
全局引用

import echarts from "echarts";
Vue.prototype.$echarts = echarts

或者按需引入

//引入基本模板
let echarts = require('echarts/lib/echarts')
 
// 引入折线图等组件
require('echarts/lib/chart/line')
require('echarts/lib/chart/bar')
require('echarts/lib/chart/radar')

// 引入提示框和title组件，图例
require('echarts/lib/component/tooltip')
require('echarts/lib/component/title')
require('echarts/lib/component/legend')
require('echarts/lib/component/legendScroll')//图例翻译滚动

Vue.prototype.$echarts = echarts

如下为页面中的引用

export default {
  name: 'hello',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  },
  mounted(){
    this.drawLine();
  },
  methods: {
    drawLine(){
        // 基于准备好的dom，初始化echarts实例
        let myChart = this.$echarts.init(document.getElementById('myChart'))
        // 绘制图表
        myChart.setOption({
            title: { text: '在Vue中使用echarts' },
            tooltip: {},
            xAxis: {
                data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
            },
            yAxis: {},
            series: [{
                name: '销量',
                type: 'bar',
                data: [5, 20, 36, 10, 10, 20]
            }]
        });
    }
  }
}

如果data中的数据是动态的，在data定义相应的变量，在获取数据完成后的回调中，调用drawLine方法，可以实现动态的图表，如图下

在react中使用echarts，同样要npm下载echarts，这里还用了echarts-for-react，同理在index.js引入相关的文件

npm install echarts --save

npm install echarts-for-react --save

由于这里用到了地图组件，所以引入了新的文件

import echarts from "echarts";
import chinaJson from 'echarts/map/json/china.json';
echarts.registerMap('china', chinaJson);
React.Component.prototype.$echarts = echarts

在vue文件中引入ReactEcharts

import ReactEcharts from 'echarts-for-react';

getOption = ()=>{
		const option = {
		    tooltip: {
		        triggerOn: "click",
		        formatter: function(e, t, n) {
					console.log(e)
		            return .5 == e.value ? e.name + "：有疑似病例" : e.seriesName + "<br />" + e.name + "：" + e.value
		        }
		    },
		    visualMap: {
		        min: 0,
		        max: 1000,
		        left: 26,
		        bottom: 40,
		        showLabel: !0,
		        text: ["高", "低"],
		        pieces: [{
		            gt: 100,
		            label: "> 100 人",
		            color: "#7f1100"
		        }, {
		            gte: 10,
		            lte: 100,
		            label: "10 - 100 人",
		            color: "#ff5428"
		        }, {
		            gte: 1,
		            lt: 10,
		            label: "1 - 9 人",
		            color: "#ff8c71"
		        }, {
		            gt: 0,
		            lt: 1,
		            label: "疑似",
		            color: "#ffd768"
		        }, {
		            value: 0,
		            color: "#ffffff"
		        }],
		        show: !0
		    },
		    geo: {
		        map: "china",
		        roam: !1,
		        scaleLimit: {
		            min: 1,
		            max: 2
		        },
		        zoom: 1.23,
		        top: 120,
		        label: {
		            normal: {
		                show: !0,
		                fontSize: "14",
		                color: "rgba(0,0,0,0.7)"
		            }
		        },
		        itemStyle: {
		            normal: {
		                //shadowBlur: 50,
		                //shadowColor: 'rgba(0, 0, 0, 0.2)',
		                borderColor: "rgba(0, 0, 0, 0.2)"
		            },
		            emphasis: {
		                areaColor: "#f2d5ad",
		                shadowOffsetX: 0,
		                shadowOffsetY: 0,
		                borderWidth: 0
		            }
		        }
		    },
		    series: [{
		        name: "确诊病例",
		        type: "map",
		        geoIndex: 0,
		        data: this.state.dataList
		    }]
		}
			return option
	}

定义一个方法，返回option,也可以不定义，直接写

render(){
	return(
		<ReactEcharts  option={this.getOption()} style={{height:'500px',width:'100%'}}/>
		)
	}

由于data里引用的是this.state.dataList。所以要在数据请求成功后赋值

_this.setState({
	dataList:res.data.list
})