彩世界平台-彩世界时时app-彩世界开奖app苹果下载

热门关键词: 彩世界平台,彩世界时时app,彩世界开奖app苹果下载

您的位置:彩世界平台 > 彩世界时时app > Echarts 3.19 制作常用的图形 非静态

Echarts 3.19 制作常用的图形 非静态

发布时间:2019-12-10 06:56编辑:彩世界时时app浏览(169)

    饼图:

      最近阿里内部使用的 图表也向外开放了 而百度就好像更有良心一点,Echarts 早就开放了 。

    环境:Echarts 3.19 vs2013

    自己学Echarts的时候走了很多的弯路,毕竟谁让自己菜呢,多撞几次南墙才晓得疼 才知道学习方法,新手上路,请多担待。

    彩世界开奖app苹果下载,实现方式:ajax+ashx+json

     附上下载地址 彩世界平台,  官网地址:

    彩世界时时app,注意事项: 官网所需格式为 [{value:23,name:'xxxx' }] 请将key 的名字不要写错

    饼图: 

    具体代码,各位看官 请下移目光。

    环境:Echarts 3.19  vs2013  

    页面部分就设置一个div 就好了

    实现方式:ajax+ashx+json 

    接下来就是js部分了 其实Echarts 跟HTML5中的 Canvans 还是有联系的 想知道的可以查资料哟

    注意事项: 官网所需格式为   [{value:23,name:'xxxx' }]    请将key 的名字不要写错

    $.click { //这里用的是点击事件下面 当然这也是模仿你有条件查询的时候咯var dom = document.getElementById;var mycharts = echarts.init;option = {title: {text: '部门人口比例',subtext: '测试数据',x: 'center'},tooltip: {trigger: 'item',formatter: "{a} 
    {b} : {c} "},legend: {orient: 'vertical',left: 'left',data: []},series: [{name: '2012年度',type: 'pie',radius: '55%',center: ['50%', '60%'],data: [],itemStyle: {emphasis: {shadowBlur: 10,shadowOffsetX: 0,shadowColor: 'rgba' //这怎么会有个.5呢? 看来还是要看看H5哟}}}]};mycharts.setOption;
    

    具体代码,各位看官 请下移目光。

    接下来就是 ajax部分了 动态加载数据才是根本的 数据固定多没意思,来干了这碗孟婆汤 来世就做UI设计尸

    <!--请先引用文件-->
     <script src="../Scripts/jquery-1.8.2.min.js"></script>
        <script src="../Scripts/echarts/echarts.min.js"></script>
    
    $.ajax({type: "get",async: true, //异步请求(同步请求将会锁住浏览器,用户其他操作必须等待请求完成才可以执行)url: "../Handler/DepartmentHandler.ashx", data: {},//demo 没加条件dataType: "json", //返回数据形式为jsonsuccess: function  {for (var i = 0; i < result.length; i++){name.push; } mycharts.setOption({ //加载数据图表legend:{data:name },series: [{data:result}]});},error: function  {//请求失败时执行该函数alert;
    

    页面部分就设置一个div 就好了

    ashx部分就简单多了 单纯的序列化数据

    <div><input type="button" id="btngo" value="Pie" /> </div>
        <div id="contanis" style="width:800px;height:800px"></div>
    
    DataTable result = BLL.Department.GetDeptNumber(); List list = new List();foreach (DataRow dr in result.Rows){// 附上Echarts 所需的格式:[{value:335, name:'直接访问'}]Deart d = new Deart();d.value = Convert.ToInt32;//自己粗心 用values Echarts 不认 一直就是undefined d.name = dr["D_Name"].ToString;}JavaScriptSerializer jss = new JavaScriptSerializer();string json = jss.Serialize;public class Deart //其实可以不用这么定义 自己保险让它出来的 value 值为int{public int value { get; set; }public string name { get; set; } }
    

     接下来就是js部分了  其实Echarts 跟HTML5中的 Canvans 还是有联系的 想知道的可以查资料哟 

    柱状图:

    $("#btngo").click(function () { //这里用的是点击事件下面 当然这也是模仿你有条件查询的时候咯
                var dom = document.getElementById('contanis');
                var mycharts = echarts.init(dom);
                option = {
                    title: {
                        text: '部门人口比例',
                        subtext: '测试数据',
                        x: 'center'
                    },
                    tooltip: {
                        trigger: 'item',
                        formatter: "{a} <br/>{b} : {c} ({d}%)"
                    },
                    legend: {
                        orient: 'vertical',
                        left: 'left',
                        data: []
                    },
                    series: [
                        {
                            name: '2012年度',
                            type: 'pie',
                            radius: '55%',
                            center: ['50%', '60%'],
                            data: [],
                            itemStyle: {
                                emphasis: {
                                    shadowBlur: 10,
                                    shadowOffsetX: 0,
                                    shadowColor: 'rgba(0, 0, 0, 0.5)' //这怎么会有个.5呢? 看来还是要看看H5哟
                                }
                            }
                        }
                    ]
                };
                mycharts.setOption(option);
    

    环境:Echarts 3.19 vs2013

     接下来就是 ajax部分了 动态加载数据才是根本的 数据固定多没意思,来干了这碗孟婆汤 来世就做UI设计尸

    实现方式:ajax+ashx+json

    $.ajax({
                    type: "get",
                    async: true,            //异步请求(同步请求将会锁住浏览器,用户其他操作必须等待请求完成才可以执行)
                    url: "../Handler/DepartmentHandler.ashx",    
                    data: {},//demo 没加条件
                    dataType: "json",        //返回数据形式为json
                    success: function (result) {
                        for (var i = 0; i < result.length; i++)
                        {
                            name.push(result[i].name);                        
                        }                   
                        mycharts.setOption({ //加载数据图表
                            legend:{data:name },
                            series: [{
                                data:result
                            }]
                        });
    
                    },
                        error: function (errorMsg) {
                            //请求失败时执行该函数
                            alert("图表请求数据失败!");
    
                        }
    
                });   
    

    注意事项: 官网所需格式为:[5,6,7,9,34] 数组类型

     ashx部分就简单多了 单纯的序列化数据

    具体代码,各位看官 请下移目光。

    DataTable result = BLL.Department.GetDeptNumber();          
                List<object> list = new List<object>();
                foreach (DataRow dr in result.Rows)
                {
                // 附上Echarts 所需的格式:[{value:335, name:'直接访问'}]
    
                    Deart d = new Deart();
                    d.value = Convert.ToInt32(dr["number"]);
                     //自己粗心 用values Echarts 不认 一直就是undefined 
                    d.name = dr["D_Name"].ToString();                
                    list.Add(d);
                }
                JavaScriptSerializer jss = new JavaScriptSerializer();
                string json = jss.Serialize(list);
    
    public class Deart   //其实可以不用这么定义  自己保险让它出来的 value 值为int
            {
                public int value { get; set; }
                public string name { get; set; }           
    
            }
    
        $.click {//&#33719;&#21462;&#21040;&#32472;&#21046;domvar dom = document.getElementById;var myChart = echarts.init;myChart.setOption({title: {text: '&#24322;&#27493;&#25968;&#25454;&#21152;&#36733;&#31034;&#20363;' //&#22270;&#29255;&#26631;&#39064;},tooltip: {},legend: {data: ['&#37096;&#38376;&#20154;&#21475;'] },xAxis: {data: []},yAxis: {},series: [{name: '2015',type: 'bar',//&#21487;&#20197;&#26356;&#25913;&#20026; linedata: [] //&#27492;&#22788;&#32473;&#31354; &#21518;&#38754;&#29992;ajax&#32473;&#20182;&#36171;&#20540;}]});&lt;/pre&gt;&lt;p&gt;&#32769;&#35268;&#24459; &#19979;&#38754;&#23601;&#26159;ajax &#37096;&#20998;&#20102; &#65306;&lt;/p&gt;&lt;pre &gt;myChart.showLoading(); //&#25968;&#25454;&#21152;&#36733;&#23436;&#20043;&#21069;&#20808;&#26174;&#31034;&#19968;&#27573;&#31616;&#21333;&#30340;loading&#21160;&#30011;var names = []; //&#31867;&#21035;&#25968;&#32452;var nums = []; //&#38144;&#37327;&#25968;&#32452;$.ajax({type: "post",async: true, //&#24322;&#27493;&#35831;&#27714;&#65288;&#21516;&#27493;&#35831;&#27714;&#23558;&#20250;&#38145;&#20303;&#27983;&#35272;&#22120;&#65292;&#29992;&#25143;&#20854;&#20182;&#25805;&#20316;&#24517;&#39035;&#31561;&#24453;&#35831;&#27714;&#23436;&#25104;&#25165;&#21487;&#20197;&#25191;&#34892;&#65289;url: "../Handler/DepartmentHandler.ashx", //&#35831;&#27714;&#21457;&#36865;&#21040;../Handler/DepartmentHandler&#22788;data: {},dataType: "json", //&#36820;&#22238;&#25968;&#25454;&#24418;&#24335;&#20026;jsonsuccess: function  { //&#35831;&#27714;&#25104;&#21151;&#26102;&#25191;&#34892;&#35813;&#20989;&#25968;&#20869;&#23481;&#65292;result&#21363;&#20026;&#26381;&#21153;&#22120;&#36820;&#22238;&#30340;json&#23545;&#35937;if  {for (var i = 0; i &lt; result.length; i++) {names.push; //&#25384;&#20010;&#21462;&#20986;&#31867;&#21035;&#24182;&#22635;&#20837;&#31867;&#21035;&#25968;&#32452;}for (var i = 0; i &lt; result.length; i++) {nums.push; //&#25384;&#20010;&#21462;&#20986;&#38144;&#37327;&#24182;&#22635;&#20837;&#38144;&#37327;&#25968;&#32452;}myChart.hideLoading(); //&#38544;&#34255;&#21152;&#36733;&#21160;&#30011;myChart.setOption({ //&#21152;&#36733;&#25968;&#25454;&#22270;&#34920;xAxis:{data: names},series: [{ data: nums }]});}},error: function  {//&#35831;&#27714;&#22833;&#36133;&#26102;&#25191;&#34892;&#35813;&#20989;&#25968;alert;myChart.hideLoading;&lt;/pre&gt;&lt;p&gt; &#20854;&#23454;option&#30340;&#35774;&#32622;&#26159;&#21487;&#20197;&#25918;&#22312;ajax&#37324;&#38754;&#30340; &#19968;&#26679;&#20250;&#20986;&#25928;&#26524; &#32780;&#19988;&#23481;&#26131;&#26356;&#30475; &lt;/p&gt;&lt;p&gt;&#23601;&#25343;&#39292;&#22270;&#26469;&#35828;&#21543; &#20195;&#30721;&#21487;&#20197;&#36825;&#20040;&#20889;&#21834; &lt;/p&gt;&lt;pre &gt;$.ajax({type: "get",async: true, //&#24322;&#27493;&#35831;&#27714;&#65288;&#21516;&#27493;&#35831;&#27714;&#23558;&#20250;&#38145;&#20303;&#27983;&#35272;&#22120;&#65292;&#29992;&#25143;&#20854;&#20182;&#25805;&#20316;&#24517;&#39035;&#31561;&#24453;&#35831;&#27714;&#23436;&#25104;&#25165;&#21487;&#20197;&#25191;&#34892;&#65289;url: "../Handler/DepartmentHandler.ashx", data: {},//demo &#27809;&#21152;&#26465;&#20214;dataType: "json", //&#36820;&#22238;&#25968;&#25454;&#24418;&#24335;&#20026;jsonsuccess: function  { for (var i = 0; i &lt; result.length; i++){name.push; } option = {title: {text: '&#37096;&#38376;&#20154;&#21475;&#27604;&#20363;',subtext: '&#27979;&#35797;&#25968;&#25454;',x: 'center'},tooltip: {trigger: 'item',formatter: "{a} &lt;br/&gt;{b} : {c} "},legend: {orient: 'vertical',left: 'left',data:name},series: [{name: '2012&#24180;&#24230;',type: 'pie',radius: '55%',center: ['50%', '60%'],data: result,itemStyle: {emphasis: {shadowBlur: 10,shadowOffsetX: 0,shadowColor: 'rgba'}}}]}; }, error: function  { //&#35831;&#27714;&#22833;&#36133;&#26102;&#25191;&#34892;&#35813;&#20989;&#25968; alert;&lt;/pre&gt;&lt;p&gt;&#22914;&#26524;&#20320;&#26159;&#24819;&#23398;&#20064;&#36825;&#20010; &#20316;&#20026;&#19968;&#20010;&#21507;&#36807;&#20111;&#30340;&#33756;&#40479;&#21578;&#35785;&#20320; &#20808;&#36824;&#26159;&#22909;&#22909;&#30475;&#30475; &#23448;&#26041;&#30340;&#20363;&#23376; &#28982;&#21518;&#29702;&#28165;&#24605;&#36335;&#22312;&#19979;&#25163; &lt;/p&gt;&lt;p&gt;&#20197;&#19978;&#25152;&#36848;&#26159;&#23567;&#32534;&#32473;&#22823;&#23478;&#20171;&#32461;&#30340;&#22522;&#20110;Echarts 3.19 &#21046;&#20316;&#24120;&#29992;&#30340;&#22270;&#24418;&#30340;&#30456;&#20851;&#30693;&#35782;&#65292;&#24076;&#26395;&#23545;&#22823;&#23478;&#26377;&#25152;&#24110;&#21161;&#65292;&#22914;&#26524;&#22823;&#23478;&#26377;&#20219;&#20309;&#30097;&#38382;&#35831;&#32473;&#25105;&#30041;&#35328;&#65292;&#23567;&#32534;&#20250;&#21450;&#26102;&#22238;&#22797;&#22823;&#23478;&#30340;&#12290;&#22312;&#27492;&#20063;&#38750;&#24120;&#24863;&#35874;&#22823;&#23478;&#23545;&#33050;&#26412;&#20043;&#23478;&#32593;&#31449;&#30340;&#25903;&#25345;&#65281;&lt;/p&gt;
    

    附上效果图吧:彩世界开奖app苹果下载 1

    本文由彩世界平台发布于彩世界时时app,转载请注明出处:Echarts 3.19 制作常用的图形 非静态

    关键词: