在Vue 中实现循环渲染多个相同echarts图表


Posted in Javascript onJuly 20, 2020

在开发过程中我们常常需要,在一个页面中使用相同的图表来展示同级别的多个事物(如:同级别的多个不同id的仓库、同级别的多个不同id的设备等)。

在Vue 中实现循环渲染多个相同echarts图表

上图效果实现代码:

<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图表就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jQuery右键菜单contextMenu使用实例
Sep 28 Javascript
jQuery实现用户注册的表单验证示例
Aug 28 Javascript
jquery模拟SELECT下拉框取值效果
Oct 23 Javascript
Javascript验证上传图片大小[前台处理]
Jul 18 Javascript
基于jQuery实现仿淘宝套餐选择插件
Mar 04 Javascript
jQuery使用Layer弹出层插件闪退问题
Dec 22 Javascript
React diff算法的实现示例
Apr 20 Javascript
小程序图片剪裁加旋转的示例代码
Jul 10 Javascript
Vue-CLI 3.X 部署项目至生产服务器的方法
Mar 22 Javascript
postman自定义函数实现 时间函数的思路详解
Apr 17 Javascript
小程序接口的promise化的实现方法
Dec 11 Javascript
Vue项目中如何封装axios(统一管理http请求)
May 02 Vue.js
解决echarts数据二次渲染不成功的问题
Jul 20 #Javascript
详细分析vue表单数据的绑定
Jul 20 #Javascript
echarts 使用formatter 修改鼠标悬浮事件信息操作
Jul 20 #Javascript
mpvue 项目初始化及实现授权登录的实现方法
Jul 20 #Javascript
解决echarts中横坐标值显示不全(自动隐藏)问题
Jul 20 #Javascript
解决Echarts2竖直datazoom滑动后显示数据不全的问题
Jul 20 #Javascript
echarts实现获取datazoom的起始值(包括x轴和y轴)
Jul 20 #Javascript
You might like
提问的智慧
2006/10/09 PHP
用PHP实现 上一篇、下一篇的代码
2012/09/29 PHP
用PHP解决的一个栈的面试题
2014/07/02 PHP
PHP闭包实例解析
2014/09/08 PHP
Yii框架通过请求组件处理get,post请求的方法分析
2019/09/03 PHP
php设计模式之适配器模式实例分析【星际争霸游戏案例】
2020/04/07 PHP
jQuery formValidator表单验证插件开源了 含API帮助、源码、示例
2008/08/14 Javascript
解决jquery1.9不支持browser对象的问题
2013/11/13 Javascript
JavaScript制作淘宝星级评分效果的思路
2020/06/23 Javascript
JSON字符串和对象相互转换实例分析
2016/06/16 Javascript
两行代码轻松搞定JavaScript日期验证
2016/08/03 Javascript
关于微信jssdk实现多图片上传的一点心得分享
2016/12/13 Javascript
微信小程序商城项目之商品属性分类(4)
2017/04/17 Javascript
webpack4 处理SCSS的方法示例
2018/09/03 Javascript
详解react内联样式使用webpack将px转rem
2018/09/13 Javascript
原生JS实现汇率转换功能代码实例
2020/05/13 Javascript
vue中的计算属性和侦听属性
2020/11/06 Javascript
JS实现公告上线滚动效果
2021/01/10 Javascript
Python教程之全局变量用法
2016/06/27 Python
git进行版本控制心得详谈
2017/12/10 Python
django模板语法学习之include示例详解
2017/12/17 Python
python scrapy重复执行实现代码详解
2019/12/28 Python
numpy 矩阵形状调整:拉伸、变成一位数组的实例
2020/06/18 Python
浅谈django框架集成swagger以及自定义参数问题
2020/07/07 Python
python开发一个解析protobuf文件的简单编译器
2020/11/17 Python
移动端html5 meta标签的神奇功效
2016/01/06 HTML / CSS
Brasty波兰:香水、化妆品、手表网上商店
2019/04/15 全球购物
应届毕业生个人求职信范文
2014/01/29 职场文书
电子商务专业求职信
2014/03/08 职场文书
小学语文教研活动总结
2014/07/01 职场文书
撤诉申请书法院范本
2015/05/18 职场文书
2019个人工作态度自我评价
2019/04/24 职场文书
详解python中[-1]、[:-1]、[::-1]、[n::-1]使用方法
2021/04/25 Python
MySQL开启事务的方式
2021/06/26 MySQL
Pyhton爬虫知识之正则表达式详解
2022/04/01 Python
Java8利用Stream对列表进行去除重复的方法详解
2022/04/14 Java/Android