在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的给文章加入关键字链接
Oct 26 Javascript
JavaScript常用脚本汇总(一)
Mar 04 Javascript
使用JQuery实现的分页插件分享
Nov 05 Javascript
JAVA Web实时消息后台服务器推送技术---GoEasy
Nov 04 Javascript
Angular中支持SCSS的方法
Nov 18 Javascript
基于Vue2.X的路由和钩子函数详解
Feb 09 Javascript
vue页面切换到滚动页面显示顶部的实例
Mar 13 Javascript
jQuery实现鼠标点击处心形漂浮的炫酷效果示例
Apr 12 jQuery
ES10 特性的完整指南小结
Mar 04 Javascript
JS添加或删除HTML dom元素的方法实例分析
Mar 05 Javascript
vue+导航锚点联动-滚动监听和点击平滑滚动跳转实例
Nov 13 Javascript
浅谈react useEffect闭包的坑
Jun 08 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
php zend解密软件绿色版测试可用
2008/04/14 PHP
php+mysql写的简单留言本实例代码
2008/07/25 PHP
如何判断php数组的维度
2013/06/10 PHP
destoon实现不同会员组公司名称显示不同的颜色的方法
2014/08/22 PHP
一个经典的PHP验证码类分享
2014/11/18 PHP
PHP树的深度编历生成迷宫及A*自动寻路算法实例分析
2015/03/10 PHP
php校验公钥是否可用的实例方法
2019/09/17 PHP
通过js脚本复制网页上的一个表格的不错实现方法
2006/12/29 Javascript
datePicker——日期选择控件(with jquery)
2007/02/20 Javascript
javascript检测浏览器flash版本的实现代码
2011/12/06 Javascript
jQuery.Validate验证库的使用介绍
2013/04/26 Javascript
调试代码导致IE出错的避免方法
2014/04/04 Javascript
5种处理js跨域问题方法汇总
2014/12/04 Javascript
JavaScript通过字典进行字符串翻译转换的方法
2015/03/19 Javascript
javascript下使用Promise封装FileReader
2016/02/19 Javascript
原生JS封装ajax 传json,str,excel文件上传提交表单(推荐)
2016/06/21 Javascript
浅谈javascript运算符——条件,逗号,赋值,()和void运算符
2016/07/15 Javascript
Nuxt.js SSR与权限验证的实现
2018/11/21 Javascript
koa+jwt实现token验证与刷新功能
2019/05/30 Javascript
Node使用Selenium进行前端自动化操作的代码实现
2019/10/10 Javascript
js 对象使用的小技巧实例分析
2019/11/08 Javascript
[57:50]DOTA2上海特级锦标赛主赛事日 - 4 胜者组决赛Secret VS Liquid第二局
2016/03/05 DOTA
python中stdout输出不缓存的设置方法
2014/05/29 Python
wxPython框架类和面板类的使用实例
2014/09/28 Python
使用Python实现一个简单的项目监控
2015/03/31 Python
利用Hyperic调用Python实现进程守护
2018/01/02 Python
python pytest进阶之conftest.py详解
2019/06/27 Python
500行python代码实现飞机大战
2020/04/24 Python
Django 构建模板form表单的两种方法
2020/06/14 Python
美国渔具店:FishUSA
2019/08/07 全球购物
俄语地区最大的中国商品在线购物网站之一:Umka Mall
2019/11/03 全球购物
马来西亚网上花店:FlowerAdvisor马来西亚
2020/01/03 全球购物
在c#中using和new这两个关键字有什么意义
2013/05/19 面试题
同步和异步有何异同,在什么情况下分别使用他们
2013/04/09 面试题
计算机网络及管理学专业求职信
2014/06/05 职场文书
天坛导游词
2015/02/02 职场文书