在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中安装
harts = 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',
electron vue教程
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 (){
<_echarts();
},
methods:{
get_echarts:function(){
this.seven_chart = harts.ElementById("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⽤法)就是⼩编分享给⼤家的全部内容了，希望能给⼤家⼀个参考，也希望⼤家多多⽀持。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。