程序博客网 > 华纳史诗冒险 知乎

Echarts示例总结

来源：互联网 发布：华纳史诗冒险 知乎 编辑：程序博客网 时间：2024/05/29 07:51

准备开发环境


1、下载好echarts开发包并加入到工程目录下。

  下载地址：http://echarts.baidu.com/echarts2/doc/example.html


2、引入echarts的js  ，如：

[javascript] view plain copy
  1. <body>  
  2.     <!-- 为ECharts准备一个具备大小（宽高）的Dom -->  
  3.     <div id="main" style="height:400px"></div>  
  4.     <!-- ECharts单文件引入 -->  
  5.     <script src="http://echarts.baidu.com/build/dist/echarts.js"></script>  
  6. </body>  


3、配置echarts显示

[javascript] view plain copy
  1. <script type="text/javascript">  
  2.     require.config({  
  3.         paths: {  
  4.             echarts: '${ctx}/tiles/echarts'  
  5.         }  
  6.     });   
  7.     require([  
  8.                 'echarts',  
  9.                 'echarts/chart/pie',  
  10.                 'echarts/chart/scatter',  
  11.                 'echarts/chart/bar',  
  12.                 'echarts/chart/line'  
  13.             ],function (ec){  
  14.         //绘制统计图  
  15.         drawQyfr(ec);  
  16.         drawFqyfr(ec);  
  17.         drawZczjfb(ec);  
  18.                //..............       
  19.     });  
  20. </script>  

4、配置echarts参数（结合示例）


示例


   介绍：由于统计的数据量达到百万级，直接访问是不可行的，中间我们已经采举方案（通过sql统计生成json放入中间表，由于统计过程很麻烦且数据量大、耗时，数据需要提前准备好，如：定时统计前一天晚上最新的数据生成最新的json）将数据达到及时访问，提高用户体验。所以其中的数据是在后台就已经生成好了，在配置项目中只负责显示。读者是看不到配置的具体值，但熟悉并用过echarts的读者应该能懂是怎么回事。

   

●  示例一、柱状图（在“标准柱状图”基础上修改提高美观度）：


配置参数：


