組件只做了簡單的傳值處理，記錄開發思路及echarts簡單使用。

這里默認所有圖表樣式一致，都為柱狀圖，如需其他類型，可查閱echarts官網文檔，再動態傳值即可。

vue 使用組件 ------在外層用v-for 循環，傳不同值進charts 即可

<!-- 傳入對應的數據給子組件 --> <charts :options='item.select' :id=’'charts' +index’ :index='index'></charts> <!-- 傳入對應的數據給子組件 end -->

vue創建子組件-----初始化空模板

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

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

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

補充知識：vue根據獲取的數據動態循環渲染多個echart（多個dom節點，多個ID）

//在dom節點加載之后調用渲染echart儀表盤方法，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放入數組中，以便下面渲染echart儀表盤使用 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: ’工作電表數’, type: ’gauge’, radius: ’80%’, min: 0, max: Number(this.dataVal[i].sum), splitNumber: 10, axisLine: { // 坐標軸線lineStyle: { // 屬性lineStyle控制線條樣式 color: [[0.30, ’#ff4500’], [0.80, ’#1e90ff’], [1, ’lime’]], width: 1, shadowColor: ’#fff’, //默認透明} }, axisLabel: { // 坐標軸小標記color: ’#fff’,shadowColor: ’#fff’, //默認透明shadowBlur: 10 }, axisTick: { // 坐標軸小標記length: 4, // 屬性length控制線長lineStyle: { // 屬性lineStyle控制線條樣式 color: ’auto’, shadowColor: ’#fff’, //默認透明 shadowBlur: 10} }, splitLine: { // 分隔線length: 7, // 屬性length控制線長lineStyle: { // 屬性lineStyle（詳見lineStyle）控制線條樣式 width: 2, color: ’#fff’, shadowColor: ’#fff’, //默認透明 shadowBlur: 10} }, pointer: { // 分隔線width:4,//指針的寬度length:'70%', //指針長度，按照半圓半徑的百分比shadowColor: ’#fff’, //默認透明shadowBlur: 5 }, title: {textStyle: { // 其余屬性默認使用全局文本樣式，詳見TEXTSTYLE fontWeight: ’bolder’, fontSize: 10, fontStyle: ’italic’, color: ’#fff’, shadowColor: ’#fff’, //默認透明 shadowBlur: 10} }, detail: {fontSize: 12, }, data: [{value: this.dataVal[i].normalSum, name: ’’}] }] }); } }) }}

以上這篇echarts.js 動態生成多個圖表 使用vue封裝組件操作就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持好吧啦網。