在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 相关文章推荐
键盘 keycode的值 javascript时触发事件时很有用的要素
Nov 02 Javascript
JavaScript对象之间的转换 jQuery对象和原声DOM
Mar 07 Javascript
javascript中日期转换成时间戳的小例子
Mar 21 Javascript
怎么清空javascript数组
May 11 Javascript
动态加载dtree.js树treeview(示例代码)
Dec 17 Javascript
使用GruntJS构建Web程序之安装篇
Jun 04 Javascript
js事件监听器用法实例详解
Jun 01 Javascript
基于jQuery倒计时插件实现团购秒杀效果
May 13 Javascript
微信小程序 css使用技巧总结
Jan 09 Javascript
mac上node.js环境的安装测试
Jul 03 Javascript
AngularJS日程表案例详解
Aug 15 Javascript
微信小程序使用template标签实现五星评分功能
Nov 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
这部好评如潮的动漫 知名梗频出 但是画风劝退很多人
2020/03/08 日漫
pdo中使用参数化查询sql
2011/08/11 PHP
利用php获取服务器时间的实现代码
2013/06/07 PHP
关于php循环跳出的问题
2013/07/01 PHP
php单态设计模式(单例模式)实例
2014/11/18 PHP
基于ThinkPHP+uploadify+upload+PHPExcel 无刷新导入数据
2015/09/23 PHP
js TextArea的选中区域处理
2010/12/28 Javascript
ExtJS4中的requires使用方法示例介绍
2013/12/03 Javascript
nodejs实现黑名单中间件设计
2014/06/17 NodeJs
借助JavaScript脚本判断浏览器Flash Player信息的方法
2014/07/09 Javascript
script标签属性用type还是language
2015/01/21 Javascript
jQuery插件PageSlide实现左右侧栏导航菜单
2015/04/12 Javascript
常用的js验证和数据处理总结
2016/08/02 Javascript
jQuery实用密码强度检测
2017/03/02 Javascript
Vue.js自定义事件的表单输入组件方法
2018/03/08 Javascript
Angular父子组件通过服务传参的示例方法
2018/10/31 Javascript
vue实现菜单切换功能
2019/05/08 Javascript
node中IO以及定时器优先级详解
2019/05/10 Javascript
bootstrap实现嵌套模态框的实例代码
2020/01/10 Javascript
js中位数不足自动补位扩展padLeft、padRight实现代码
2020/04/06 Javascript
在vue中获取wangeditor的html和text的操作
2020/10/23 Javascript
JavaScript 中的六种循环方法
2021/01/06 Javascript
[32:07]完美世界DOTA2联赛PWL S3 LBZS vs Rebirth 第一场 12.16
2020/12/17 DOTA
python爬虫入门教程之糗百图片爬虫代码分享
2014/09/02 Python
tensorflow实现对图片的读取的示例代码
2018/02/12 Python
python aiohttp的使用详解
2019/06/20 Python
pytorch实现MNIST手写体识别
2020/02/14 Python
python 实现图片修复(可用于去水印)
2020/11/19 Python
Python 实现RSA加解密文本文件
2020/12/30 Python
css3类选择器之结合元素选择器和多类选择器用法
2017/03/09 HTML / CSS
希腊品牌鞋类销售网站:epapoutsia.gr
2020/03/18 全球购物
社区中秋节活动方案
2014/01/29 职场文书
八荣八耻的活动方案
2014/08/16 职场文书
难以忽视的真相观后感
2015/06/05 职场文书
Python基于百度API识别并提取图片中文字
2021/06/27 Python
Python matplotlib绘制雷达图
2022/04/13 Python