在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 相关文章推荐
Prototype Hash对象 学习
Jul 19 Javascript
javascript new一个对象的实质
Jan 07 Javascript
js控制滚动条缓慢滚动到顶部实现代码
Mar 20 Javascript
JQuery对表格进行操作的常用技巧总结
Apr 23 Javascript
javascript学习笔记(四)function函数部分
Sep 30 Javascript
jQuery事件绑定和委托实例
Nov 25 Javascript
javascript检测移动设备横竖屏
May 21 Javascript
Three.js获取鼠标点击的三维坐标示例代码
Mar 24 Javascript
angular2路由切换改变页面title的示例代码
Aug 23 Javascript
vue打包使用Nginx代理解决跨域问题
Aug 27 Javascript
jQuery+Datatables实现表格批量删除功能【推荐】
Oct 24 jQuery
vue和iview实现Scroll 数据无限滚动功能
Oct 31 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
php adodb连接不同数据库
2009/03/19 PHP
在smarty模板中使用PHP函数的方法
2011/04/23 PHP
destoon实现调用当前栏目分类及子分类和三级分类的方法
2014/08/21 PHP
PHP中的output_buffering详细介绍
2014/09/27 PHP
详解PHP中的状态模式编程
2015/08/11 PHP
PHP7匿名类用法分析
2016/09/26 PHP
PHP实现字符串大小写转函数的功能实例
2019/02/06 PHP
PHP正则验证字符串是否为数字的两种方法并附常用正则
2019/02/27 PHP
php统计数组不同元素的个数的实例方法
2019/09/26 PHP
php文件上传原理与实现方法详解
2019/12/20 PHP
JavaScript获取GridView中用户点击控件的行号,列号
2009/04/14 Javascript
javascript禁止访客复制网页内容的实现代码
2015/08/05 Javascript
js实现网页多级级联菜单代码
2015/08/20 Javascript
常用javascript表单验证汇总
2020/07/20 Javascript
全面详细的jQuery常见开发技巧手册
2016/02/21 Javascript
Vue.js表单控件实践
2016/10/27 Javascript
详解nodejs微信公众号开发——5.素材管理接口
2017/04/11 NodeJs
node实现基于token的身份验证
2018/04/09 Javascript
详解Vue+axios+Node+express实现文件上传(用户头像上传)
2018/08/10 Javascript
Angular5中状态管理的实现
2018/09/03 Javascript
Cookbook组件形式:优化 Vue 组件的运行时性能
2018/11/25 Javascript
jQuery实现简单的Ajax调用功能示例
2019/02/15 jQuery
Python合并字符串的3种方法
2015/05/21 Python
Python中列表和元组的使用方法和区别详解
2020/12/30 Python
python实现多层感知器
2019/01/18 Python
python opencv 读取图片 返回图片某像素点的b,g,r值的实现方法
2019/07/03 Python
python监控进程状态,记录重启时间及进程号的实例
2019/07/15 Python
Django 后台带有字典的列表数据与页面js交互实例
2020/04/03 Python
python 在sql语句中使用%s,%d,%f说明
2020/06/06 Python
OpenCV4.1.0+VS2017环境配置的方法步骤
2020/07/09 Python
CSS3近阶段篇之酷炫的3D旋转透视
2016/04/28 HTML / CSS
你可能不熟练的十个前端HTML5经典面试题
2018/07/03 HTML / CSS
护士2014年终工作总结
2014/11/11 职场文书
新党员入党决心书
2015/09/22 职场文书
关于办理居住证的介绍信模板
2019/11/27 职场文书
7个关于Python的经典基础案例
2021/11/07 Python