浅谈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 相关文章推荐
[HTML/CSS/Javascript]WWTJS
Sep 25 Javascript
javascript SocialHistory 检查访问者是否访问过某站点
Aug 02 Javascript
form表单只提交数据而不进行页面跳转的解决方案
Sep 18 Javascript
浅析JavaScript中两种类型的全局对象/函数
Dec 05 Javascript
JavaScript中reduce()方法的使用详解
Jun 09 Javascript
javascript学习笔记之函数定义
Jun 25 Javascript
javascript仿百度输入框提示自动下拉补全
Jan 07 Javascript
Laydate时间组件在火狐浏览器下有多时间输入框时只能给第一个输入框赋值的解决方法
Aug 18 Javascript
用瀑布流的方式在网页上插入图片的简单实现方法
Sep 23 Javascript
用v-html解决Vue.js渲染中html标签不被解析的问题
Dec 14 Javascript
基于jstree使用AJAX请求获取数据形成树
Aug 29 Javascript
Electron 如何调用本地模块的方法
Feb 01 Javascript
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
与空气斗智斗勇的经典《Overlord》,传说中的“无稽之谈”
2020/04/09 日漫
PHP+DBM的同学录程序(1)
2006/10/09 PHP
学习php过程中的一些注意点的总结
2013/10/25 PHP
php实现每天自动变换随机问候语的方法
2015/05/12 PHP
php+ajax实现商品对比功能示例
2019/04/13 PHP
javascript 选择文件夹对话框(web)
2009/07/07 Javascript
javascript 解析后的xml对象的读取方法细解
2009/07/25 Javascript
5个书写JavaScript代码的坏习惯,看看你中枪了没?
2014/11/06 Javascript
node.js中的fs.truncate方法使用说明
2014/12/15 Javascript
javascript实现移动端上的触屏拖拽功能
2016/03/04 Javascript
javascript实现鼠标点击页面 移动DIV
2016/12/02 Javascript
原生js实现可拖动的登录框效果
2017/01/21 Javascript
Bootstrap导航简单实现代码
2017/03/06 Javascript
ES6新特性四:变量的解构赋值实例
2017/04/21 Javascript
Bootstrap响应式导航由768px变成992px的实现代码
2017/06/15 Javascript
bootstrap paginator分页前后台用法示例
2017/06/17 Javascript
详解在vue-cli项目中安装node-sass
2017/06/21 Javascript
vue实现添加与删除图书功能
2018/10/07 Javascript
微信端调取相册和摄像头功能,实现图片上传,并上传到服务器
2019/05/16 Javascript
JS中封装axios来管控api的2种方式
2019/09/11 Javascript
python3.5仿微软计算器程序
2020/03/30 Python
Python 专题五 列表基础知识(二维list排序、获取下标和处理txt文本实例)
2017/03/20 Python
Python实现mysql数据库更新表数据接口的功能
2017/11/19 Python
Python 查看文件的编码格式方法
2017/12/21 Python
opencv python 2D直方图的示例代码
2018/07/20 Python
从0开始的Python学习016异常
2019/04/08 Python
解决Python paramiko 模块远程执行ssh 命令 nohup 不生效的问题
2020/07/14 Python
移动Web—CSS为Retina屏幕替换更高质量的图片
2012/12/24 HTML / CSS
如何让Java程序执行效率更高
2014/06/25 面试题
捷科时代的软件测试笔试题
2015/11/09 面试题
寄语是什么意思
2014/04/10 职场文书
环保建议书300字
2014/05/14 职场文书
求职信内容怎么写
2014/05/26 职场文书
七年级上册语文教学计划
2015/01/22 职场文书
2016年情人节广告语
2016/01/28 职场文书
入团申请书格式
2019/06/20 职场文书