A股上市公司传智教育(股票代码 003032)旗下技术交流社区北京昌平校区

 找回密码
 加入黑马

QQ登录

只需一步,快速开始

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, 下载次数: 143

0 个回复

您需要登录后才可以回帖 登录 | 加入黑马