組件只做了簡(jiǎn)單的傳值處理，記錄開(kāi)發(fā)思路及echarts簡(jiǎn)單使用。

這里默認(rèn)所有圖表樣式一致，都為柱狀圖，如需其他類(lèi)型，可查閱echarts官網(wǎng)文檔，再動(dòng)態(tài)傳值即可。

vue 使用組件 ------在外層用v-for 循環(huán)，傳不同值進(jìn)charts 即可

<!-- 傳入對(duì)應(yīng)的數(shù)據(jù)給子組件 --> <charts :options='item.select' :id=’'charts' +index’ :index='index'></charts> <!-- 傳入對(duì)應(yīng)的數(shù)據(jù)給子組件 end -->

vue創(chuàng)建子組件-----初始化空模板

<!-- 圖表組件 --> <template> <div></div> </template> <!-- 圖表組件 end -->

主要部分 ------ 初始化echarts.js

Vue.component(’charts’, { template: ’#charts’, // 傳入對(duì)應(yīng)的數(shù)值與動(dòng)態(tài)index props: [’options’, ’index’], methods: { initOption() { var that = this var arr1 = [] // x軸刻度 var arr2 = [] // y軸數(shù)據(jù)值 // 取出需要的數(shù)據(jù) this.options.forEach(element => { arr1.push(element.selectedTopic) arr2.push(element.peopleNum) }) // 基于準(zhǔn)備好的dom，初始化echarts實(shí)例 var myChart = echarts.init( document.getElementById(’charts’ + this.index) ) // 指定圖表的配置項(xiàng)和數(shù)據(jù) var option = { color: [’#3582F8’], tooltip: { trigger: ’axis’, axisPointer: { // 坐標(biāo)軸指示器，坐標(biāo)軸觸發(fā)有效 type: ’shadow’ // 默認(rèn)為直線(xiàn)，可選為：’line’ | ’shadow’ } }, grid: { left: ’3%’, right: ’4%’, bottom: ’3%’, containLabel: true }, xAxis: [ { type: ’category’, data: arr1, // X軸的刻度 axisTick: { alignWithLabel: true } } ], yAxis: [ // y軸的刻度值自動(dòng)調(diào)整 { type: ’value’ } ], series: { name: ’y軸數(shù)值’, type: ’bar’, barWidth: ’60%’, data: arr2 // 具體選擇數(shù)值 } } // 使用剛指定的配置項(xiàng)和數(shù)據(jù)顯示圖表。 myChart.setOption(option) } }, mounted() { this.initOption() }, created() {} })

補(bǔ)充知識(shí)：vue根據(jù)獲取的數(shù)據(jù)動(dòng)態(tài)循環(huán)渲染多個(gè)echart（多個(gè)dom節(jié)點(diǎn)，多個(gè)ID）

//在dom節(jié)點(diǎn)加載之后調(diào)用渲染echart儀表盤(pán)方法，this.$nextTick(function(){ }

<div class='chart'> <div v-for='(dataval, index) in dataVal' :key='index' :id='forId(index)'></div> </div>

methods: { forId:function(index){ return 'geo_' +index }, mapTree() { this.$nextTick(function(){ for(var i=0;i<this.dataVal.length;i++){ //獲取id放入數(shù)組中，以便下面渲染echart儀表盤(pán)使用 this.getId.push(this.$echarts.init(document.getElementById(’geo_’+i))); this.getId[i].setOption({ title: { text: this.dataVal[i].name+’棟’, textStyle: {color: ’#00f2f1’,fontSize: 14 }, left: ’center’, top: 5 }, tooltip: { formatter: ’{a} <br/>{c}’ }, series:[ { name: ’工作電表數(shù)’, type: ’gauge’, radius: ’80%’, min: 0, max: Number(this.dataVal[i].sum), splitNumber: 10, axisLine: { // 坐標(biāo)軸線(xiàn)lineStyle: { // 屬性lineStyle控制線(xiàn)條樣式 color: [[0.30, ’#ff4500’], [0.80, ’#1e90ff’], [1, ’lime’]], width: 1, shadowColor: ’#fff’, //默認(rèn)透明} }, axisLabel: { // 坐標(biāo)軸小標(biāo)記color: ’#fff’,shadowColor: ’#fff’, //默認(rèn)透明shadowBlur: 10 }, axisTick: { // 坐標(biāo)軸小標(biāo)記length: 4, // 屬性length控制線(xiàn)長(zhǎng)lineStyle: { // 屬性lineStyle控制線(xiàn)條樣式 color: ’auto’, shadowColor: ’#fff’, //默認(rèn)透明 shadowBlur: 10} }, splitLine: { // 分隔線(xiàn)length: 7, // 屬性length控制線(xiàn)長(zhǎng)lineStyle: { // 屬性lineStyle（詳見(jiàn)lineStyle）控制線(xiàn)條樣式 width: 2, color: ’#fff’, shadowColor: ’#fff’, //默認(rèn)透明 shadowBlur: 10} }, pointer: { // 分隔線(xiàn)width:4,//指針的寬度length:'70%', //指針長(zhǎng)度，按照半圓半徑的百分比shadowColor: ’#fff’, //默認(rèn)透明shadowBlur: 5 }, title: {textStyle: { // 其余屬性默認(rèn)使用全局文本樣式，詳見(jiàn)TEXTSTYLE fontWeight: ’bolder’, fontSize: 10, fontStyle: ’italic’, color: ’#fff’, shadowColor: ’#fff’, //默認(rèn)透明 shadowBlur: 10} }, detail: {fontSize: 12, }, data: [{value: this.dataVal[i].normalSum, name: ’’}] }] }); } }) }}

以上這篇echarts.js 動(dòng)態(tài)生成多個(gè)圖表 使用vue封裝組件操作就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持好吧啦網(wǎng)。