在vue中使用echarts(折线图的demo,markline用法)


Posted in Javascript onJuly 20, 2020

公司最近在用vue开发项目,项目接近尾声了,趁休息时间写点demo——

vue引入echarts(折线图的demo)

主要是解决引入echarts,markline的使用(基准线)

这是demo的效果图:

vue脚手架不多赘述

1.安装依赖

cnpm install echarts -S

2.在main.js中引入echarts

import echarts from 'echarts'

3.在main.js中安装

Vue.prototype.echarts = echarts;

一般来说能正常挂载上组件,就可以在页面中正常使用了

废话不多说上代码(因为自己也是小白阶段所以写的注释多了点,以便以后使用)

1.HTML部分

<template>
 <div class="content">
 <p class="prompt_p">   近七天温度折线图</p>
 <div class="seven_echarts" id="seven"> 
 </div>
 </div> 
</template>

2.js部分

<script type="text/javascript">
	export default{
		data(){
			return{	
  seven_chart:null,
				month_chart:null,
  seven_option : {
				 title : {
				 	 // text: '未来一周气温变化',//感觉头部有点乱,没使用自带的标题
				 // subtext: '纯属虚构'
   x: 'left',
   align: 'center'
   },
				 tooltip: {
				 trigger: 'axis'
				 },
				 legend: {
				 data:['最高气温','最低气温',]
				 },
				 grid: {
				 left: '3%',
				 right: '4%',
				 bottom: '3%',
				 containLabel: true
				 },
				 toolbox: {
				 feature: {
				  magicType: {type: ['line', 'bar']},//柱状图和西和折线图切换
				  restore: {},//刷新
				  saveAsImage: {},//将图表以折线图的形式展现
				 }
				 },
				 xAxis: {
				 type: 'category',
				 boundaryGap: false,
				 data: ["11-26","11-27","11-28","11-29","11-30","12-01","12-02"]
				 },
				 yAxis: {
				 	name:"℃",
				 nameLocation: 'end',
				 	type: 'value',
				 axisLabel: {
				  formatter: '{value} '
				 }
				 },
				 series: [
				 		{
				  name:'最低气温',
				  type:'line',
				  data:[0,-1,-3,-4,0,-2,-4],
				  lineStyle:{//设置折线色颜色
   				color:'#3f89ec'
 					},
 					itemStyle:{//设置折线折点的颜色
						  normal : {
						  color:'#3f89ec'
						 }
 					}
				 },
				 	{
				  name:'最高气温',
				  type:'line',
				  data:[9,10,6,7,12,11,8],
				  lineStyle:{//设置折线色颜色
  			 		color:'black'
 					},
 					itemStyle:{//设置折线折点的颜色
						  normal : {
						  color:'black'
						 }
 					}			  
				 },
				 {
				  name:'平行于y轴的趋势线',
				  type:'line',
				  markLine: {
				  name:'aa',
				  data: [
					  {
	 							name: '0℃标准线',
	 								yAxis: 0,
	 								 lineStyle:{//设置折线色颜色
	   							color:'red'
	 								},
	 							},
 							],
 							symbol: ['arrow', 'none'],//将箭头向左 默认值是向右的
 							label:{
 								show:true,
  					position:'middle',//markline描述位于中间 right,left,middle
  					formatter: '{b}: {c}',//显示name中的描述
								}

				  }
				 }
				 
				 ],
				},
			}
		},
		mounted:function (){
			this.get_echarts();
		},
		methods:{	
			get_echarts:function(){
				this.seven_chart = this.echarts.init(document.getElementById("seven"));
				// 把配置和数据放这里
				this.seven_chart.setOption(this.seven_option)  
			}
 },
 beforeDestroy() {
  if (!this.seven_chart) { return }
  this.seven_chart.dispose();
  this.seven_chart = null;
 },
	}
</script>

3.css部分

<style type="text/css">
.content{
 width: 100%;
}
.content p{
 margin-top: 1rem;
 font-size: 0.4rem;
 color: #666666;
}
.seven_echarts{
 height: 11rem;
 width: 94%;
}
</style>

好了结束,本人目前还是前端的小白,如有错误欢迎指正,以后会不定期更新哟!

补充知识:Echarts中有多条曲线,数据精度为小数时,画线部分与小数刻度显示不准确

最近遇到了一个问题就是 多条曲线,数据精度为小数时,画线部分与小数刻度显示不怎么准确,但是单条曲线的时候就没问题

// stack: ‘总量', //此处注释掉 这个问题 就解决了 所有的都要注释掉

