组件只做了简单的传值处理，记录开发思路及echarts简单使用。这里默认所有图表样式一致，都为柱状图，如需其他类型，可查阅echarts官网文档，再动态传值即可。vue 使用组件 ------在外层用v-for 循环，传不同值进charts 即可vue 使用组件 ------在外层用v-for 循环，传不同值进charts 即可




:options="item.select"

:id='"charts" +index'

:index="index"

style="width: 900px;height:400px;"

>






:options="item.select"

:id='"charts" +index'

:index="index"

style="width: 900px;height:400px;"

>

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





主要部分 ------ 初始化echarts.js主要部分 ------ 初始化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.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）补充知识：补充知识：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
//获取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}
{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: ''}]

}]

});

}

})

}
}
methods: {
forId:function(index){

return "geo_" +index
},

mapTree() {

this.$nextTick(function(){

for(var i=0;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}
{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封装组件操作就是小编分享给大家的全部内容了，希望能给大家一个参考。