浅谈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 相关文章推荐
实现复选框全选/全不选切换
Dec 23 Javascript
javascript学习笔记(十四) window对象使用介绍
Jun 20 Javascript
js substring从右边获取指定长度字符串(示例代码)
Dec 23 Javascript
jquery mobile界面数据刷新的实现方法
May 28 Javascript
Vue.js结合bootstrap实现分页控件
Mar 10 Javascript
关于Bootstrap按钮组件消除黄框的方法
May 19 Javascript
JavaScript 巧学巧用
May 23 Javascript
Vue组件教程之Toast(Vue.extend 方式)详解
Jan 27 Javascript
vue-cli2与vue-cli3在一台电脑共存的实现方法
Sep 25 Javascript
细说webpack6 Babel的使用详解
Sep 26 Javascript
vue 使用async写数字动态加载效果案例
Jul 18 Javascript
微信小程序实现分页加载效果
Nov 19 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
将数字格式的计算结果转为汉字格式
2006/10/09 PHP
使用Sphinx对索引进行搜索
2013/06/25 PHP
PHP获取远程图片并保存到本地的方法
2015/05/12 PHP
thinkphp制作404跳转页的简单实现方法
2016/09/22 PHP
PHP观察者模式定义与用法实例分析
2019/03/22 PHP
js编码、解码函数介绍及其使用示例
2013/09/05 Javascript
javascript实现保留两位小数的多种方法
2015/12/18 Javascript
轻松搞定jQuery.noConflict()
2016/02/15 Javascript
jquery表单插件Autotab使用方法详解
2016/06/24 Javascript
BootStrap modal模态弹窗使用小结
2016/10/26 Javascript
jQuery模拟完美实现经典FLASH导航动画效果【附demo源码下载】
2016/11/09 Javascript
浅谈JS读取DOM对象(标签)的自定义属性
2016/11/21 Javascript
详解ECharts使用心得总结
2016/12/06 Javascript
jQuery操作复选框(CheckBox)的取值赋值实现代码
2017/01/10 Javascript
node.js操作mysql简单实例
2017/05/25 Javascript
浅谈Vuex@2.3.0 中的 state 支持函数申明
2017/11/22 Javascript
基于vue-ssr服务端渲染入门详解
2018/01/08 Javascript
node.js中TCP Socket多进程间的消息推送示例详解
2018/07/10 Javascript
详解写好JS条件语句的5条守则
2019/02/28 Javascript
js重写alert事件(避免alert弹框标题出现网址)
2020/12/04 Javascript
Python中unittest用法实例
2014/09/25 Python
Python smtplib实现发送邮件功能
2018/05/22 Python
Pycharm使用远程linux服务器conda/python环境在本地运行的方法(图解))
2019/12/09 Python
python如何实现复制目录到指定目录
2020/02/13 Python
使用PyCharm官方中文语言包汉化PyCharm
2020/11/18 Python
Python实现疫情地图可视化
2021/02/05 Python
你不知道的葡萄干处理法、橙蜜处理法、二氧化碳酵母法
2021/03/17 冲泡冲煮
Prototype如何实现页面局部定时刷新
2013/08/06 面试题
生产管理的三大手法
2013/11/11 职场文书
物业招聘计划书
2014/01/10 职场文书
安全承诺书范文
2014/03/26 职场文书
教师节感谢信
2015/01/22 职场文书
2015年高校就业工作总结
2015/05/04 职场文书
Go语言带缓冲的通道实现
2021/04/26 Golang
OpenCV-Python实现轮廓拟合
2021/06/08 Python
python 多态 协议 鸭子类型详解
2021/11/27 Python