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

组件只做了简单的传值处理，记录开发思路及echarts简单使用。

这里默认所有图表样式一致，都为柱状图，如需其他类型，可查阅echarts官网文档，再动态传值即可。

vue 使用组件 ------在外层用v-for 循环，传不同值进charts 即可

vue创建子组件-----初始化空模板

主要部分 ------ 初始化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(){ }

methods: {
 forId:function(index){
  return "geo_" +index
 },
 
 mapTree() {
   this.$nextTick(function(){
    for(var i=0;i{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封装组件操作就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持考高分网。