浅谈vue单页面中有多个echarts图表时的公用代码写法


Posted in Javascript onJuly 19, 2020

html中:

<div class="charts1"/>
  <div class="charts2"/>
  <div class="charts3"/>
  <div class="charts4"/>
  <div class="charts5"/>
  <div class="charts6"/>
  <div class="charts7"/>

数据处理就不用提了。嗯,直接画图:

// 画 折线图
 drawLine() {
 // 数据处理的方法
  this.dealEchartsData()
  var myChartsArr = []
  for (var i = 1; i <= 7; i++) {
  this.myCharts = this.$echarts.init(document.getElementsByClassName('charts' + i)[0])
  myChartsArr.push(this.myCharts)
  var option = this.commonOption(this.myCharts, this.adnormalTypeSummery[i - 1], this.destArrAll[i - 1])
  // 为echarts对象加载数据 true 防止echarts数据叠加!!!
  this.myCharts.setOption(option, true)
  }
  window.onresize = function() { // 自适应
  for (var j = 0; j < myChartsArr.length; j++) {
   if (myChartsArr[j].resize()) {
   myChartsArr[j].resize()
   }
  }
  }
 },

公用部分:

// option 主体
 commonOption(myCharts, titleText, destData) {
  var option = {
  title: {
   text: titleText
  },
  tooltip: {
   trigger: 'axis',
   confine: true
  },
  legend: {
   type: 'scroll',
   width: '90%',
   top: '13%'
  },
  grid: {
   left: '3%',
   right: '4%',
   bottom: '2%',
   containLabel: true
  },
  toolbox: {
   right: '20',
   feature: {
   saveAsImage: {}
   }
  },
  xAxis: {
   type: 'category',
   boundaryGap: false,
   data: this.monthName
  },
  yAxis: {
   type: 'value'
  },
  series: destData
  }
  return option
 }

离开该页面时候摧毁:

