公司最近在用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用法)就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持。
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线
暴雪近日发布了《魔兽世界》10.2.6 更新内容，新游玩模式《强袭风暴》即将于3月21 日在亚服上线，届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。
艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕，并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时，他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中，玩家将会进入一个全新的海盗主题大逃杀式限时活动，其中包含极高的风险和史诗级的奖励。
《强袭风暴》不是普通的战场，作为一个独立于主游戏之外的活动，玩家可以用大逃杀的风格来体验《魔兽世界》，不分职业、不分装备（除了你在赛局中捡到的），光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式，玩家在加入海盗主题的预赛大厅区域前，可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹，《巨龙崛起》和《魔兽世界：巫妖王之怒 经典版》的玩家都可以获得奖励。