series: [
 {
 name: 'line1',
 type: 'line',
 // stack: '总量',  //此处注释掉
 data: this.lineData.series[0].data  //data中包含带有小数的数据
 },
 {
 name: 'line2',
 type: 'line',
 // stack: '总量',  //此处注释掉
 data: this.lineData.series[1].data  //data中包含带有小数的数据
 }
]

如果还有什么问题,大家留言一起讨论。

以上这篇在vue中使用echarts(折线图的demo,markline用法)就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript 二维数组的实现与应用
Mar 16 Javascript
基于JQuery.timer插件实现一个计时器
Apr 25 Javascript
jQuery插件ajaxFileUpload实现异步上传文件效果
Apr 14 Javascript
Javascript编写2048小游戏
Jul 07 Javascript
javascript学习笔记_浅谈基础语法,类型,变量
Sep 19 Javascript
实现隔行换色效果的两种方式【实用】
Nov 27 Javascript
详解AngularJS ui-sref的简单使用
Apr 24 Javascript
web前端vue之vuex单独一文件使用方式实例详解
Jan 11 Javascript
js中如何完美的解析数据
Mar 18 Javascript
微信小程序实现用table显示数据库反馈的多条数据功能示例
May 07 Javascript
Node.js设置定时任务之node-schedule模块的使用详解
Apr 28 Javascript
Vue+axios封装请求实现前后端分离
Oct 23 Javascript
微信小程序实现时间戳格式转换
Jul 20 #Javascript
解决Vue + Echarts 使用markLine标线(precision精度问题)
Jul 20 #Javascript
Jquery如何使用animation动画效果改变背景色的代码
Jul 20 #jQuery
解决echarts echarts数据动态更新和dataZoom被重置问题
Jul 20 #Javascript
JavaScript如何实现监听键盘输入和鼠标监点击
Jul 20 #Javascript
解决echarts vue数据更新,视图不更新问题(echarts嵌在vue弹框中)
Jul 20 #Javascript
基于Echarts图表在div动态切换时不显示的解决方式
Jul 20 #Javascript
You might like
php实现按照权重随机排序数据的方法
2015/01/09 PHP
PHP实现基于状态的责任链审批模式详解
2019/05/31 PHP
Javascript UrlDecode函数代码
2010/01/09 Javascript
jQuery EasyUI中对表格进行编辑的实现代码
2010/06/10 Javascript
jquery选择器排除某个DOM元素的方法(实例演示)
2014/04/25 Javascript
jquery实现带二级菜单的导航示例
2014/04/28 Javascript
JavaScript实现在数组中查找不同顺序排列的字符串
2014/09/26 Javascript
JavaScript实现数组在指定位置插入若干元素的方法
2015/04/06 Javascript
简介alert()与console.log()的不同
2015/08/26 Javascript
JS实现仿Windows经典风格的选项卡Tab切换代码
2015/10/20 Javascript
jQuery中数据缓存$.data的用法及源码完全解析
2016/04/29 Javascript
js仿淘宝评价评分功能
2017/02/28 Javascript
详解vue2.0 使用动态组件实现 Tab 标签页切换效果(vue-cli)
2017/08/30 Javascript
Vue实现移动端页面切换效果【推荐】
2018/11/13 Javascript
JS闭包原理与应用经典示例
2018/12/20 Javascript
vue项目打包之后背景样式丢失的解决方案
2019/01/17 Javascript
vue中英文切换实例代码
2020/01/21 Javascript
Python  __getattr__与__setattr__使用方法
2008/09/06 Python
Web服务器框架 Tornado简介
2014/07/16 Python
python中Flask框架简单入门实例
2015/03/21 Python
Python for Informatics 第11章之正则表达式(二)
2016/04/21 Python
Python如何通过subprocess调用adb命令详解
2017/08/27 Python
Python3实现的判断环形链表算法示例
2019/03/07 Python
python ImageDraw类实现几何图形的绘制与文字的绘制
2020/02/26 Python
Elasticsearch py客户端库安装及使用方法解析
2020/09/14 Python
css3中flex布局宽度不生效的解决
2020/12/09 HTML / CSS
芬兰设计商店美国:Finnish Design Shop US
2019/03/25 全球购物
迟到检讨书大全
2014/01/25 职场文书
物理专业本科生自荐信
2014/01/30 职场文书
毕业生欢送会主持词
2014/03/31 职场文书
小学综合实践活动总结
2014/07/07 职场文书
中秋节国旗下演讲稿
2014/09/13 职场文书
2014年餐厅服务员工作总结
2014/11/18 职场文书
严以律己专题学习研讨会发言材料
2015/11/09 职场文书
如何解决php-fpm启动不了问题
2021/11/17 PHP
Redis基本数据类型哈希Hash常用操作命令
2022/06/01 Redis