黑马程序员技术交流社区
标题: 【广州前端】jQuery+json百度图表插件实现饼状图 [打印本页]
作者: 老哥哥 时间: 2017-12-12 16:09
标题: 【广州前端】jQuery+json百度图表插件实现饼状图
jQuery+json百度图表插件实现饼状图
第一步：引入html代码（分为切换的两个按钮button和饼状图main）
<h3>
<button id="one" data-index="1">第一个饼状图</button>
<button id="two" data-index="2">第二个饼状图</button>
</h3>
<div id="main" style="width: 600px; height:400px;"></div>
第二步：引入js文件和完成js代码（三个引入的js文件，和书写）
<script src="js/jquery.min.js"></script> <!-- 首先引入jq文件 -->
<script src="js/echarts.common.min.js"></script> <!-- 这个为封装好的饼状图文件 -->
<script src="js/echartsOne.js"></script> <!-- 这个是ajax文件，完成json文件的读取 -->
<script type="text/javascript">
$(function(){
//首先调用一次封装好的饼状图函数，参数为当前点击的按钮；
qxfl('#one');
//点击按钮时切换对应的饼状图；
$("h3 button").click(function(){
qxfl(this);
})
});
</script>
第三步：通过改json文件可以改变表格的数据（记得改完清空缓存刷新）
注意：此项目必须要在服务器上运行，请通过apache配置好域名后访问。如图：
-
-
jq饼状图.rar
154.7 KB, 下载次数: 144
| 欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/) |
黑马程序员IT技术论坛 X3.2 |
