在 Vue 專案中使用 ECharts

重要檔案版本

在 vue 專案中使用 echarts 只需要在 vue 元件的mounted生命週期中 初始化 echarts，然後在每次配置項有變更時呼叫setoption()方法更新配置即可

專案模板原始碼

class="default-chart"
:style="">
div>
template>
import * as echarts from 'echarts/lib/echarts';
import 'zrender/lib/svg/svg';
// 引入提示框和標題元件
import throttle from '../../utils/throttle';
export default ,
option: )
},notmerge: ,
lazyupdate: 
},data() ;
},methods: );
},// 設定配置項
setoption(option) 
const notmerge = this.notmerge;
const lazyupdate = this.lazyupdate;
this.chart.setoption(option, notmerge, lazyupdate);
},// 銷毀
dispose() 
this.chart.dispose();
this.chart = null;
},// 重新渲染
resize() ,
getinstance() 
},mounted() );
},beforedestroy() ,
watch: 
}};script>
lang="scss"
scoped>
@import
'../../scss/_common.scss'
;style>

:renderer="renderer"
:option="option"/>
template>
import from 'vuex';
// 引入當前圖表配置需要用到的圖表、元件
import 'echarts/lib/component/tooltip';
import 'echarts/lib/component/title';
import 'echarts/lib/component/grid';
import 'echarts/lib/component/legend';
import 'echarts/lib/chart/radar';
import 'echarts/map/js/china';
import chart from '../components/charts/index';
const colors = [
'#bcd3bb',
'#e88f70',
'#edc1a5',
'#9dc5c8',
'#e1e8c8',
'#7b7c68',
'#e5b5b5',
'#f0b489',
'#928ea8',
'#bda29a'
];export default ;
},computed: ),
provinces() ,
// option 合併傳入的資料，返回乙個 echarts 的 配置項
option() 
},legend: ,
selectedmode: 'single'
},radar: ,,,
,,
],shape: 'circle', // 形狀
splitnumber: 5, // 分割段數
splitline: 
},splitarea: ,
axisline: }},
series: this.provinces.map((province, idx) => ,
data: this.currentdata[idx].data,
symbol: 'none',
itemstyle: ,
areastyle: 
};})};}
},methods: ,
// 元件裝載前請求資料
async beforemount() );
},components: 
};script>
lang="scss"
scoped>
@import
'../scss/_common.scss'
;style>

Vue系列 在vue專案中使用echarts

該示例使用vue cli腳手架搭建 npm install echarts s或者使用國內的 映象 npm install g cnpm registry taobao org cnpm install echarts s 引入echarts import echarts from echarts ...

Vue系列 在vue專案中使用echarts

該示例使用vue cli腳手架搭建 npm install echarts s或者使用國內的 映象 npm install g cnpm registry cnpm install echarts s 引入echarts import echarts from echarts vue.prototy...

在vue專案中使用echarts

安裝echarts依賴 npm install echarts s 建立圖表 全域性引入 main.js 引入echarts import echarts from echarts vue.prototype.echarts echarts 這裡也可以在router下index.js引入，看規定 h...