在开发过程中我们常常需要,在一个页面中使用相同的图表来展示同级别的多个事物(如:同级别的多个不同id的仓库、同级别的多个不同id的设备等)。
上图效果实现代码:
<template> <div class="projectCost"> <div class="container"> <div class="wrapper" v-for="(item,index) in list" :key="index"> <div class="roseChart"></div> // 使用class,不是id </div> </div> </div> </template> <script> export default { data(){ return { list:[ // 假数据 { id:1, price:{ name:'项目一', resData:[ {name:'订购费用',value:12}, {name:'饲养费用',value:18}, {name:'实验费用',value:8}, {name:'其他费用',value:10}, ] } },{ id:2, price:{ name:'项目二', resData:[ {name:'订购费用',value:18}, {name:'饲养费用',value:10}, {name:'实验费用',value:20}, {name:'其他费用',value:9}, ] } } ] } }, methods:{ drawRose(){ var echarts = require("echarts"); var roseCharts = document.getElementsByClassName('roseChart'); // 对应地使用ByClassName for(var i = 0;i < roseCharts.length;i++ ){ // 通过for循环,在相同class的dom内绘制元素 var myChart = echarts.init(roseCharts[i]); myChart.setOption({ color: ["#4DFFFD", "#7B3FF6", "#1F6DFE", "#34A6FE"], title: { text: this.list[i].price.name, left: '70', top: 5, textStyle: { color: '#4DFFFD', fontSize: 14, } }, tooltip: { trigger: 'item', formatter: "{b} : {c} ({d}%)" }, legend: { type: "scroll", orient: "vartical", top: "center", right: '0px', itemWidth: 16, itemHeight: 8, itemGap: 16, textStyle: { color: '#FFFFFF', fontSize: 12, }, data: ['订购费用', '饲养费用', '实验费用', '其他费用'] }, polar: { center:['36%','56%'], }, angleAxis: { interval: 3, // 强制设置坐标轴分割间隔 type: 'category', z: 10, axisLine: {show: false}, axisLabel: {show: false}, }, radiusAxis: { min: 10, max: 1000, interval: 200, axisLine: {show: false}, axisLabel: {show: false}, splitLine: { lineStyle: { color: "#2277C3", width: 1, type: "solid" } } }, calculable: true, series: [ { type: 'pie', radius: ["10%", "14%"], center:['36%','56%'], hoverAnimation: false, labelLine: {show: false}, data: [{ value: 0, itemStyle: { normal: { color: "#809DF5" } } }] },{ stack: 'a', type: 'pie', radius: ['20%', '80%'], center:['36%','56%'], roseType: 'area', zlevel:10, label: {show: false}, labelLine: {show: false}, data: this.list[i].price.resData // 渲染每个图表对应的数据 }] }) } } }, mounted(){ this.drawRose() } } </script> <style lang="scss" scoped> .projectCost{ margin-left: 40px; .container{ display: flex; width: 680px; height: 240px; background-size: 100% 100%; // background-image: url('../../../assets/images/projectTest/costDetail.png'); .wrapper{ margin-top: 20px; width: 340px; height:180px; border-right: 1px solid #0B61B3; .roseChart{ width: 260px; height:180px; } } } } </style>
补充知识:echarts 同时控制多个图表的属性值变更
echarts v4.x 版本如何同时控制多个图标的属性值变更
简单理解:
echarts为一个对象形式出现在代码中,通过 Canvas、SVG(4.0+)、VML 的形式渲染图表
实现方法:
echarts.init 方法初始化一个 echarts 实例并通过 setOption 方法生成一个简单的图表
需求:
将页面多个图表渲染完成后 选择更新数据或者查看固定时间段区域数据等按钮实现动态的改变echarts的图表数据表现。
分析:
1、首先对于echarts而言,每个图表都是一个单独的echarts对象,那么我们只需要将每个对象获取到并通过getOption()函数获取到每个对象的属性,并对其赋值。
2、然后通过setOption(echartsObject)方法对其执行渲染就可以了(echartsObject为每个echarts对象)。
设计思路:
1、设置一个全局数组用来装入每一个echarts对象。
var myCharts=[];
然后在每个echarts实例化完成后将当前的echarts对象放进myCharts数组中。
function darwChart(id, monitorItemData, monitorItemDecimal,oiltime) { ... var chartid = "chart_" + id; chartid = echarts.init(dom); chartid.setOption(option={...}) myCharts.push(chartid); ... }
注:这里说明id为每个表加载的时候获取的数据id,本人通过这个id来区分不同的echarts对象,如果设置多个方法互相不关联,可以不用这么写,这里自由分配,主要理解实现思想。
2、然后外部按钮触发事件的方法:循环赋值实现,这里就简单了。ok,祝你成功。
function gettimeradio(){ var rr = $('input:radio[name="r2"]:checked').attr('id'); Xmin = getDateTime(rr); Xmax = getDateTime(0); myCharts = Array.from(new Set(myCharts)); myCharts.forEach(data=>{ var chart = data.getOption(); chart.xAxis[0].min =Xmin ; chart.xAxis[0].max =Xmax ; data.setOption(chart); }) }
以上这篇在Vue 中实现循环渲染多个相同echarts图表就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持。
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
更新日志
- 小骆驼-《草原狼2(蓝光CD)》[原抓WAV+CUE]
- 群星《欢迎来到我身边 电影原声专辑》[320K/MP3][105.02MB]
- 群星《欢迎来到我身边 电影原声专辑》[FLAC/分轨][480.9MB]
- 雷婷《梦里蓝天HQⅡ》 2023头版限量编号低速原抓[WAV+CUE][463M]
- 群星《2024好听新歌42》AI调整音效【WAV分轨】
- 王思雨-《思念陪着鸿雁飞》WAV
- 王思雨《喜马拉雅HQ》头版限量编号[WAV+CUE]
- 李健《无时无刻》[WAV+CUE][590M]
- 陈奕迅《酝酿》[WAV分轨][502M]
- 卓依婷《化蝶》2CD[WAV+CUE][1.1G]
- 群星《吉他王(黑胶CD)》[WAV+CUE]
- 齐秦《穿乐(穿越)》[WAV+CUE]
- 发烧珍品《数位CD音响测试-动向效果(九)》【WAV+CUE】
- 邝美云《邝美云精装歌集》[DSF][1.6G]
- 吕方《爱一回伤一回》[WAV+CUE][454M]