[javascript] view plain copy
  1. function drawbzf(ec) {  
  2.             var temp;  
  3.             $.ajax({  
  4.                  type: "GET",  
  5.                  url: "${ctx}/dp/piequery?info.sqlcode=20160512145927238",  
  6.                  data: {},  
  7.                  async : false,  
  8.                  success: function(data){  
  9.                     temp = eval('('+data+')');  
  10.                       
  11.                  }  
  12.             });  
  13.    
  14.             // 基于准备好的dom，初始化echarts实例  
  15.             var myChart = ec.init(document.getElementById("bzf"));  
  16.             // 指定图表的配置项和数据  
  17.             var option = {  
  18.                 //显示提示框组件  
  19.                 tooltip : {},  
  20.                 //绘图网格配置  
  21.                 grid : { // 控制图的大小，调整下面这些值就可以，  
  22.                     y : 25,  
  23.                     x : 90,  
  24.                     x2 : 60,  
  25.                     y2 : 85,// y2可以控制 X轴跟Zoom控件之间的间隔，避免以为倾斜后造成 label重叠到zoom上  
  26.                     //去除边框线  
  27.                     borderWidth : 0  
  28.                 },  
  29.                 //x轴相关设置  
  30.                 xAxis : [ {  
  31.                     //设置为类目轴  
  32.                     type : 'category',  
  33.                     //类目在分割线上  
  34.                     boundaryGap : false,  
  35.                     //类目轴名称  
  36.                     data : ['',temp[0].name,temp[1].name,temp[2].name,temp[3].name,temp[4].name,temp[5].name,temp[6].name  
  37.                              ,temp[7].name,temp[8].name,temp[9].name,temp[10].name,temp[11].name,temp[12].name,  
  38.                              temp[13].name,temp[14].name,temp[15].name,temp[16].name,temp[17].name,'' ],  
  39.                                       
  40.                     //坐标轴刻度标签的相关设置          
  41.                     axisLabel : {  
  42.                         formatter:function(val){  
  43.                             return val.split("").join("\n");  
  44.                         },  
  45.                         textStyle:{  
  46.                             color: '#B6A2DE',  
  47.   
  48.                         },  
  49.                          interval:0,  
  50.                          //rotate:45,  
  51.                          margin:2,  
  52.                         //刻度样式  
  53.                         textStyle : {  
  54.                             //文字透明  
  55.                             color : 'rgba(255,255,255,0.5)',  
  56.                         },  
  57.                         //坐标轴名称与轴线之间的距离  
  58.                         nameGap : 25,  
  59.                     },  
  60.                     //轴线  
  61.                     axisLine : {  
  62.                         //轴线样式  
  63.                         lineStyle : {  
  64.                             //设置轴线宽度  
  65.                             width : 1,  
  66.                             //轴线颜色  
  67.                             color : 'rgba(1,134,198,0.8)'  
  68.                         },  
  69.                     },  
  70.                     //分割线  
  71.                     splitLine : {  
  72.                         //分割线样式  
  73.                         lineStyle : {  
  74.                             //分割线透明度  
  75.                             color : ['rgba(255,255,255,0)','rgba(255,255,255,0.3)','rgba(255,255,255,0.3)',  
  76.                                      'rgba(255,255,255,0.3)','rgba(255,255,255,0.3)','rgba(255,255,255,0.3)',  
  77.                                      'rgba(255,255,255,0.3)','rgba(255,255,255,0.3)','rgba(255,255,255,0.3)',  
  78.                                      'rgba(255,255,255,0.3)','rgba(255,255,255,0.3)','rgba(255,255,255,0.3)',  
  79.                                      'rgba(255,255,255,0.3)','rgba(255,255,255,0.3)','rgba(255,255,255,0.3)',  
  80.                                      'rgba(255,255,255,0.3)','rgba(255,255,255,0.3)','rgba(255,255,255,0.3)',  
  81.                                      'rgba(255,255,255,0.3)','rgba(255,255,255,0.3)']  
  82.                         }  
  83.                     },  
  84.                     //刻度线设置  
  85.                     axisTick : {  
  86.                         //隐藏刻度线  
  87.                         show : false,  
  88.                     }  
  89.                 } ],  
  90.                 //y轴相关设置  
  91.                 yAxis : [ {  
  92.                     //设置为数值轴  
  93.                     type : 'value',  
  94.                     //坐标轴刻度标签的相关设置          
  95.                     axisLabel : {  
  96.                         //刻度样式  
  97.                         textStyle : {  
  98.                             //文字透明  
  99.                             color : 'rgba(255,255,255,0.5)'  
  100.                         },  
  101.                         //刻度格式  
  102.                         formatter : "{value}"+"套"  
  103.                     },  
  104.                     //轴线  
  105.                     axisLine : {  
  106.                         //轴线样式  
  107.                         lineStyle : {  
  108.                             //设置轴线宽度  
  109.                             width : 1,  
  110.                             //轴线颜色  
  111.                             color : 'rgba(1,134,198,0.8)'  
  112.                         }  
  113.                     },  
  114.                     //分割线  
  115.                     splitLine : {  
  116.                         //分割线样式  
  117.                         lineStyle : {  
  118.                             //分割线透明度  
  119.                             color : ['rgba(255,255,255,0)','rgba(255,255,255,0.3)','rgba(255,255,255,0.3)',  
  120.                                      'rgba(255,255,255,0.3)','rgba(255,255,255,0.3)','rgba(255,255,255,0.3)'  
  121.                                      ,'rgba(255,255,255,0)']  
  122.                         }  
  123.                     }  
  124.                 } ],  
  125.                 //系列列表配置  
  126.                 series : [ {  
  127.                     //柱状图  
  128.                     type : 'bar',  
  129.                     //修改柱状图宽度  
  130.                     barWidth : 35,  
  131.                     //系列名称  
  132.                     name : '保障房数量',  
  133.                     boundaryGap : false,  
  134.                     //系列中的数据内容数组  
  135.                     data : [ 0, temp[0].value, temp[1].value, temp[2].value, temp[3].value,temp[4].value,temp[5].value,  
  136.                              temp[6].value,temp[7].value,temp[8].value,temp[9].value,temp[10].value,temp[11].value,  
  137.                              temp[12].value,temp[13].value,temp[14].value,temp[15].value,temp[16].value,temp[17].value,0 ],   
  138.                     //系列样式  
  139.                     itemStyle : {  
  140.                         normal : {  
  141.                             //柱状图颜色  
  142.                             color : function(params) {  
  143.                                 // 颜色列表  
  144.                                 var colorList = [ 'rgba(0,0,0,0)',  
  145.                                         'rgb(194,35,43)', 'rgb(182,196,53)','rgb(253,206,15)', 'rgb(233,125,38)',  
  146.                                         'rgb(39,115,124)', 'rgb(255,131,99)','rgb(251,218,97)', 'rgb(95,192,221)',  
  147.                                         'rgb(226,80,75)', 'rgb(213, 75, 68)','rgb(285, 121, 29)','rgb(201, 118, 232)',  
  148.                                         'rgb(95, 165, 85)','rgb(253, 110, 56)','rgb(216, 50, 65)','rgb(233, 125, 38)',  
  149.                                         'rgb(39, 110, 114)','rgb(233, 105, 8)'];  
  150.                                 //返回颜色  
  151.                                 return colorList[params.dataIndex];  
  152.                             },  
  153.                             //柱状图圆角  
  154.                             barBorderRadius : 3  
  155.                         }  
  156.                     },  
  157.                 } ]  
  158.             };  
  159.             //使用刚指定的配置项和数据显示图表。  
  160.             myChart.setOption(option);  
  161.         }  



效果：


 


● 示例二、折线图


配置参数：

