Vue.js使用Echarts动态渲染多个图表

Vue.js使用Echarts动态渲染多个图表

hello 老铁们~
新人加入博客，以后多多关照！！

最近碰到个比较坑的需求，批量渲染图表，但后台返回格式是一个arr对应多个图表的数据，多个arr~

大家别误会哈，不是一个list对应一个图表！
是每个arr list对应7个，每个坐标
如果是每个图表每个list是很简单的~~

哎 说的我都懵逼了

总之这玩意儿我弄了好久才实现
废话不多说，直接上代码！

main.js

首先是main.js的代码，简单，就引入Echarts

import Vue from "vue";
import App from "./App.vue";
import echarts from 'echarts' // 引入echarts
Vue.prototype.$echarts = echarts //导出echarts
Vue.config.productionTip = false;

new Vue({
render: h => h(App)
}).$mount("#app");

这里可以优化成局部引入的，目前是全局~~ok 下一段：

Echarts.vue

<template>
<div class="projectCost">
<div class="container">
<div class="wrapper" >

</div>
</div>
</div>
</template>

<script>

export default {
data(){
return {
table: [
{
arr: {
key: '测试图表1',
braner: {
value: 400
},
braner_tableli: {
value: 564564
},
braner_tablepo: {
value: 54654
},
braner_yun: {
value: 51345163
},
braner_whar: {
value: 56354
},
braner_pert: {
value: 6456456
},
braner_cout: {
value: 56456
}
}
},
{
arr: {
key: '测试图表1',
braner: {
value: 457463
},
braner_tableli: {
value: 564564
},
braner_tablepo: {
value: 54654
},
braner_yun: {
value: 51345163
},
braner_whar: {
value: 56354
},
braner_pert: {
value: 6456456
},
braner_cout: {
value: 56456
}
}
},
{
arr: {
key: '测试图表1',
braner: {
value: 4574611113
},
braner_tableli: {
value: 564564
},
braner_tablepo: {
value: 54654
},
braner_yun: {
value: 51345163
},
braner_whar: {
value: 56354
},
braner_pert: {
value: 6456456
},
braner_cout: {
value: 56456
}
}
},
{
arr: {
key: '测试图表1',
braner: {
value: 457463
},
braner_tableli: {
value: 564564
},
braner_tablepo: {
value: 54654
},
braner_yun: {
value: 51345163
},
braner_whar: {
value: 56354
},
braner_pert: {
value: 6456456
},
braner_cout: {
value: 56456
}
}
},
{
arr: {
key: '测试图表1',
braner: {
value: 457463
},
braner_tableli: {
value: 564564
},
braner_tablepo: {
value: 54654
},
braner_yun: {
value: 51345163
},
braner_whar: {
value: 56354
},
braner_pert: {
value: 6456456
},
braner_cout: {
value: 56456
}
}
},
{
arr: {
key: '测试图表1',
braner: {
value: 3543
},
braner_tableli: {
value: 245863
},
braner_tablepo: {
value: 424
},
braner_yun: {
value: 42424
},
braner_whar: {
value: 56354
},
braner_pert: {
value: 34535
},
braner_cout: {
value: 45354
}
}
},
{
arr: {
key: '测试图表1',
braner: {
value: 5454
},
braner_tableli: {
value: 454
},
braner_tablepo: {
value: 54654
},
braner_yun: {
value: 6456456
},
braner_whar: {
value: 454
},
braner_pert: {
value: 457463
},
braner_cout: {
value: 45646
}
}
}
],
}
},
methods:{
drawRose(){
let xAlis = []; //横坐标描述
// let list=[1,2,3,3,5,4,6,5,4,6]  // 模拟，后面要改成动态，所以先注释
// let value = ["1",2,3]   // 模拟，后面要改成动态，所以先注释
let tabsData = new Object();
this.$set(tabsData,"braner",[])
this.$set(tabsData,"braner_tableli",[])
this.$set(tabsData,"braner_tablepo",[])
for(var i = 0;i < this.table.length;i++ ){
xAlis.push(this.table[i].arr.key);
Object.keys(this.table[i].arr).forEach(item=>{
Object.keys(tabsData).forEach(reportItem=>{
if(!(item==="key")){
if (reportItem===item) {
tabsData[reportItem].push(this.table[i].arr[item].value);
}
}
});
});
}
Object.keys(tabsData).forEach(ele=>{
let divs = '<div style="height:300px;width:500px" id='+ele+'></div>';
document.getElementsByClassName('wrapper')[0].insertAdjacentHTML("afterBegin",divs);
let myChart = this.$echarts.init(document.getElementById(ele));
myChart.setOption({
color: ["#4DFFFD", "#7B3FF6", "#1F6DFE", "#34A6FE"],
title: [{
left: 'center',
text: 'Gradient along the y axis'
}],
tooltip: {
trigger: 'axis'
},
xAxis: [{
data: xAlis
}],
yAxis: [{
splitLine: {show: false}
}],
grid: [{
bottom: '60%'
}, {
top: '60%'
}],
series: [{
type: 'line',
showSymbol: false,
data: tabsData[ele],
}]
})
})
}
},
mounted(){
this.drawRose()
}
}
</script>

<style lang="less" scoped>

</style>

ok，其实就这么多 逻辑大概讲一下：

这个后面正常开发弄成组件封装好一点，由于时间观念，暂不提供封装的咯~~

这玩意儿其实就是根据前端选择的复选框动态渲染几个图表，图表数量和数据都不一样，但样式样子是一样的~~

总之这玩意儿对我个小菜鸟还是蛮费劲的~

总之呢，也算弄出来了，ok，完了~