在vue项目中使用echarts

使用npm添加package.json文件中的配置并下载相关npm包依赖

npm install echarts --save

引用echarts

import echarts from 'echarts'
Vue.prototype.$echarts = echarts

以组件的形式使用echarts

每次在使用echarts的时候，都必须要重复的引入，这样很不方便
vue作为一个组件化开发的框架，我们可以使用组件的方式进行集成。每次我们引入组件，进行使用，这样就方便的多。

<template>
    <div :id="id" :data="data"></div>
</template>
<script>
import rainbow from '../lib/rainbow'//引用自定义主题
export default {
    props:["id","data"],
    data(){
        return{
            graph:null,
        }
    },
    methods:{
        drawGraph(id,data){
            let _this = this;
            let myChart = document.getElementById(id);
            this.graph = this.$echarts.init(myChart,'rainbow');
            this.graph.setOption(data);
            //echarts图表自适应
            window.addEventListener("resize",function(){
                _this.graph.resize();
            });
        }
    },
    mounted(){
        this.$echarts.registerTheme("rainbow",rainbow);
        this.drawGraph(this.id,this.data);
    },
    beforeDestroy(){
        if(this.graph) this.graph.clear();
    },
    watch:{
        data:{
            handler(newValue,oldValue){
                this.drawGraph(this.id,newValue);
            },
            deep:true
        }
    }
}
</script>

1、echarts多次进行SetOption的时候数据遗留问题

myChart.setOption(option，true);

2、echarts图表自适应

mychart.resize();
/*(opts?: {
    width?: number|string,
    height?: number|string,
    silent?: boolean
}) => ECharts*/

当浏览器发生resize事件的时候，让其触发echart的resize事件，重绘canvas。

window..addEventListener("resize",()=>{
	mychart1.resize();
	mychart2.resize();
})

3.暂无数据

echarts 4.0取消暂无数据判断，需要自己判断给出用户提示；