在vue中使用echarts(折线图的demo,markline用法)
编程学习 2021-07-04 14:06www.dzhlxh.cn编程入门
这篇文章主要介绍了在vue中使用echarts(折线图的demo,markline用法)，具有很好的参考价值，希望对大家有所帮助。一起跟随长沙网络推广过来看看吧
公司最近在用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用法)就是长沙网络推广分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持狼蚁SEO。
上一篇：jquery实现简单拖拽效果
下一篇：微信小程序实现时间戳格式转换