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: 雨 <雨>

Vue.js使用Echarts动态渲染多个图表相关推荐

Vue.js 2.x render 渲染函数 JSX
Vue.js 2.x render 渲染函数 & JSX Vue绝大多数情况下使用template创建 HTML.但是比如一些重复性比较高的场景,需要运用 JavaScript 的完全编程能力 ...
浅析Vue.js 中的条件渲染指令
1 应用于单个元素 Vue.js 中的条件渲染指令可以根据表达式的值,来决定在 DOM 中是渲染还是销毁元素或组件. html: <div id="app"> < ...
Vue基础篇六：Vue使用JSX进行动态渲染
系列文章目录 Vue基础篇一:编写第一个Vue程序 Vue基础篇二:Vue组件的核心概念 Vue基础篇三:Vue的计算属性与侦听器 Vue基础篇四:Vue的生命周期(秒杀案例实战) Vue基础篇五:V ...
Vue.js 第二天: 列表渲染
用v-for 把一个数组对应为一组元素我们用 v-for 指令根据一组数组的选项列表进行渲染.v-for 指令需要使用 item in items 形式的特殊语法,items 是源数据数组并且 it ...
七十、Vue城市页面Ajax动态渲染和兄弟组件数据传递
2020/10/29. 周四.今天又是奋斗的一天. @Author:Runsen 写在前面:我是「Runsen」,热爱技术.热爱开源.热爱编程.技术是开源的.知识是共享的.大四弃算法转前端,需要每天的 ...
php动态写入vue,Vue.js中使用动态组件的方法
本文介绍了如何在Vue.js中引用组件中的HTML元素.您可以通过使用Vue路由器或创建动态组件来切换视图或组件模板. Vue路由器用于在DOM中的视图或组件模板之间导航.要使用Vue路由器,请在ro ...
vue中手写动态渲染左右滚动菜单栏点击居左以及设置scrollLeft属性设置无效的原因解决
vue中可能会碰到无法使用框架的问题,此时需要手写左右滚动的滑动菜单栏,并且头部或者底部还有对应的标题点击定位.此时应该怎么做呢? (1)下面看结构: <div class="cour ...
Vue.js引入echarts、elementUI、museUI、mintUI
https://blog.csdn.net/xm_w_xm/article/details/81982933 不知道怎么建立项目的可以看上一篇下载elementUI npm install elem ...
Echarts canvas渲染出来的图表与边框的距离修改
由于项目需要,采用Echarts canvas渲染出来的桑基图右边边距太大,导致过多的空白,因此需要做下修改. 经过网上查找,很多人都是建议设置grid来控制边距:(grid配置-官网地址) var ...

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

main.js

Echarts.vue

Vue.js使用Echarts动态渲染多个图表相关推荐

最新文章

热门文章