[javascript] view plain copy
  1. function drawrffl(ec)  
  2.         {  
  3.             //使用SQLCode获取数据  
  4.             var temp;  
  5.             $.ajax({  
  6.              type: "GET",  
  7.              url: "${ctx}/dp/piequery?info.sqlcode=20160512160333028",  
  8.              data: {},  
  9.              async : false,  
  10.              success: function(data){  
  11.                     data = eval('('+data+')');  
  12.                     temp = data;  
  13.              }  
  14.             });  
  15.               
  16.             var myChart = ec.init(document.getElementById('rffl'));  
  17.             var option = {  
  18.                     title : {  
  19.                         x:'left'  
  20.                     },tooltip : {  
  21.                         trigger: 'axis'  
  22.                     },  
  23.                   //绘图网格配置  
  24.                     grid : { // 控制图的大小，调整下面这些值就可以，  
  25.                         y : 25,  
  26.                         x : 90,  
  27.                         x2 : 60,  
  28.                         y2 : 60,// y2可以控制 X轴跟Zoom控件之间的间隔，避免以为倾斜后造成 label重叠到zoom上  
  29.                         //去除边框线  
  30.                         borderWidth : 0,  
  31.                     },  
  32.                     calculable : true,  
  33.                     xAxis : [  
  34.                              {  
  35.                                  type : 'category',  
  36.                                  boundaryGap : false,  
  37.                                  data : ['',temp[1].name,temp[2].name,temp[3].name,temp[4].name,temp[5].name,temp[6].name,temp[7].name,temp[8].name],  
  38.                                //坐标轴刻度标签的相关设置          
  39.                                 axisLabel : {  
  40.                                     //刻度样式  
  41.                                     textStyle : {  
  42.                                         //文字透明  
  43.                                         color : 'rgba(255,255,255,0.5)',  
  44.                                     },  
  45.                                     //坐标轴名称与轴线之间的距离  
  46.                                     nameGap : 25  
  47.                                 },  
  48.                                 //轴线  
  49.                                 axisLine : {  
  50.                                     //轴线样式  
  51.                                     lineStyle : {  
  52.                                         //设置轴线宽度  
  53.                                         width : 1,  
  54.                                         //轴线颜色  
  55.                                         color : 'rgba(1,134,198,0.8)'  
  56.                                     }  
  57.                                 },  
  58.                                 //分割线  
  59.                                 splitLine : {  
  60.                                     //分割线样式  
  61.                                     lineStyle : {  
  62.                                         //分割线透明度  
  63.                                         color : ['rgba(255,255,255,0)','rgba(255,255,255,0.3)','rgba(255,255,255,0.3)',  
  64.                                                  'rgba(255,255,255,0.3)','rgba(255,255,255,0.3)','rgba(255,255,255,0.3)',  
  65.                                                  'rgba(255,255,255,0.3)','rgba(255,255,255,0.3)','rgba(255,255,255,0.3)',  
  66.                                                  'rgba(255,255,255,0)']  
  67.                                     }  
  68.                                 },  
  69.                                 //刻度线设置  
  70.                                 axisTick : {  
  71.                                     //隐藏刻度线  
  72.                                     show : false,  
  73.                                 }  
  74.                              }  
  75.                          ],  
  76.                        //y轴相关设置  
  77.                          yAxis : [  
  78.                                   {  
  79.                                       type : 'value',  
  80.                                       axisLabel : {  
  81.                                             //刻度样式  
  82.                                             textStyle : {  
  83.                                                 //文字透明  
  84.                                                 color : 'rgba(255,255,255,0.5)'  
  85.                                             },  
  86.                                             formatter: '{value}'  
  87.                                       },  
  88.                                       min:0,  
  89.                                       max:110000  
  90.                                   }  
  91.                      ],  
  92.                      series : [  
  93.                                 {  
  94.                                     //name:"企业法人登记",  
  95.                                     type:'line',  
  96.                                     //smooth:true,  
  97.                                     data:[temp[0].value,temp[1].value,temp[2].value,temp[3].value,temp[4].value,temp[5].value,temp[6].value,temp[7].value,temp[8].value],  
  98.                                     itemStyle: {  
  99.                                         normal: {  
  100.                                                 //填充区域  
  101.                                                 areaStyle : {  
  102.                                                     //默认填充  
  103.                                                     type : 'default',  
  104.                                                     //填充颜色  
  105.                                                     color : 'rgba(251,217,97,0.4)'  
  106.                                                 },  
  107.                                                 //线条颜色  
  108.                                                 color : 'rgba(2, 208, 192,0.8)'  
  109.                                             }  
  110.                                     },  
  111.                                     markPoint : {  
  112.                                         data : [  
  113.                                             {type : 'min', name: '最小值'},  
  114.                                             {type : 'max', name: '最大值'}  
  115.                                         ]  
  116.                                     }  
  117.                                 }  
  118.                     ]  
  119.             };  
  120.         myChart.setOption(option);  
  121.     }  



效果：


  

● 示例三、堆积条形图


配置参数：


