在vue中使用Echarts利用watch做动态数据渲染操作


Posted in Javascript onJuly 20, 2020

依旧直接上代码~

首先安装引入Echarts,我是直接把Echarts挂到VUE全局变量上了

//引入echarts
import Vue from 'vue';
import echarts from 'echarts';
Vue.prototype.$echarts = echarts;
<template>
 <div class="demo-container">
  <div ref="chart_wrap" class="chart_wrap"></div>
 </div>
</template>
<script>
export default {
 name: "demo",
 computed: {},
 data() {
  return {
   seriesData: []
  };
 },
 created() {},
 mounted() {
  this.initCharts();
  setTimeout(() => {
   this.seriesData.push({
    name: "销量",
    type: "bar",
    data: [5, 20, 36, 10, 10, 20]
   });
  }, 5000);
 },
 watch: {
  seriesData(val, oldVal) {
   console.log(1111, val, oldVal);
   this.setOptions(val);
  }
 },
 methods: {
  initCharts() {
   this.chart = this.$echarts.init(this.$refs.chart_wrap);
   this.setOptions();
  },
  setOptions(series) {
   console.log(22222,this.chart,series);
   this.chart.setOption({
    title: {
     text: "ECharts 入门示例"
    },
    tooltip: {},
    legend: {
     data: ["销量"]
    },
    xAxis: {
     data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
    },
    yAxis: {},
    series: series
   });
  }
 }
};
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
.chart_wrap {
 height: 400px;
}
</style>

补充知识:echarts-循环生成图

1、问题背景

利用for循环生产多个气泡图,并且每个气泡都可以点击

2、实现源码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>echarts-循环生成图</title>
		<link rel="shortcut icon" href="../js/echarts-2.2.7/doc/asset/ico/favicon.png">
		<script type="text/javascript" src="../js/echarts-2.2.7/doc/asset/js/jquery.min.js" ></script>
		<script type="text/javascript" src="../js/echarts-2.2.7/doc/example/www2/js/echarts-all.js" ></script>
		
		<style>
			body,html,#div-chart{
				width: 99%;
				height: 100%;
				font-family: "微软雅黑";
				font-size: 12px;
			}
			.chart{
				width: 1200px;
				height: 100px;
			}
		</style>
		<script>
			$(document).ready(function(){
				buildChart();
				buildChartJS();
			});
			
			function buildChart()
			{
				$("#div-chart").empty();
				var chart = "";
				for(var i=0;i<8;i++)
				{
					chart += "<div id='chart"+i+"' class='chart'></div>"; 
				}
				$("#div-chart").append(chart);
			}
			
			function buildChartJS()
			{
				for(var i=0;i<8;i++)
				{
					var chart = document.getElementById('chart'+i); 
	        var echart = echarts.init(chart); 
	         
	        var option = {
					  legend: {
					    data:['scatter1'],
					    show:false
					  },
					  splitLine:{
					
  show:false
					
 },
					  grid:{
					    borderWidth:0
					  },
					  xAxis : [
					    {
					    	show:false,
					      type : 'value',
					      splitNumber: 2,
					      scale: true,
					      axisLine:{
					      	show:false
					      },
					      splitLine:{
							

  show:false
							
 },
							  axisTick:{
							  	 show:false
							  }
					    }
					  ],
					  yAxis : [
					    {
					    	show:false,
					      type : 'value',
					      splitNumber: 2,
					      scale: true,
					      axisLine:{
					      	show:false
					      },
					      splitLine:{
							

  show:false
							
 }
					    }
					  ],
					  series : [
					    {
					      name:'scatter1',
					      type:'scatter',
					      symbol: 'emptyCircle',
					      symbolSize: 20,
					      itemStyle : { 
					      	normal: {
					      		color:'#0068B7',
					      		label:{
					      			show: true, 
					      			position: 'inside',
							      	textStyle : {
					              fontSize : 26,
					              fontFamily : '微软雅黑',
					              color:'#0068B7'
					            }
					      		}
					      	}
					      },
					      data: randomDataArray()
					    }
					  ]
					}; 
	         
          function eConsole(param) 
          {
          	alert(param.value);
            console.dir(param);
          }
          echart.on("click", eConsole);
	        echart.setOption(option); 
				}
			}
			
			function randomDataArray() 
			{
			  var d = [];
			  var arr = [3,5,7,9,10,1,2,4,8,6];
			  var len = 10;
			  for(var i=0;i<len;i++)
			  {
			  	d.push([i+1,0,arr[i],]);
			  }
			  
			  return d;
			}
		</script>
	</head>
	<body>
		<div id="div-chart">
			
		</div>
	</body>
