在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 相关文章推荐
js中关于String对象的replace使用详解
May 24 Javascript
基于javascript 闭包基础分享
Jul 10 Javascript
js innerHTML 改变div内容的方法
Aug 03 Javascript
JS中判断null、undefined与NaN的方法
Mar 24 Javascript
bootstrap table之通用方法( 时间控件,导出,动态下拉框, 表单验证 ,选中与获取信息)代码分享
Jan 24 Javascript
JavaScript获取ul中li个数的方法
Feb 13 Javascript
使用ajax的post同步执行(实现方法)
Dec 21 Javascript
vue实现循环切换动画
Oct 17 Javascript
浅谈JavaScript 代码整洁之道
Oct 23 Javascript
Vue 实时监听窗口变化 windowresize的两种方法
Nov 06 Javascript
ES6基础之默认参数值
Feb 21 Javascript
vue实现标签云效果的方法详解
Aug 28 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 一个页面执行时间类代码
2010/03/05 PHP
解析PHP中ob_start()函数的用法
2013/06/24 PHP
php计算税后工资的方法
2015/07/28 PHP
Javascript - HTML的request类
2006/07/15 Javascript
跨域表单提交状态的变相判断代码
2009/11/12 Javascript
js,jQuery 排序的实现代码,网页标签排序的实现,标签排序
2011/04/27 Javascript
jQuery调用AJAX时Get和post公用的乱码解决方法实例说明
2013/06/04 Javascript
jsPDF导出pdf示例
2014/05/02 Javascript
jQuery实现带动画效果的二级下拉导航方法
2015/03/11 Javascript
原生js实现的贪吃蛇网页版游戏完整实例
2015/05/18 Javascript
JS实现添加,替换,删除节点元素的方法
2016/06/30 Javascript
jquery实现网站列表切换效果的2种方法
2016/08/12 Javascript
利用Js的console对象,在控制台打印调式信息测试Js的实现
2016/11/26 Javascript
JS正则表达式修饰符global(/g)用法分析
2016/12/27 Javascript
jQuery动态追加页面数据以及事件委托详解
2017/05/06 jQuery
vue实现移动端图片裁剪上传功能
2020/08/18 Javascript
微信小程序日期选择器实例代码
2018/07/18 Javascript
详解Vue内部怎样处理props选项的多种写法
2018/11/06 Javascript
解决vant的Toast组件时提示not defined的问题
2020/11/11 Javascript
python写入中英文字符串到文件的方法
2015/05/06 Python
Python合并字典键值并去除重复元素的实例
2016/12/18 Python
python密码错误三次锁定(实例讲解)
2017/11/14 Python
Python文件打开方式实例详解【a、a+、r+、w+区别】
2019/03/30 Python
详解python持久化文件读写
2019/04/06 Python
PyQt4编程之让状态栏显示信息的方法
2019/06/18 Python
python 模拟创建seafile 目录操作示例
2019/09/26 Python
python 求定积分和不定积分示例
2019/11/20 Python
利用python3 的pygame模块实现塔防游戏
2019/12/30 Python
Restful_framework视图组件代码实例解析
2020/11/17 Python
计算机专业职业生涯规划范文
2014/01/19 职场文书
美术学专业求职信
2014/07/23 职场文书
小学教师师德整改措施
2014/09/29 职场文书
学习雷锋精神活动总结
2015/02/06 职场文书
教师辞职信范文
2015/02/28 职场文书
公司周年庆典致辞
2015/07/30 职场文书
导游词之千岛湖
2019/09/23 职场文书