[javascript] view plain copy
  1. function drawnljg(ec){  
  2.             var nannljg;  
  3.             var nvnljg;  
  4.             $.post("${ctx}/dp/queryjson?info.sqlcode=20160420145043438",  
  5.                     { Action: "post"},  
  6.                     function(data, textStatus){  
  7.                         data = eval('('+data+')');  
  8.                         nannljg=data[1];  
  9.                         $.post("${ctx}/dp/queryjson?info.sqlcode=20160420150431432",  
  10.                                 { Action: "post"},  
  11.                                 function(data, textStatus){  
  12.                                     data = eval('('+data+')');  
  13.                                     nvnljg=data[1];  
  14.                                     var myChart = ec.init(document.getElementById("nljg"));  
  15.                                     var option = {  
  16.                                             tooltip : {  
  17.                                                   
  18.                                             },  
  19.                                             legend: {  
  20.                                                 data:['男', '女'],  
  21.                                               show:false  
  22.                                             },  
  23.                                             toolbox: {  
  24.                                                   
  25.                                                 feature : {  
  26.                                                     mark : {show: true},  
  27.                                                     dataView : {show: true, readOnly: false},  
  28.                                                     magicType : {show: true, type: ['line', 'bar', 'stack', 'tiled']},  
  29.                                                     restore : {show: true},  
  30.                                                     saveAsImage : {show: true}  
  31.                                                 }  
  32.                                             },  
  33.                                             calculable : true,  
  34.                                             xAxis : [  
  35.                                                 {  
  36.                                                     type : 'value',  
  37.                                                     splitNumber: 100000 ,  
  38.                                                       
  39.                                                     show:false,  
  40.                                                       
  41.                                                 }  
  42.                                             ],  
  43.                                             yAxis : [  
  44.                                                 {  
  45.                                                     type : 'category',  
  46.                                                     data : ['20岁以下','21~30岁','31~40岁','41~50岁','51~60岁','61岁以上']  
  47.                                                 ,axisLabel : {  
  48.                                                     textStyle : {  
  49.                                                         color : '#717E88'  
  50.                                                     }  
  51.                                                 }}  
  52.                                                   
  53.                                             ],  
  54.                                             grid: { // 控制图的大小，调整下面这些值就可以，  
  55.                                                  x: 80,  
  56.                                                  y:30,  
  57.                                                  x2: 10,  
  58.                                                  y2: 10,// y2可以控制 X轴跟Zoom控件之间的间隔，避免以为倾斜后造成 label重叠到zoom上  
  59.                                              },  
  60.                                             series : [  
  61.                                                 {  
  62.                                                     name:'男',  
  63.                                                     type:'bar',  
  64.                                                     stack: '总量',  
  65.                                                     itemStyle : { normal: {color: "#FF8363"}},  
  66.                                                     data:nannljg  
  67.                                                 },  
  68.                                                 {  
  69.                                                     name:'女',  
  70.                                                     type:'bar',  
  71.                                                     stack: '总量',  
  72.                                                   itemStyle : { normal: {  
  73.                                                     color:"#0086CB",  
  74.                                                     label : {show: true,   
  75.                                                              position: 'right',  
  76.                                                              textStyle: {  
  77.                                                                                     color: '#717E88'  
  78.                                                                                 },  
  79.                                                             formatter: function (params){  
  80.                                                               for (var i = 0, l = option.yAxis[0].data.length; i < l; i++) {  
  81.                                                                 return ((option.series[0].data[i] + params.value)/10000).toFixed(1)+'万';   
  82.                                                               }  
  83.                                                             }  
  84.                                                             }}},  
  85.                                                       
  86.                                                     data:nvnljg  
  87.                                                       
  88.                                                 }  
  89.                                             ]  
  90.                                         };  
  91.                                                       
  92.                                     myChart.setOption(option);  
  93.                         });  
  94.             });  
  95.               
  96.           
  97.               
  98.         }  



效果：


                              


● 示例四、环形图


配置参数：


[javascript] view plain copy
  1. function drawZcdybgcytj(ec)  
  2.     {  
  3.         //使用SQLCode获取数据  
  4.         var temp;  
  5.         $.ajax({  
  6.          type: "GET",  
  7.          url: "${ctx}/dp/piequery?info.sqlcode=20160517104737830",//20160421133808633  
  8.          data: {},  
  9.          async : false,  
  10.          success: function(data){  
  11.                 data = eval('('+data+')');  
  12.                 temp = data;  
  13.          }  
  14.         });  
  15.           
  16.         var myChart = ec.init(document.getElementById('frlxtjt'));  
  17.         option = {  
  18.                 tooltip : {  
  19.                     trigger: 'item',  
  20.                     formatter: "{a} <br/>{b} : {c} ({d}%)"  
  21.                 },  
  22.                 legend: {  
  23.                     orient : 'vertical',  
  24.                     x : 'right',  
  25.                     textStyle : {  
  26.                         //文字透明  
  27.                         color : 'rgba(255,255,255,0.5)',  
  28.                     },  
  29.                     data:[temp[0].name,temp[1].name,temp[2].name,temp[3].name,temp[4].name]  
  30.                 },  
  31.                 
  32.                 calculable : true,  
  33.                 series : [  
  34.                     {  
  35.                         name:'法人类型',  
  36.                         type:'pie',  
  37.                         radius : ['55%', '75%'],  
  38.                         center : ['50%', '44%'],  
  39.                         itemStyle : {  
  40.                             normal : {  
  41.                                 label : {  
  42.                                     show : false  
  43.                                 },  
  44.                                 labelLine : {  
  45.                                     show : false  
  46.                                 }  
  47.                             },  
  48.                             emphasis : {  
  49.                                 label : {  
  50.                                     show : false,  
  51.                                     position : 'center',  
  52.                                     textStyle : {  
  53.                                         fontSize : '30',  
  54.                                         fontWeight : 'bold'  
  55.                                     }  
  56.                                 }  
  57.                             }  
  58.                         },  
  59.                         data:[  
  60.                             {value:temp[0].value, name:temp[0].name},  
  61.                             {value:temp[1].value, name:temp[1].name},  
  62.                             {value:temp[2].value, name:temp[2].name},  
  63.                             {value:temp[3].value, name:temp[3].name},  
  64.                             {value:temp[4].value, name:temp[4].name}  
  65.                         ]  
  66.                     }  
  67.                 ]  
  68.             };  
  69.         myChart.setOption(option);  
  70.     }  


效果：


                              





● 示例五、柱状+折线


配置参数：


