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

@Author: 雨 <雨> @Date: 2020-07-04T15:44:54+15:00 @Email: 2607503865@qq.com @Last modified by: S_Y

main.js

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");

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 = { braner:[], braner_tableli:[], braner_tablepo:[], }; // 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>

本期完毕，记得关注哦~ @Author: 雨 <雨>