destroyed() {
 if (this.myCharts) {
  this.myCharts.clear()
  this.myCharts.dispose()
  window.onresize = null
 }

补充知识:Vue + Echarts 图表展示 及 动态渲染

准备工作

安装echarts依赖

npm install echarts --save-dev

引入

(main.js)
import echarts from 'echarts'
Vue.prototype.$echarts = echarts;

开始撸代码

<template>
 <div class="peopleWrap">
 <h3>
  <i class="el-icon-position"></i>
  出入人员总数{{peopleSumTotal}}
 </h3>
 <div id="peopleSum" style="width: 180px;height: 270px"></div>
 </div>
</template>
<script>
export default {
// 接受父组件传来的参数【父传子props】
 props: ["peopleSumTotal"], 
 data() {
 return {
  peopleSumTotalArr: []
 };
 },
 watch: {
 // 监听参数变化
 peopleSumTotal: {
  handler(newVal, oldVal) {
  if (newVal != 0) {
   console.log(newVal);
   this.peopleSum(newVal);
  }
  }
 }
 },
 methods: {
 peopleSum(newVal) {
 // 引入 echarts
  var echarts = require("echarts");
  let peopleSum = echarts.init(document.getElementById("peopleSum"));
  //echsrts点击事件
  peopleSum.on("click", function(param) {
  console.log(param);
  console.log(param.data.name);
  console.log(param.data.value);
  console.log(param.data.userDefined);
  //$emit的第一个为传的参的名字,第二个为传的值 【子传父 this.$emit】
  _this.$emit("peopleSumtoparent", param.data); 
  });

//接受动态数据时需要在 this.$nextTick(()=>{})展示
  this.$nextTick(() => {
  let obj = {};
  obj.value = newVal;
  obj.name = newVal;
  this.peopleSumTotalArr.push(obj);

  let option = {
   legend: {
   orient: "vertical",
   left: 10,
   data: [""]
   },
   series: [
   {
    type: "pie",
    radius: ["50%", "70%"],
    avoidLabelOverlap: false,
    itemStyle: {
    // 普通样式。
    normal: {
     // 点的颜色。
     color: "#6998f7"
    },
    // 高亮样式。
    emphasis: {
     // 高亮时点的颜色。
     color: "#6998f7"
    }
    },
    label: {
    normal: {
     show: true,
     position: "center",
     textStyle: {
     fontSize: "20"
     }
    }
    },
    labelLine: {
    normal: {
     show: false
    }
    },
    data: this.peopleSumTotalArr //动态图表展示
   }
   ]
  };
  console.log("option", option);
  peopleSum.setOption(option);
  });
 }
 },
 mounted() {}
};
</script>
<style lang="scss" scoped>
</style>

以上这篇浅谈vue单页面中有多个echarts图表时的公用代码写法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
制作高质量的JQuery Plugin 插件的方法
Apr 20 Javascript
jQuery ready函数滥用分析
Feb 16 Javascript
node.js中的require使用详解
Dec 15 Javascript
jQuery编程中的一些核心方法简介
Aug 14 Javascript
基于bootstrap插件实现autocomplete自动完成表单
May 07 Javascript
Angular Module声明和获取重载实例代码
Sep 14 Javascript
javascript入门之string对象【新手必看】
Nov 22 Javascript
在网页中插入百度地图的步骤详解
Dec 02 Javascript
基于Javascript实现的不重复ID的生成器
Dec 25 Javascript
如何使用bootstrap框架 bootstrap入门必看!
Apr 13 Javascript
Angular限制input框输入金额(是小数的话只保留两位小数点)
Jul 13 Javascript
解决IE7中使用jQuery动态操作name问题
Aug 28 jQuery
echarts.js 动态生成多个图表 使用vue封装组件操作
Jul 19 #Javascript
JavaScript中reduce()的5个基本用法示例
Jul 19 #Javascript
JS中作用域以及变量范围分析
Jul 18 #Javascript
JS中的变量作用域(console版)
Jul 18 #Javascript
js里面的变量范围分享
Jul 18 #Javascript
理解Proxy及使用Proxy实现vue数据双向绑定操作
Jul 18 #Javascript
深入理解 ES6中的 Reflect用法
Jul 18 #Javascript
You might like
PhpDocumentor 2安装以及生成API文档的方法
2014/05/21 PHP
PHP中使用json数据格式定义字面量对象的方法
2014/08/20 PHP
php微信公众开发之获取周边酒店信息的方法
2014/12/22 PHP
兼容多浏览器的字幕特效Marquee的通用js类
2008/07/20 Javascript
jquery 将disabled的元素置为enabled的三种方法
2009/07/25 Javascript
js 表格隔行颜色
2009/12/02 Javascript
jQuery与ExtJS之选择实例分析
2010/08/19 Javascript
jquery中实现简单的tabs插件功能的代码
2011/03/02 Javascript
jquery弹出层类代码分享
2013/12/27 Javascript
jQuery实现倒计时按钮功能代码分享
2014/09/03 Javascript
jQuery动态修改超链接地址的方法
2015/02/13 Javascript
Bootstrap CSS组件之导航条(navbar)
2016/12/17 Javascript
vue下axios拦截器token刷新机制的实例代码
2020/01/17 Javascript
[01:03:50]DOTA2-DPC中国联赛 正赛 CDEC vs DLG BO3 第二场 2月7日
2021/03/11 DOTA
Python解释执行原理分析
2014/08/22 Python
Django1.3添加app提示模块不存在的解决方法
2014/08/26 Python
Python 快速实现CLI 应用程序的脚手架
2017/12/05 Python
python logging重复记录日志问题的解决方法
2018/07/12 Python
python 同时运行多个程序的实例
2019/01/07 Python
Python一行代码实现快速排序的方法
2019/04/30 Python
用python做游戏的细节详解
2019/06/25 Python
Django中Middleware中的函数详解
2019/07/18 Python
Python Django 实现简单注册功能过程详解
2019/07/29 Python
使用pytorch完成kaggle猫狗图像识别方式
2020/01/10 Python
联想墨西哥官方网站:Lenovo墨西哥
2016/08/17 全球购物
爱淘宝:淘宝网购物分享平台
2017/04/28 全球购物
俄罗斯香水和化妆品网上商店:NOTINO.ru
2019/12/17 全球购物
质检部经理岗位职责
2014/02/19 职场文书
幼儿园招生广告
2014/03/19 职场文书
小学优秀班集体申报材料
2014/05/25 职场文书
幸福终点站观后感
2015/06/04 职场文书
2016年“6.26”禁毒宣传月系列活动总结
2016/04/05 职场文书
人事行政部各岗位职责说明书!
2019/07/15 职场文书
公文写作:工伤事故分析报告怎么写?
2019/11/05 职场文书
如何在python中实现ECDSA你知道吗
2021/11/23 Python
redis protocol通信协议及使用详解
2022/07/15 Redis