jQuery插件echarts去掉垂直网格线用法示例

本文实例讲述了jQuery插件echarts去掉垂直网格线用法。分享给大家供大家参考，具体如下：

1、问题背景

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

2、实现源码

(1)有垂直网格线

！DOCTYPE html html head meta charset=' UTF-8 ' title echart-有垂直网格线/title link rel='快捷方式图标href='./js/echart-2。2 .7/doc/asset/ico/fav图标。png ' rel=' external nofollow ' rel=' external nofollow '脚本类型=' text/JavaScript ' src=' http :/js/echart-2。2 .7/doc/asset/js/jquery。量滴js/'脚本脚本类型=' text/JavaScript ' src=' http :/js/echart-2。2 .7/doc/example/www2/js/echart-all。js /脚本样式正文，html { width : 99%；高： 99%;字体系列： '微软雅黑；font-size : 12px} #图表{宽度： 100%；高度： 100%;}/style script $(function(){ var chart=document。getelementbyid(' chart ')；var echart=echarts.init(图表);var option={ title : { text : ' ' }，tooltip : { trigger : ' axis ' }，legend: { data:['人数] }、grid: { left: '3% '、right: '4% '、bottom: '3% '、containLabel: true }、工具箱： { feature : { savasimage : } }、xAxis: { type: ' category '、boundaryGap: false、splitline 3360 { show 3: }周一','周二','周三','周四','周五','周六','周日] }，yAxis: { type: 'value' }，series: [ { name: '人数，键入： '线路'，stack: '人数，data:[1220，4132，6101，3134，1890，6230，3210]}]}；echart.setOption(选项);});/script/head body div id=' chart '/div/body/html(2)无垂直网格线

！DOCTYPE html html head meta charset=' UTF-8 ' title echart-去掉垂直网格线/title link rel='快捷方式图标href='./js/echart-2。2 .7/doc/asset/ico/fav图标。png ' rel=' external nofollow ' rel=' external nofollow '脚本类型=' text/JavaScript ' src=' http :/js/echart-2。2 .7/doc/asset/js/jquery。量滴js/'脚本脚本类型=' text/JavaScript ' src=' http :/js/echart-2。2 .7/doc/example/www2/js/echart-all。js /脚本样式正文，html { width : 99%；高： 99%;字体系列： '微软雅黑；font-size : 12px} #图表{宽度： 100%；高度： 100%;}/style script $(function(){ var chart=document。getelementbyid(' chart ')；var echart=echarts.init(图表);var option={ title : { text : ' ' }，tooltip : { trigger : ' axis ' }，legend: { data:['人数] }、grid: { left: '3% '、right: '4% '、bottom: '3% '、containLabel: true }、工具箱： { feature : { savasimage : } }、xAxis: { type: ' category '、boundaryGap: false、splitline 3360 { show 3: }周一','周二','周三','周四','周五','周六','周日] }，yAxis: { type: 'value' }，series: [ { name: '人数，键入： '线路'，stack: '人数，data:[1220，4132，6101，3134，1890，6230，3210]}]}；echart.setOption(选项);});/script/head body div id=' chart '/div/body/html 3，实现结果

(1)有垂直网格线

(2)无垂直网格线

4、问题说明

去掉网格中的垂直线，只需在xAxis中加入分割线属性的设置show:false

更多关于jQuery相关内容感兴趣的读者可查看本站专题： 《jQuery常用插件及用法总结》 、 《jquery中Ajax用法总结》 、 《jQuery表格(table)操作技巧汇总》 、 《jQuery扩展技巧总结》 、 《jQuery常见经典特效汇总》 及《jquery选择器用法总结》

希望本文所述对大家jQuery程序设计有所帮助。