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

2023-07-20 13:22:13 70

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

vue引入echarts（折线图的demo）

主要是解决引入echarts，markline的使用（基准线）

这是demo的效果图：

vue脚手架不多赘述

1.安装依赖

cnpminstallecharts-S

2.在main.js中引入echarts

importechartsfrom'echarts'

3.在main.js中安装

Vue.prototype.echarts=echarts;

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

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

1.HTML部分

2.js部分


	exportdefault{
		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;
},
	}

3.css部分


.content{
width:100%;
}
.contentp{
margin-top:1rem;
font-size:0.4rem;
color:#666666;
}
.seven_echarts{
height:11rem;
width:94%;
}

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

补充知识：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用法)就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持毛票票。

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

热门推荐

随机推荐