[javascript] view plain copy
  1. //分街道 -人房分离差异情况柱状图     
  2.         function drawRfflqk(ec) {  
  3.             var temp;  
  4.             $.ajax({  
  5.                 type : "GET",  
  6.                 url : "${ctx}/dp/piequery?info.sqlcode=20160519192023986",  
  7.                 data : {},  
  8.                 async : false,  
  9.                 success : function(data) {  
  10.                     temp = eval('(' + data + ')');  
  11.                 }  
  12.             });  
  13.               
  14.             var myChart = ec.init(document.getElementById("rfflqk"));  
  15.   
  16.             option = {  
  17.                 title : {  
  18.                     text : '人房分离差异情况统计图'  
  19.                 },  
  20.                 tooltip : {  
  21.                     trigger : 'axis'  
  22.                 },  
  23.                 legend : {  
  24.                     x : 'center',  
  25.                     y : 'bottom',  
  26.                     data : [ '最近10年人房分离差异柱状图', '最近10年人房分离差异折线图' ]  
  27.                 },  
  28.                 calculable : true,  
  29.                 xAxis : [ {  
  30.                     type : 'category',  
  31.                     data : [ temp[0].name, temp[1].name, temp[2].name, temp[3].name, temp[4].name,  
  32.                              temp[5].name, temp[6].name, temp[7].name]  
  33.                 } ],  
  34.                 grid : { // 控制图的大小，调整下面这些值就可以，  
  35.                     x : 100,  
  36.                     x2 : 100,  
  37.                     y2 : 90,// y2可以控制 X轴跟Zoom控件之间的间隔，避免以为倾斜后造成 label重叠到zoom上  
  38.                 },  
  39.                 yAxis : [ {  
  40.                     type : 'value',  
  41.                     axisLabel : {  
  42.                         formatter : '{value} 户'  
  43.                     }  
  44.                 } ],  
  45.                 series : [  
  46.   
  47.                         {  
  48.                             name : '最近10年人房分离差异柱状图',  
  49.                             type : 'bar',  
  50.                             data : [ temp[0].value, temp[1].value, temp[2].value, temp[3].value, temp[4].value,  
  51.                                      temp[5].value, temp[6].value, temp[7].value],  
  52.                             markPoint : {  
  53.                                 data : [ {  
  54.                                     type : 'max',  
  55.                                     name : '最大值'  
  56.                                 }, {  
  57.                                     type : 'min',  
  58.                                     name : '最小值'  
  59.                                 } ]  
  60.                             },  
  61.                             itemStyle : {  
  62.                                 normal : {  
  63.                                     color : "#08BA70"  
  64.                                 }  
  65.                             }  
  66.                         },  
  67.                         {  
  68.                             name : "最近10年人房分离差异折线图",  
  69.                             type : 'line',  
  70.                             smooth : 'true',  
  71.                             data : [ temp[0].value, temp[1].value, temp[2].value, temp[3].value, temp[4].value,  
  72.                                      temp[5].value, temp[6].value, temp[7].value ],  
  73.                             markPoint : {  
  74.                                 data : [ {  
  75.                                     type : 'max',  
  76.                                     name : '最大值'  
  77.                                 }, {  
  78.                                     type : 'min',  
  79.                                     name : '最小值'  
  80.                                 } ]  
  81.                             }  
  82.                         } ]  
  83.             };  
  84.             myChart.setOption(option);  
  85.         }  



效果：




● 示例六、折线走势


配置参数：

[javascript] view plain copy
  1. function drawFrdjtj(ec)  
  2.     {  
  3.         //使用SQLCode获取数据  
  4.         var cldjYear;  
  5.         var cldjValue;  
  6.         $.ajax({  
  7.          type: "GET",  
  8.          url: "${ctx}/dp/queryjson?info.sqlcode=20160519172806993",//成立 20160519172806993  old:20160420112618683  
  9.          data: {},  
  10.          async : false,  
  11.          success: function(data){  
  12.                 data = eval('('+data+')');  
  13.                 cldjYear = data[0];  
  14.                 cldjValue = data[1];  
  15.          }  
  16.         });  
  17.           
  18.         var bgdjValue;  
  19.         $.ajax({  
  20.              type: "GET",  
  21.              url: "${ctx}/dp/queryjson?info.sqlcode=20160519172831038",//变更  
  22.              data: {},  
  23.              async : false,  
  24.              success: function(data){  
  25.                     data = eval('('+data+')');  
  26.                     bgdjValue = data[1];  
  27.              }  
  28.             });  
  29.           
  30.         var zxdjValue;  
  31.         $.ajax({  
  32.              type: "GET",  
  33.              url: "${ctx}/dp/queryjson?info.sqlcode=20160519172846889",//注销  
  34.              data: {},  
  35.              async : false,  
  36.              success: function(data){  
  37.                     data = eval('('+data+')');  
  38.                     zxdjValue = data[1];  
  39.              }  
  40.             });  
  41.           
  42.         var myChart = ec.init(document.getElementById('frdjtj'));  
  43.         var option = {  
  44.                 title : {  
  45.                     text: '法人登记走势图 ',  
  46.                     x:'left'  
  47.                 },tooltip : {  
  48.                     trigger: 'axis'  
  49.                 },  
  50.                 legend: {  
  51.                     data:['成立','变更','注销'],  
  52.                     y : 'bottom'  
  53.                 },  
  54.                   
  55.                 calculable : true,  
  56.                 xAxis : [  
  57.                          {  
  58.                              type : 'category',  
  59.                              boundaryGap : false,  
  60.                              data : cldjYear,  
  61.                          }  
  62.                      ],  
  63.                      yAxis : [  
  64.                               {  
  65.                                   type : 'value',  
  66.                                   axisLabel : {  
  67.                                       formatter: '{value}'  
  68.                                   },  
  69.                               }  
  70.                  ],  
  71.                  series : [  
  72.                             {  
  73.                                 name:"成立",  
  74.                                 type:'line',  
  75.                                 smooth:true,  
  76.                                 data:cldjValue,  
  77.                                 itemStyle: {  
  78.                                     normal: {  
  79.                                         areaStyle: {type: 'default',  
  80.                                             //填充颜色  
  81.                                             color : 'rgba(95, 165, 85,0.8)'  
  82.                                             },  
  83.                                         }  
  84.                                 },  
  85.                                 markPoint : {  
  86.                                     data : [  
  87.                                         {type : 'max', name: '最大值'},  
  88.                                         {type : 'min', name: '最小值'}  
  89.                                     ]  
  90.                                 }  
  91.                             },  
  92.                             {  
  93.                                 name:"变更",  
  94.                                 type:'line',  
  95.                                 smooth:true,  
  96.                                 data:bgdjValue,  
  97.                                 itemStyle: {  
  98.                                     normal: {  
  99.                                         areaStyle: {type: 'default',  
  100.                                             //填充颜色  
  101.                                             color : 'rgba(255, 127, 80,0.8)'  
  102.                                             },  
  103.                                         }  
  104.                                 },  
  105.                                 markPoint : {  
  106.                                     data : [  
  107.                                         {type : 'max', name: '最大值'},  
  108.                                         {type : 'min', name: '最小值'}  
  109.                                     ]  
  110.                                 }  
  111.                             },  
  112.                             {  
  113.                                 name:"注销",  
  114.                                 type:'line',  
  115.                                 smooth:true,  
  116.                                 data:zxdjValue,  
  117.                                 itemStyle: {  
  118.                                     normal: {  
  119.                                         areaStyle: {type: 'default',  
  120.                                             //填充颜色  
  121.                                             color : 'rgba(135, 206, 250,0.8)'  
  122.                                             },  
  123.                                         }  
  124.                                 },  
  125.                                 markPoint : {  
  126.                                     data : [  
  127.                                         {type : 'max', name: '最大值'},  
  128.                                         {type : 'min', name: '最小值'}  
  129.                                     ]  
  130.                                 }  
  131.                             }  
  132.                 ]  
  133.         };  
  134.         myChart.setOption(option);  
  135.     }  

