echarts.js 动态生成多个图表 使用vue封装组件操作

组件只做了简单的传值处理，记录开发思路及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封装组件操作就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持好吧啦网。