在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的eval JSON object问题
Nov 15 Javascript
js 操作select相关方法函数
Dec 06 Javascript
Jquery插件编写简明教程
Mar 25 Javascript
JQuery设置获取下拉菜单某个选项的值(比较全)
Aug 05 Javascript
JavaScript组合拼接字符串的效率对比测试
Nov 06 Javascript
jQuery选择器querySelector的使用指南
Jan 23 Javascript
EasyUi datagrid 实现表格分页
Feb 10 Javascript
Bootstrap表单Form全面解析
Jun 13 Javascript
全面了解JavaScript对象进阶
Jul 19 Javascript
jquery实现点击页面回到顶部
Nov 23 Javascript
Node.js中的child_process模块详解
Jun 08 Javascript
ES6中let 和 const 的新特性
Sep 03 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快速url重写更新版[需php 5.30以上]
2010/04/25 PHP
PHPExcel读取Excel文件的实现代码
2011/12/06 PHP
基于curl数据采集之单页面并行采集函数get_htmls的使用
2013/04/28 PHP
获取PHP警告错误信息的解决方法
2013/06/03 PHP
PHP实现递归的三种方法
2020/07/04 PHP
PHP常用字符串输出方法分析(echo,print,printf及sprintf)
2021/03/09 PHP
Javascript中Eval函数的使用
2010/03/23 Javascript
jQuery操作select下拉框的text值和value值的方法
2014/05/31 Javascript
jQuery异步加载数据并添加事件示例
2014/08/24 Javascript
javascript实现在指定元素中垂直水平居中
2015/09/13 Javascript
详解JavaScript对象序列化
2016/01/19 Javascript
javascript中的3种继承实现方法
2016/01/27 Javascript
纯JS代码实现一键分享功能
2016/04/20 Javascript
EsLint入门学习教程
2017/02/17 Javascript
JavaScript实现提交模式窗口后刷新父窗口数据的方法
2017/06/16 Javascript
JS实现图片预览的两种方式
2017/06/27 Javascript
详解vue.js数据传递以及数据分发slot
2018/01/20 Javascript
vue项目中公用footer组件底部位置的适配问题
2018/05/10 Javascript
浅谈Angular7 项目开发总结
2018/12/19 Javascript
jquery多级树形下拉菜单的实例代码
2019/07/09 jQuery
微信小程序用canvas画图并分享
2020/03/09 Javascript
用python实现的可以拷贝或剪切一个文件列表中的所有文件
2009/04/30 Python
Python深入学习之对象的属性
2014/08/31 Python
Python实现注册登录系统
2017/08/08 Python
Python编程实现蚁群算法详解
2017/11/13 Python
hmac模块生成加入了密钥的消息摘要详解
2018/01/11 Python
在flask中使用python-dotenv+flask-cli自定义命令(推荐)
2020/01/05 Python
Python如何在main中调用函数内的函数方式
2020/06/01 Python
Tensorflow tensor 数学运算和逻辑运算方式
2020/06/30 Python
台湾饭店和机票预订网站:Expedia台湾
2016/08/05 全球购物
瑞典香水、须后水和美容产品购物网站:Parfym-Klick.se
2019/12/29 全球购物
数控机械专业个人的自我评价
2014/01/02 职场文书
银行青年文明号事迹材料
2014/05/31 职场文书
单位病假条范文
2015/08/17 职场文书
观看《杨善洲》宣传教育片心得体会
2016/01/23 职场文书
oracle索引总结
2021/09/25 Oracle