效果：





以下为静态数据示例


● 示例1




示例1配置：

[javascript] view plain copy
  1. //租金范围 饼图 1000以下 1000-2000 2000-5000 5000-8000 8000 以上  
  2.     function drawZjfw(ec)  
  3.     {  
  4.         var myChart = ec.init(document.getElementById('zjfw'));  
  5.         var option = {  
  6.                 title : {  
  7.                     text: '租金范围统计分析',  
  8.                     x :'center'  
  9.                 },  
  10.                 tooltip : {  
  11.                     trigger: 'item',  
  12.                     formatter: "{a} <br/>{b} : {c} ({d}%)"  
  13.                 },  
  14.                 legend: {  
  15.                     x : 'center',  
  16.                     y : 'bottom',  
  17.                     data:['1000以下','1000-2000','2000-5000','5000-8000','8000 以上']  
  18.                 },  
  19.                 calculable : true,  
  20.                 series : [  
  21.                     {  
  22.                         name:'租金范围',  
  23.                         type:'pie',  
  24.                         radius : [30, 110],  
  25.                         center : ['50%', '50%'],  
  26.                         roseType : 'area',  
  27.                         x: '50%',               // for funnel  
  28.                         max: 40,                // for funnel  
  29.                         sort : 'ascending',     // for funnel  
  30.                         data:[  
  31.                             {value:15, name:'1000以下'},  
  32.                             {value:52, name:'1000-2000'},  
  33.                             {value:86, name:'2000-5000'},  
  34.                             {value:32, name:'5000-8000'},  
  35.                             {value:3, name:'8000 以上'},  
  36.                         ]  
  37.                     }  
  38.                 ]  
  39.             };  
  40.         myChart.setOption(option);  
  41.     }     
  42.     //房型结构 饼图  
  43.     function drawFwjg(ec)  
  44.     {  
  45.         var myChart = ec.init(document.getElementById('fwjg'));  
  46.         var option = {  
  47.                 title : {  
  48.                     text: '房屋结构统计分析',  
  49.                     x :'center'  
  50.                 },  
  51.                 tooltip : {  
  52.                     trigger: 'item',  
  53.                     formatter: "{a} <br/>{b} : {c} ({d}%)"  
  54.                 },  
  55.                 legend: {  
  56.                     x : 'center',  
  57.                     y :'bottom',  
  58.                     data:['砖木结构','砖混结构','钢筋混泥土','钢结构']  
  59.                 },  
  60.                 calculable : true,  
  61.                 series : [  
  62.                     {  
  63.                         name:'房屋结构统',  
  64.                         type:'pie',  
  65.                         radius : '50%',  
  66.                         center: ['50%', '50%'],  
  67.                         data:[  
  68.                             {value:335, name:'砖木结构'},  
  69.                             {value:310, name:'砖混结构'},  
  70.                             {value:234, name:'钢筋混泥土'},  
  71.                             {value:135, name:'钢结构'}  
  72.                         ]  
  73.                     }  
  74.                 ]  
  75.             };  
  76.         myChart.setOption(option);  
  77.     }     

● 示例2（和示例1相似）



示例2代码：