</html>

3、实现结果

在vue中使用Echarts利用watch做动态数据渲染操作

以上这篇在vue中使用Echarts利用watch做动态数据渲染操作就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript XML数据显示为HTML一例
Dec 23 Javascript
js jquery获取随机生成id的服务器控件的三种方法
Jul 11 Javascript
jquery easyui滚动条部分设置介绍
Sep 12 Javascript
js打开新窗口方法整理
Feb 17 Javascript
JavaScript实现存储HTML字符串示例
Apr 21 Javascript
js仿土豆网带缩略图的焦点图片切换效果实现方法
Feb 23 Javascript
简述AngularJS相关的一些编程思想
Jun 23 Javascript
介绍一个简单的JavaScript类框架
Jun 24 Javascript
Javascript将JSON日期格式化
Aug 23 Javascript
原生js实现无缝轮播图效果
Jan 11 Javascript
使用vuex解决刷新页面state数据消失的问题记录
May 08 Javascript
微信小程序设置滚动条过程详解
Jul 25 Javascript
vue-router之解决addRoutes使用遇到的坑
Jul 19 #Javascript
解决vue+router路由跳转不起作用的一项原因
Jul 19 #Javascript
解决vue项目router切换太慢问题
Jul 19 #Javascript
解决elementUI 切换tab后 el_table 固定列下方多了一条线问题
Jul 19 #Javascript
vue2.* element tabs tab-pane 动态加载组件操作
Jul 19 #Javascript
解决vue中el-tab-pane切换的问题
Jul 19 #Javascript
解决echarts图表使用v-show控制图表显示不全的问题
Jul 19 #Javascript
You might like
第十五节--Zend引擎的发展
2006/11/16 PHP
PHP反向代理类代码
2014/08/15 PHP
php实现图片等比例缩放代码
2015/07/23 PHP
WordPress中邮件的一些修改和自定义技巧
2015/12/15 PHP
Yii核心验证器api详解
2016/11/23 PHP
JavaScript实现N皇后问题算法谜题解答
2014/12/29 Javascript
JS设置网页图片vspace和hspace属性的方法
2015/04/01 Javascript
AngularJS 使用$sce控制代码安全检查
2016/01/05 Javascript
浅谈angular4实际项目搭建总结
2017/12/01 Javascript
Material(包括Material Icon)在Angular2中的使用详解
2018/02/11 Javascript
vue采用EventBus实现跨组件通信及注意事项小结
2018/06/14 Javascript
微信小程序wx.uploadfile 本地文件转base64的实现代码
2018/06/28 Javascript
vue 中的keep-alive实例代码
2018/07/20 Javascript
layui复选框限制选择个数的方法
2019/09/18 Javascript
react antd表格中渲染一张或多张图片的实例
2020/10/28 Javascript
python编程实现12306的一个小爬虫实例
2017/12/27 Python
使用pandas将numpy中的数组数据保存到csv文件的方法
2018/06/14 Python
详解Python下Flask-ApScheduler快速指南
2018/11/04 Python
Python同步遍历多个列表的示例
2019/02/19 Python
Django页面数据的缓存与使用的具体方法
2019/04/23 Python
解决python-docx打包之后找不到default.docx的问题
2020/02/13 Python
详解HTML5中div和section以及article的区别
2015/07/14 HTML / CSS
网络通讯中,端口有什么含义,端口的取值范围
2012/11/23 面试题
毕业生毕业总结的自我评价范文
2013/11/02 职场文书
初中生三年学习生活的自我评价
2013/11/03 职场文书
清扬洗发水广告词
2014/03/14 职场文书
小学生我的梦想演讲稿
2014/08/21 职场文书
查摆问题整改措施范文
2014/10/11 职场文书
民事诉讼代理授权委托书
2014/10/11 职场文书
个人事迹材料范文
2014/12/29 职场文书
幼儿教师辞职信
2015/02/27 职场文书
2015年党建工作总结
2015/03/30 职场文书
2019年共青团工作条例最新版
2019/11/12 职场文书
浅谈pytorch中stack和cat的及to_tensor的坑
2021/05/20 Python
在 Python 中利用 Pool 进行多线程
2022/04/24 Python
Android开发之底部导航栏的快速实现
2022/04/28 Java/Android