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配置好域名后访问。如图:
|