上两节我们分别介绍了静态数值折线图和动态加载折线图，这节主要介绍，echarts如何让折线图显示数据，也就是折线图的每个折点都显示数据。如下图所示
1，echarts折线图折点未显示数据
如图所示，红色圈圈部分即为折线图的折点，但是并未显示Y轴数据
2，echarts折线图折点显示数据
如图所示，echarts折线图的折点已经显示出来数据了。案例步骤如下
第一、新建html界面，并在页面引入echarts依赖js库
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/echarts-all-3.js"></script>
上述引用地址为网络地址js库，读者如果想加载到本地，可在浏览器中输入上述网络地址，然后右键另存，把下载下来的js文件复制到web项目工程里即可。亦或者去百度echarts官方网站下载。目前echarts的最新版本为3.0
2, <body></body>之间的html代码，也就是折线图的容器。
<div id="container" style="height: 500px"></div>
id号为container 高度为500px 宽度默认的div块，此div块便是折线图的容器。
3, 实现echarts折线图的js代码
//V型知识库原创 www.vxzsk.com
<script type="text/javascript">
var dom = document.getElementById("container");
var myChart = echarts.init(dom);
var app = {};
var option = null;
option = {
title: {
text: '一天用电量分布',
subtext: '纯属虚构'
},
tooltip: {
trigger: 'axis'
},
toolbox: {
show: true,
feature: {
saveAsImage: {}
}
},
xAxis: {
type: 'category',
boundaryGap: false,
data: ['00:00', '01:15', '02:30', '03:45', '05:00', '06:15', '07:30', '08:45', '10:00', '11:15', '12:30', '13:45', '15:00', '16:15', '17:30', '18:45', '20:00', '21:15', '22:30', '23:45']
},
yAxis: {
type: 'value',
axisLabel: {
formatter: '{value} W'
}
},
visualMap: {
show: false,
dimension: 0,
pieces: [{
lte: 6,
color: 'green'
}, {
gt: 6,
lte: 8,
color: 'red'
}, {
gt: 8,
lte: 14,
color: 'green'
}, {
gt: 14,
lte: 17,
color: 'red'
}, {
gt: 17,
color: 'green'
}]
},
series: [
{
name:'用电量',
type:'line',
smooth: true,
itemStyle : { normal: {label : {show: true}}},
data: [300, 280, 250, 260, 270, 300, 550, 500, 400, 390, 380, 390, 400, 500, 600, 750, 800, 700, 600, 400],
markArea: {
data: [ [{
name: '早高峰',
xAxis: '07:30'
}, {
xAxis: '10:00'
}], [{
name: '晚高峰',
xAxis: '17:30'
}, {
xAxis: '21:15'
}] ]
}
}
]
};
if (option && typeof option === "object") {
myChart.setOption(option, true);
}
</script>注意，我们在option变量中的series中添加了一行itemStyle : { normal: {label : {show: true}}},代码，此代码便是设置折线图的折点显示数据。
4、运行上述代码，效果图如下
5、完整demo.html代码如下
<!DOCTYPE html>
<head>
<meta charset="utf-8">
</head>
<body >
<div id="container" style="height: 500px"></div>
<!-- V型知识库 www.vxzsk.com -->
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/echarts-all-3.js"></script>
<script type="text/javascript">
var dom = document.getElementById("container");
var myChart = echarts.init(dom);
var app = {};
var option = null;
option = {
title: {
text: '一天用电量分布',
subtext: '纯属虚构'
},
tooltip: {
trigger: 'axis'
},
toolbox: {
show: true,
feature: {
saveAsImage: {}
}
},
xAxis: {
type: 'category',
boundaryGap: false,
data: ['00:00', '01:15', '02:30', '03:45', '05:00', '06:15', '07:30', '08:45', '10:00', '11:15', '12:30', '13:45', '15:00', '16:15', '17:30', '18:45', '20:00', '21:15', '22:30', '23:45']
},
yAxis: {
type: 'value',
axisLabel: {
formatter: '{value} W'
}
},
visualMap: {
show: false,
dimension: 0,
pieces: [{
lte: 6,
color: 'green'
}, {
gt: 6,
lte: 8,
color: 'red'
}, {
gt: 8,
lte: 14,
color: 'green'
}, {
gt: 14,
lte: 17,
color: 'red'
}, {
gt: 17,
color: 'green'
}]
},
series: [
{
name:'用电量',
type:'line',
smooth: true,
itemStyle : { normal: {label : {show: true}}},
data: [300, 280, 250, 260, 270, 300, 550, 500, 400, 390, 380, 390, 400, 500, 600, 750, 800, 700, 600, 400],
markArea: {
data: [ [{
name: '早高峰',
xAxis: '07:30'
}, {
xAxis: '10:00'
}], [{
name: '晚高峰',
xAxis: '17:30'
}, {
xAxis: '21:15'
}] ]
}
}
]
};
if (option && typeof option === "object") {
myChart.setOption(option, true);
}
</script>
</body>
</html>本章节不在提供demo代码下载，因为只要复制上面完整代码即可运行。
此文章本站原创，地址 https://www.vxzsk.com/190.html
转载请注明出处！谢谢！
感觉本站内容不错，读后有收获？小额赞助,鼓励网站分享出更好的教程