echarts插件如何在jQuery中使用

tangjin

作者

这篇文章将为大家详细讲解有关echarts插件如何在jQuery中使用，文章内容质量较高，因此小编分享给大家做个参考，希望大家阅读完这篇文章后对相关知识有一定的了解。

1、问题背景

设计一条统计人数的折线，其中网格线没有垂直线

2、实现源码

（1）有垂直网格线

<!DOCTYPEhtml>
<html>
<head>
<metacharset="UTF-8">
<title>echarts-有垂直网格线</title>
<linkrel="shortcuticon"href="../js/echarts-2.2.7/doc/asset/ico/favicon.png"rel="externalnofollow"rel="externalnofollow">
<scripttype="text/javascript"src="../js/echarts-2.2.7/doc/asset/js/jquery.min.js"></script>
<scripttype="text/javascript"src="../js/echarts-2.2.7/doc/example/www2/js/echarts-all.js"></script>
<style>
body,html{
width:99%;
height:99%;
font-family:"微软雅黑";
font-size:12px;
}
#chart{
width:100%;
height:100%;
}
</style>
<script>
$(function(){
varchart=document.getElementById('chart');
varechart=echarts.init(chart);
varoption={
title:{
text:''
},
tooltip:{
trigger:'axis'
},
legend:{
data:['人数']
},
grid:{
left:'3%',
right:'4%',
bottom:'3%',
containLabel:true
},
toolbox:{
feature:{
saveAsImage:{}
}
},
xAxis:{
type:'category',
boundaryGap:false,
splitLine:{
show:true
},
data:['周一','周二','周三','周四','周五','周六','周日']
},
yAxis:{
type:'value'
},
series:[
{
name:'人数',
type:'line',
stack:'人数',
data:[1220,4132,6101,3134,1890,6230,3210]
}
]
};
echart.setOption(option);
});
</script>
</head>
<body>
<divid="chart"></div>
</body>
</html>

（2）无垂直网格线

<!DOCTYPEhtml>
<html>
<head>
<metacharset="UTF-8">
<title>echarts-去掉垂直网格线</title>
<linkrel="shortcuticon"href="../js/echarts-2.2.7/doc/asset/ico/favicon.png"rel="externalnofollow"rel="externalnofollow">
<scripttype="text/javascript"src="../js/echarts-2.2.7/doc/asset/js/jquery.min.js"></script>
<scripttype="text/javascript"src="../js/echarts-2.2.7/doc/example/www2/js/echarts-all.js"></script>
<style>
body,html{
width:99%;
height:99%;
font-family:"微软雅黑";
font-size:12px;
}
#chart{
width:100%;
height:100%;
}
</style>
<script>
$(function(){
varchart=document.getElementById('chart');
varechart=echarts.init(chart);
varoption={
title:{
text:''
},
tooltip:{
trigger:'axis'
},
legend:{
data:['人数']
},
grid:{
left:'3%',
right:'4%',
bottom:'3%',
containLabel:true
},
toolbox:{
feature:{
saveAsImage:{}
}
},
xAxis:{
type:'category',
boundaryGap:false,
splitLine:{
show:false
},
data:['周一','周二','周三','周四','周五','周六','周日']
},
yAxis:{
type:'value'
},
series:[
{
name:'人数',
type:'line',
stack:'人数',
data:[1220,4132,6101,3134,1890,6230,3210]
}
]
};
echart.setOption(option);
});
</script>
</head>
<body>
<divid="chart"></div>
</body>
</html>

3、实现结果

（1）有垂直网格线