1.安裝依賴(引入核心庫）

??????npm install echarts

2.設(shè)定容器并指定大小

????????設(shè)置寬高，否則無法顯示

3.設(shè)置配置項

? ?—初始圖表：

data(){

?????? return{

????? ?????? options:{

????????????????????//具體配置項參見https://echarts.apache.org/zh/option.html#title

? ? ? ? ? ? ? ?},

????????}

}

mounted() {

???this.initChart();

?},

methods: {

??? // 實(shí)例化echart

???initChart() {

?????let chart =this.$echart.init(document.getElementById("chart"));

?????chart.setOption(this.options);

}

}

注意：this.$echart.這里用到的是全局引入

?????? //在main.js中全局引入echart

????????import?echart?from?'echarts'

????????Vue.prototype.$echart=echart

遇到的問題：

? ? 當(dāng)數(shù)據(jù)發(fā)生改變時，圖表無變化

解決方法：

? ? 使用vue中的watch監(jiān)聽options的變化，然后重新初始化

watch:?{

????options:?{

??????handler(newVal,?oldVal)?{

????????let?chart?=?this.$echart.init(document.getElementById("chart"));

????????chart.setOption(newVal,?true);//設(shè)置為true是因?yàn)椴恢貜?fù)渲染

??????},

??????deep:?true //深度監(jiān)聽，因?yàn)閛ptions是個復(fù)雜數(shù)組對象

????}

??}