vue.js根据数据循环生成表格_echarts.js 动态生成多个图表 使用vue封装组件操作

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

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

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

:options="item.select"

:id=""charts" +index"

:index="index"

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

>

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)