[javascript] view plain copy
  1. //法人类别-饼图(企业法人)  
  2.     function drawQyfr(ec)  
  3.     {  
  4.         var myChart = ec.init(document.getElementById('qyfr'));  
  5.         var option = {  
  6.                 title: {  
  7.                     text: '企业法人',  
  8.                     x: 'center',  
  9.                     y: '30'  
  10.                 },  
  11.                 tooltip: {  
  12.                     trigger: 'item',  
  13.                 },  
  14.                 legend: {  
  15.                     orient: 'horizontal',  
  16.                     x: 'center',  
  17.                     y:'bottom',  
  18.                     data: ['全民所有制企业法人','集体所有制企业法人','私营企业法人','联营企业法人','中外合资经营企业法人','中外合作经营企业法人','外资企业法人']  
  19.                 },  
  20.                 calculable: true,  
  21.                 series: [{  
  22.                     name: '法人',  
  23.                     type: 'pie',  
  24.                     radius : ['20',"80"],  
  25.                     center: ['50%', '50%'],  
  26.                     roseType : 'area',  
  27.                     itemStyle: {  
  28.                         normal: {  
  29.                             label: {  
  30.                             //  show:false  
  31.                             },  
  32.                             labelLine:{  
  33.                                 show:true  
  34.                             }  
  35.                         },emphasis : {  
  36.                             label : {  
  37.                                 show : false,  
  38.                                 position : 'center',  
  39.                                 textStyle : {  
  40.                                     fontSize : '30',  
  41.                                     fontWeight : 'bold'  
  42.                                 }  
  43.                             }  
  44.                         }  
  45.                     },  
  46.                     data:[  
  47.                             {value:335, name:'全民所有制企业法人'},  
  48.                             {value:310, name:'集体所有制企业法人'},  
  49.                             {value:234, name:'私营企业法人'},                   
  50.                             {value:234, name:'联营企业法人'},                   
  51.                             {value:234, name:'中外合资经营企业法人'},                   
  52.                             {value:234, name:'中外合作经营企业法人'},                   
  53.                             {value:234, name:'外资企业法人'}              
  54.                         ]  
  55.                 }]  
  56.             };  
  57.         myChart.setOption(option);  
  58.     }  
  59.     //法人类别-饼图(非企业法人)  
  60.     function drawFqyfr(ec)  
  61.     {  
  62.         var myChart = ec.init(document.getElementById('fqyfr'));  
  63.         var option = {  
  64.                 title: {  
  65.                     text: '非企业法人',  
  66.                     x: 'center',  
  67.                     y: '30'  
  68.                 },  
  69.                 tooltip: {  
  70.                     trigger: 'item',  
  71.                 },  
  72.                 legend: {  
  73.                     orient: 'horizontal',  
  74.                     x: 'center',  
  75.                     y:'bottom',  
  76.                     data: ['机关法人','事业单位法人','社会团体法人']  
  77.                 },  
  78.                 calculable: true,  
  79.                 series: [{  
  80.                     name: '法人',  
  81.                     type: 'pie',  
  82.                     radius : ['20',"80"],  
  83.                     center: ['50%', '50%'],  
  84.                     roseType : 'area',  
  85.                     itemStyle: {  
  86.                         normal: {  
  87.                             label: {  
  88.                             //  show:false  
  89.                             },  
  90.                             labelLine:{  
  91.                                 show:true  
  92.                             }  
  93.                         },emphasis : {  
  94.                             label : {  
  95.                                 show : false,  
  96.                                 position : 'center',  
  97.                                 textStyle : {  
  98.                                     fontSize : '30',  
  99.                                     fontWeight : 'bold'  
  100.                                 }  
  101.                             }  
  102.                         }  
  103.                     },  
  104.                     data:[  
  105.                             {value:335, name:'机关法人'},  
  106.                             {value:310, name:'事业单位法人'},  
  107.                             {value:234, name:'社会团体法人'}                    
  108.                         ]  
  109.                 }]  
  110.             };  
  111.         myChart.setOption(option);  
  112.     }  

● 示例3



示例3配置：

[javascript] view plain copy
  1. //法人登记统计图   
  2.     function drawFrdjtj(ec)  
  3.     {  
  4.         var myChart = ec.init(document.getElementById('frdjtj'));  
  5.         var option = {  
  6.                 title : {  
  7.                     text: '法人登记走势图 ',  
  8.                     x:'left'  
  9.                 },tooltip : {  
  10.                     trigger: 'axis'  
  11.                 },  
  12.                 legend: {  
  13.                     data:['企业法人登记','非企业法人登记']  
  14.                 },  
  15.                 calculable : true,  
  16.                 xAxis : [  
  17.                          {  
  18.                              type : 'category',  
  19.                              boundaryGap : false,  
  20.                              data : ['2008年','2009年','2010年','2011年','2012年','2013年','2014年','2015年']  
  21.                          }  
  22.                      ],  
  23.                      yAxis : [  
  24.                               {  
  25.                                   type : 'value',  
  26.                                   axisLabel : {  
  27.                                       formatter: '{value} 人'  
  28.                                   },  
  29.                                   min:100,  
  30.                                   max:5000  
  31.                               }  
  32.                  ],  
  33.                  series : [  
  34.                             {  
  35.                                 name:"企业法人登记",  
  36.                                 type:'line',  
  37.                                 smooth:true,  
  38.                                 data:[789,807,3343,788,544,3450,3076,865],  
  39.                                 itemStyle: {normal: {areaStyle: {type: 'default'}}},  
  40.                                 markPoint : {  
  41.                                     data : [  
  42.                                         {type : 'max', name: '最大值'},  
  43.                                         {type : 'min', name: '最小值'}  
  44.                                     ]  
  45.                                 }  
  46.                             },  
  47.                             {  
  48.                                 name:"非企业法人登记",  
  49.                                 type:'line',  
  50.                                 smooth:true,  
  51.                                 data:[1340,1556,1530,1867,1473,1678,1977,1787],  
  52.                                 itemStyle: {normal: {areaStyle: {type: 'default'}}},  
  53.                                 markPoint : {  
  54.                                     data : [  
  55.                                         {type : 'max', name: '最大值'},  
  56.                                         {type : 'min', name: '最小值'}  
  57.                                     ]  
  58.                                 }  
  59.                             }  
  60.                               
  61.                 ]  
  62.         };  
  63.         myChart.setOption(option);  
  64.     }  

