在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 validate.js表单验证的基本用法入门
May 13 Javascript
jQuery源码分析-01总体架构分析
Nov 14 Javascript
jquery搜索框效果实现方法
Jan 16 Javascript
jQuery判断一个元素是否可见的方法
Jun 05 Javascript
jQuery实现点击小图片淡入淡出显示大图片特效
Sep 09 Javascript
跟我学习javascript创建对象(类)的8种方法
Nov 20 Javascript
全面解析DOM操作和jQuery实现选项移动操作代码分享
Jun 07 Javascript
vue实现添加标签demo示例代码
Jan 21 Javascript
微信小程序自定义导航隐藏和显示功能
Jun 13 Javascript
微信小程序基于picker实现级联菜单
Feb 15 Javascript
js实现翻牌小游戏
Jul 31 Javascript
js节流防抖应用场景,以及在vue中节流防抖的具体实现操作
Sep 21 Javascript
解决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
模拟OICQ的实现思路和核心程序(一)
2006/10/09 PHP
使用Curl进行抓取远程内容时url中文编码问题示例探讨
2013/10/29 PHP
微信扫描二维码登录网站代码示例
2013/12/30 PHP
PHP 实现的将图片转换为TXT
2015/10/21 PHP
示例详解Laravel重置密码代码重构
2016/08/10 PHP
laravel 根据不同组织加载不同视图的实现
2019/10/14 PHP
一些常用的JS功能函数代码
2009/06/23 Javascript
jquery解析JSON数据示例代码
2014/03/17 Javascript
JavaScript异步回调的Promise模式封装实例
2014/06/07 Javascript
JavaScript实现的双向跨域插件分享
2015/01/31 Javascript
学习JavaScript编程语言的8张思维导图分享
2015/03/27 Javascript
jQuery实现div跟随鼠标移动
2020/08/20 jQuery
实现div内部滚动条滚动到底部和顶部的代码
2017/11/15 Javascript
浅谈angular4实际项目搭建总结
2017/12/01 Javascript
jquery应用实例分享_实现手风琴特效
2018/02/01 jQuery
JS前端知识点 运算符优先级,URL编码与解码,String,Math,arguments操作整理总结
2019/06/27 Javascript
js+css实现全屏侧边栏
2020/06/16 Javascript
Python Web框架Flask信号机制(signals)介绍
2015/01/01 Python
python使用socket连接远程服务器的方法
2015/04/29 Python
python 3.5实现检测路由器流量并写入txt的方法实例
2017/12/17 Python
Python+树莓派+YOLO打造一款人工智能照相机
2018/01/02 Python
python简单实现操作Mysql数据库
2018/01/29 Python
浅谈Python基础—判断和循环
2019/03/22 Python
django做form表单的数据验证过程详解
2019/07/26 Python
纯CSS绘制漂亮的圆形图案效果
2014/05/07 HTML / CSS
HTML5边玩边学(2)基础绘图实现方法
2010/09/21 HTML / CSS
SmartBuyGlasses丹麦:网上购买名牌太阳镜、眼镜和隐形眼镜
2016/10/01 全球购物
英国手机零售商:Carphone Warehouse
2018/06/06 全球购物
个人能力自我鉴赏
2014/01/25 职场文书
校园歌咏比赛主持词
2014/03/18 职场文书
竞聘书模板
2014/03/31 职场文书
街道党风廉政建设调研报告
2015/01/01 职场文书
关于清明节的演讲稿2015
2015/03/18 职场文书
毕业论文致谢词
2015/05/14 职场文书
养成教育工作总结
2015/08/13 职场文书
基于Redis实现分布式锁的方法(lua脚本版)
2021/05/12 Redis