jQuery+json百度图表插件实现饼状图

查看演示地址：http://www.lanrenzhijia.com/demos/47/4790/demo/

第一步：引入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配置好域名后访问。如图：

jQuery+json百度图表插件实现饼状图

查看演示地址：http://www.lanrenzhijia.com/demos/47/4790/demo/

第一步：引入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配置好域名后访问。如图：