● 示例4



示例4配置：

[javascript] view plain copy
  1. //近10年，成立、变更、注销 折线图   
  2.     function drawFrZxt(ec)  
  3.     {  
  4.         var myChart = ec.init(document.getElementById('FrZxt'));  
  5.         var option = {  
  6.                 title : {  
  7.                     text: '近10年法人登记折线图 ',   
  8.                     x:'left'  
  9.                 },tooltip : {  
  10.                     trigger: 'axis'  
  11.                 },  
  12.                 legend: {  
  13.                     data:['成立','变更','注销'],  
  14.                     y : 'bottom'  
  15.                 },  
  16.                 calculable : true,  
  17.                 xAxis : [  
  18.                          {  
  19.                              type : 'category',  
  20.                              boundaryGap : false,  
  21.                              data : ['2005年','2006年','2007年','2008年','2009年','2010年','2011年','2012年','2013年','2014年','2015年']  
  22.                          }  
  23.                      ],  
  24.                      yAxis : [  
  25.                               {  
  26.                                   type : 'value',  
  27.                                   axisLabel : {  
  28.                                       formatter: '{value} 人'  
  29.                                   },  
  30.                                   min:100,  
  31.                                   max:5000  
  32.                               }  
  33.                  ],  
  34.                  series : [  
  35.                             {  
  36.                                 name:"成立",  
  37.                                 type:'line',  
  38.                                 smooth:true,  
  39.                                 data:[1289,807,3343,588,644,2450,1076,665,1258,2341,1398],  
  40.                                 itemStyle: {normal: {areaStyle: {type: 'default'}}},  
  41.                                 markPoint : {  
  42.                                     data : [  
  43.                                         {type : 'max', name: '最大值'},  
  44.                                         {type : 'min', name: '最小值'}  
  45.                                     ]  
  46.                                 }  
  47.                             },  
  48.                             {  
  49.                                 name:"变更",  
  50.                                 type:'line',  
  51.                                 smooth:true,  
  52.                                 data:[490,586,930,667,323,847,207,1487,2341,1025,542],  
  53.                                 itemStyle: {normal: {areaStyle: {type: 'default'}}},  
  54.                                 markPoint : {  
  55.                                     data : [  
  56.                                         {type : 'max', name: '最大值'},  
  57.                                         {type : 'min', name: '最小值'}  
  58.                                     ]  
  59.                                 }  
  60.                             },  
  61.                             {  
  62.                                 name:"注销",  
  63.                                 type:'line',  
  64.                                 smooth:true,  
  65.                                 data:[1240,1756,830,967,1473,1278,1177,787,893,875,365],  
  66.                                 itemStyle: {normal: {areaStyle: {type: 'default'}}},  
  67.                                 markPoint : {  
  68.                                     data : [  
  69.                                         {type : 'max', name: '最大值'},  
  70.                                         {type : 'min', name: '最小值'}  
  71.                                     ]  
  72.                                 }  
  73.                             }  
  74.                               
  75.                 ]  
  76.         };  
  77.         myChart.setOption(option);  
  78.     }  
阅读全文
0 0
华纳史诗冒险 知乎 华纳史诗冒险 知乎
原创粉丝点击
热门IT博客
新闻软件下载排行榜新闻软件下载排行榜
手势锁屏软件手势锁屏软件
c语言 string
魔方3数据恢复
淘宝抢红包怎么抢
matlab输入字符串数组
网络电视如何设置
linux tar exclude
js 枚举
广联达水利水电软件
linux压缩命令tar
氪金圣剑图纸数据库
淘宝印度代购药品
java监听器定义
surface book 2 知乎
弗朗索瓦特吕弗 知乎
Java接口技术
找工作用那个软件
linux下的杀毒软件
mysql error 1054
热门问题 老师的惩罚 人脸识别 我在镇武司摸鱼那些年 重生之率土为王 我在大康的咸鱼生活 盘龙之生命进化 天生仙种 凡人之先天五行 春回大明朝 姑娘不必设防，我是瞎子 漏侗充直apk 侗苗百草膏 车江三宝侗寨 李侗曾 侗家腌鱼 qq漏侗充值下载 大利侗寨旅游 寨沙侗寨旅游 小黄侗寨 大利侗寨 侗苗佰草膏效果这么样 侗歌侗妹情歌对唱 贵州黎平侗寨 黎平肇兴侗寨景区酒店 贵州从江侗歌侗戏 贵州侗戏 侗戏 侗族 侗族怎么读 侗族服饰 侗族大歌 侗族风俗 侗族的风俗 侗族打油茶 下溪侗族乡 侗族分布 侗族鼓楼 侗族民歌 侗族琵琶歌 侗族文化 贵州侗族 侗族舞蹈 侗族银饰 侗族建筑 侗族琵琶 侗族服装 侗族节日 侗族刺绣 侗族乐器 侗族语言 侗族衣服

程序博客网，程序员的互联网技术博客家园。csdn论坛精品 msdn技术资料都在这里