在上两节我们介绍了单条折线图实现和折线点显示数据，本节主要介绍echarts多条折线图的实现，以及鼠标移动到一条折线图只显示本条折线图的信息以及初始化多条折线图的时候只默认显示一条。
一、多条折线图实现
1，新建demo.html页面，并引入echarts的js库，在这里我们引入的是网络地址
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/echarts-all-3.js"></script>
2，折线图容器html代码，只需一行
<div id="container" style="height: 500px"></div>
折线图容器高度为500px,宽度默认，并且div的id号为container，在接下来初始化折线图的时候会用到。
3，多折线图javascript代码实现
//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: '折线图堆叠'
},
tooltip: {
trigger: 'axis'
},
legend: {
data:['邮件营销','联盟广告','视频广告','直接访问','搜索引擎']
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
toolbox: {
feature: {
saveAsImage: {}
}
},
xAxis: {
type: 'category',
boundaryGap: false,
data: ['周一','周二','周三','周四','周五','周六','周日']
},
yAxis: {
type: 'value'
},
series: [
{
name:'邮件营销',
type:'line',
stack: '总量',
data:[120, 132, 101, 134, 90, 230, 210]
},
{
name:'联盟广告',
type:'line',
stack: '总量',
data:[220, 182, 191, 234, 290, 330, 310]
},
{
name:'视频广告',
type:'line',
stack: '总量',
data:[150, 232, 201, 154, 190, 330, 410]
},
{
name:'直接访问',
type:'line',
stack: '总量',
data:[320, 332, 301, 334, 390, 330, 320]
},
{
name:'搜索引擎',
type:'line',
stack: '总量',
data:[820, 932, 901, 934, 1290, 1330, 1320]
}
]
};
if (option && typeof option === "object") {
myChart.setOption(option, true);
}
</script>4,实现的效果图
如图所示，折线图的折点都显示数据了，主要因为我在option变量中的series中添加了一行itemStyle : { normal: {label : {show: true}}},代码，此代码便是设置折线图的折点显示数据。
二、鼠标移动到单条折线图，浮层显示本条折线图信息
折线图js实现的option对象中的tooltip.trigger 值 有两种触发类型：
可选：
'item'
数据项图形触发，主要在散点图，饼图等无类目轴的图表中使用。
'axis'
坐标轴触发，主要在柱状图，折线图等会使用类目轴的图表中使用。
如上图所示，所有折线图的浮层数据都展现出来了，但这里我们想实现鼠标移动到一条折线图的时候，只展示此条折线图信息，那么就把触发类型设置为item，也就是tooltip trigger改为item。效果图如下：
三、多折线图第一次初始化默认显示一条折线
legend.selectedMode string, boolean
[ default: true ]
图例选择的模式，默认开启图例选择，可以设成 false 关闭。
除此之外也可以设成 'single' 或者 'multiple' 使用单选或者多选模式。
在option中的legend中添加如下代码
legend: {
data:['邮件营销','联盟广告','视频广告','直接访问','搜索引擎'],
selectedMode:'single'
}我们把selectedMode的值设置为single，单选模式，效果如下：
四、完整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: '折线图堆叠'
},
tooltip: {
trigger: 'item'
},
legend: {
data:['邮件营销','联盟广告','视频广告','直接访问','搜索引擎']
/***selectedMode:'multiple'***/
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
toolbox: {
feature: {
saveAsImage: {}
}
},
xAxis: {
type: 'category',
boundaryGap: false,
data: ['周一','周二','周三','周四','周五','周六','周日']
},
yAxis: {
type: 'value'
},
series: [
{
name:'邮件营销',
type:'line',
itemStyle : { normal: {label : {show: true}}},
stack: '总量',
data:[120, 132, 101, 134, 90, 230, 210]
},
{
name:'联盟广告',
type:'line',
itemStyle : { normal: {label : {show: true}}},
stack: '总量',
data:[220, 182, 191, 234, 290, 330, 310]
},
{
name:'视频广告',
type:'line',
itemStyle : { normal: {label : {show: true}}},
stack: '总量',
data:[150, 232, 201, 154, 190, 330, 410]
},
{
name:'直接访问',
type:'line',
itemStyle : { normal: {label : {show: true}}},
stack: '总量',
data:[320, 332, 301, 334, 390, 330, 320]
},
{
name:'搜索引擎',
type:'line',
itemStyle : { normal: {label : {show: true}}},
stack: '总量',
data:[820, 932, 901, 934, 1290, 1330, 1320]
}
]
};
if (option && typeof option === "object") {
myChart.setOption(option, true);
}
</script>
</body>
</html>感觉本站内容不错，读后有收获？小额赞助,鼓励网站分享出更好的教程