Echarts柱状图，饼状图，折线图案例









在使用Echarts之前需要做的工作是引入Echarts所需的js：


<script  type="text/javascript" src="${scriptsPath}/echarts/echarts.min.js"  charset="utf-8"></script>


定义要在那个div区域显示图形：


 <div  class="similarity-sentence" id="similarity-sentence"></div>


        


 <div  class="unqualified-sentences" id="unqualified-sentences"></div>


下面的id就是是上面div的id


distributionDiagram:function(id,topSimilarSentenceInfo)  {


                            var  sentenceIndexArray = new Array();


                            var  sentenceDataArray = new Array();


                            var  colorListArray = new Array();


                            //获取句子的数量


                            if(docCheck.isNotBlank(topSimilarSentenceInfo))  {


                                     var  sentenceNum = topSimilarSentenceInfo.length;


                                     for(var  i = 0; i < sentenceNum; i++) {


                                               sentenceIndexArray.push((i  + 1) + '');


                                               sentenceDataArray.push(100);


                                              


                                               if(docCheck.isNotBlank(topSimilarSentenceInfo[i]))  {


                                                        //表示的是progress-bar-danger，高度重合，危险型


                           if(topSimilarSentenceInfo[i].similarityValue  >= 70) {


                                     colorListArray.push('#ED6F87');


                           }


                           //表示的是progress-bar-warning,表示的警告类型的


                           else  if(topSimilarSentenceInfo[i].similarityValue >= 40 &&  topSimilarSentenceInfo[i].similarityValue < 70) {


                                     colorListArray.push('#E1B465');


                           } 


                           //表示的是progress-bar-success这种颜色的，表示是的安全类型的


                           else  if(topSimilarSentenceInfo[i].similarityValue < 40) {


                                     colorListArray.push('#8ACD84');


                           }


                                               }  else {


                                                        colorListArray.push('#8ACD84');


                                               }


                                     }


                            }


                           


                        //用于初始化这个图形


                            var  myChart = echarts.init(document.getElementById(id));


                           


                            var  option = {


                                     title:{text:'句子相似度分布图'},


                                color: ['#3398DB'],


                                tooltip : {


                                    trigger: 'axis',


                                    axisPointer : {             // 坐标轴指示器，坐标轴触发有效


                                         type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'


                                    }


                                },


                                grid: {


                                    left: '3%',


                                    right: '4%',


                                    bottom: '3%',


                                    containLabel:  true


                                },


                                xAxis : [


                                    {


                                         type : 'category',


                                         data : sentenceIndexArray,


                                         axisTick: {


                                             alignWithLabel: true


                                        },


                                         axisLabel:{


                                                show:true,


                                                textStyle:{


                                                         fontSize:7


                                                }


                                        }


                                    }


                                ],


                                yAxis : [


                                    {


                                         show : true,


                                         axisLabel : {


                                             show:false


                                        },


                                         axisTick : {


                                                show:false


                                        },


                                         type : 'value'


                                    }


                                ],


                                series : [


                                    {


                                         name:'句子平均相似度',


                                         type:'bar',


                                         barWidth: '100%',


                                         tooltip:{


                                             trigger : 'item',


                                             formatter : function(params) {


                                              var sentenceIndex =  parseInt(params.name);


                                              var rate =  topSimilarSentenceInfo[sentenceIndex -1].similarityValue;


                                                 return '句子序号:' +  params.name + '<br/>平均相似度:' + rate +  '%';


                                             }


                                        },


                                         data:sentenceDataArray,


                                         itemStyle: {


                                             normal: {


                                                 color: function(params) {


                                                     // build a color map as your need.


//                                                   var colorList = [


//                                                      '#ED6F87','#ED6F87','#ED6F87','#ED6F87','#ED6F87',


//                                                      '#8ACD84','#8ACD84','#8ACD84','#8ACD84','#8ACD84',


//                                                      '#8ACD84','#8ACD84','#8ACD84','#8ACD84','#8ACD84',


//                                                      '#8ACD84','#8ACD84','#8ACD84','#8ACD84','#8ACD84'


//                                                   ];


                                                     return colorListArray[params.dataIndex]


                                                 }


                                             }


                                        }


                                    }


                                ]


                            };


                           


                            //  为echarts对象加载数据 


                       myChart.setOption(option);  


                   },








 


运行后的效果如下：




柱状图，饼状图，折线图案例：








/*


 *  name       :tuzuoquan


 *  mail       :email@qq.com


 *  date       :2016/11/27


 *  version    :1.0


 *  description:


 *  CopyRight (C) 2016-11-21


 */


(function($){


         $.studentIndex  = {


                   /*


         * 获得json数据；数据格式查看jsonData中的json文件


         * url: ajax 地址


         * params type obj {}  配置返回数据的多少，day week month


         *callback 用于实例化echart 的回调函数


         *id 用于放置echart表的dom元素 id 不用加“#”


         * name; 表盘的名字自定义


         * */


         getData:function(url,params,id,callback){


            //console.log("url = "  +url);


                            $.ajax({


                type: "POST",


                url: url,


                //async: false,


                dataType: 'json',


                contentType: 'application/json;  charset=utf-8',


                data: params,


                success: function(data) {


                                         //console.log(data);


                    callback(id,data);


                }


            });


         },


         /**


          * 初始化成图标


          * id     :表示要放置柱状图的div的id


          * json   :表示json数据的内容


          */


                   initBarChart:function(id,json)  {


            var legendDataArr =  json.legendDataArr;


            var xAxisDataArr =  json.xAxisDataArr;


            var seriesDataArr =  json.seriesDataArr;


            var title = json.title;


           


            // 基于准备好的dom，初始化echarts图表


                       var myChart =  echarts.init(document.getElementById(id));


        


                       var option = {


                        title:{


                                         show:true,


                                         text:title,


                                         textStyle:{


                                             fontSize:15,


                                              fontWeight:'normal'


                                               }


                        },


                        tooltip:  {


                               show: true


                           },


                           legend: {


                              orient  : 'horizontal',


                        x : 'center',


                        y : 'bottom',


                               data:[title/*,'月检测量2'**/]


                           },


                           xAxis : [


                               {


                                   type : 'category',


                                   data : ["12月","1月","2月","3月","4月","5月","6月","7月","8月","9月","10月","11月"]


                               }


                                               //,


                                               //{


                                               //    type : 'category',


                                               //    data : ["12月1","1月1","2月1","3月1","4月1","5月1","6月1","7月1","8月1","9月1","10月1","11月1"]


                                               //}


                           ],


                           yAxis : [


                               {


                                   type : 'value'


                               }


                           ],


                           series : [


                               {


                                   "name":"月检测量",


                                    "type":"bar",


                                   "data":[20, 40, 80,  100, 120, 80,95,70,65,55,70,80]


                               }


                           ]


                       };


                


                       option.legend.data = legendDataArr;


                       //定义x轴上的每列的标题


                       option.xAxis[0].data =  xAxisDataArr[0].data;


                       //定义x轴上的每列的值


                       for(var i = 0; i <  legendDataArr.length;i++) {


                        //添加上图例


                        option.series[i].name  = legendDataArr[i];


                        //第二个是柱状图


                        option.series[i].type  = "bar";


                        //为图标添加数据


                        option.series[i].data  = seriesDataArr[i].data;


                       }


                      


                       // 为echarts对象加载数据


                       myChart.setOption(option);


             },


             /**


              * id     :表示图标要放置的位置


              * json   :表示用于显示折线图时所用到的json数据


              */


             initLineChart:function(id,json) {


              var  myChart = echarts.init(document.getElementById(id));


            


              var  legendDataArr = json.legendDataArr;


            var xAxisDataArr =  json.xAxisDataArr;


            var seriesDataArr =  json.seriesDataArr;


            


              option  = {


                        title:{


                                         show:true,


                                         text:"天检测量",


                                         textStyle:{


                                             fontSize:15,


                                             fontWeight:'normal'


                                               }


                        },


                    tooltip : {


                        trigger: 'axis'


                    },


                    legend: {


                     orient  : 'horizontal',


                        x : 'center',


                        y : 'bottom',


                        data:['天检测量']


                    },


                    toolbox: {


                        show : true,


                        feature : {


                            mark : {show: true},


                            dataView : {show: true, readOnly:  false},


                            magicType : {show: true, type:  ['line', 'bar'/*, 'stack', 'tiled'**/]},


                            restore : {show: true},


                            saveAsImage : {show: true}


                        }


                    },


                    calculable : true,


                    xAxis : [


                       {


                            type : 'category',


                            boundaryGap : false,


                            data : ['周一','周二','周三','周四','周五','周六','周日']


                        }


                    ],


                    yAxis : [


                        {


                            type : 'value'


                       }


                    ],


                    series : [


                        {


                            name:'天检测量',


                            type:'line',


                            stack: '总量',


                            data:[120, 132, 101, 134, 90,  230, 210]


                        }


                    ]


                };


            


              option.legend.data  = legendDataArr;


                       //定义x轴上的每列的标题


                       option.xAxis[0].data =  xAxisDataArr[0].data;


                       //定义x轴上的每列的值


                       for(var i = 0; i <  legendDataArr.length;i++) {


                        //添加上图例


                        option.series[i].name  = legendDataArr[i];


                        //第二个是柱状图


                        option.series[i].type  = "line";


                        //为图标添加数据


                        option.series[i].data  = seriesDataArr[i].data;


                       }


            


              // 为echarts对象加载数据


                       myChart.setOption(option);


             },


             /**


              * id     :表示图标要放置的位置


              * json   :表示用于显示柱状图时所用到的json数据


              */


             initPieChart:function(id,json) {


              var  myChart = echarts.init(document.getElementById(id));


            


              var  legendDataArr = json.legendDataArr;


              var  seriesDataArr = json.seriesDataArr;


                option = {


                         title:{


                             show:true,


                             text:"用户来源",


                             textStyle:{


                                 fontSize:15,


                                 fontWeight:'normal'


                                  }


                    },


                    tooltip : {


                        trigger: 'item',


                        formatter: "{a} <br/>{b} :  {c} ({d}%)"


                    },


                    legend: {


                        orient : 'horizontal',


                        x : 'center',


                        y : 'bottom',


                        //data:['华南','华东','西北','西南','华北',"华中"]


                        data:legendDataArr


                    },


                    toolbox: {


                        show : true,


                        feature : {


                            mark : {show: true},


                            dataView : {show: true, readOnly:  false},


                            magicType : {


                                show: true,


                                type: ['pie', 'funnel'],


                                option: {


                                    funnel: {


                                        x: '25%',


                                        width: '50%',


                                        funnelAlign:  'center',


                                        max: 1548


                                    }


                                }


                            },


                            restore : {show: true},


                            saveAsImage : {show: true}


                        }


                    },


                    calculable : true,


                    series : [


                        {


                            name:'用户来源',


                            type:'pie',


                            radius : ['50%', '70%'],


                            itemStyle : {


                                normal : {


                                    label : {


                                        show : false


                                    },


                                    labelLine : {


                                        show : false


                                    }


                                },


                                emphasis : {


                                    label : {


                                        show : true,


                                        position : 'center',


                                        textStyle : {


                                            fontSize : '20',


                                            fontWeight :  'bold'


                                        }


                                    }


                                }


                            },


                            data:[


                                {value:seriesDataArr[0],  name:legendDataArr[0]},


                                {value:seriesDataArr[1],  name:legendDataArr[1]},


                                {value:seriesDataArr[2],  name:legendDataArr[2]},


                                {value:seriesDataArr[3],  name:legendDataArr[3]},


                                {value:seriesDataArr[4],  name:legendDataArr[4]},


                                {value:seriesDataArr[5],  name:legendDataArr[5]},


                                {value:seriesDataArr[6],  name:legendDataArr[6]}


                            ]


                        }


                    ]


                };


                       


//                       option.legend.data  = legendDataArr;


          


//                  //定义x轴上的每列的值


//                  for(var i = 0; i < legendDataArr.length;i++)  {


//                   //添加上图例


//                   option.series[0].data[i].name  = legendDataArr[i];


          


//                   //为图标添加数据


//                   option.series[0].data[i].value  = seriesDataArr[i].data;


//                  }


               


                // 为echarts对象加载数据


          myChart.setOption(option);


             }


         };


})(jQuery);


 


$(function() {


         $.studentIndex.getData(contextPath  +"/admin/index/getMonthData.action",     /**设置回调，对应的是后续项目中的action**/


                            {"id":"testId","roleId":"roleId"},             /**对应的是后续传递给后台action的params参数*/


                            'statistics-month',                            /**表示图标要放在哪个id的div中*/


                            $.studentIndex.initBarChart                    /**回调，用于生成图标用*/


         );


        


         //$.studentIndex.getData(scriptsPath  + "common/index/month.json",      /**设置回调，对应的是后续项目中的action**/


                                     //{"id":"testId","roleId":"roleId"},             /**对应的是后续传递给后台action的params参数*/


                                     //'statistics-month',                            /**表示图标要放在哪个id的div中*/


                                     //$.studentIndex.initBarChart                    /**回调，用于生成图标用*/


                   //);


        


         //$.studentIndex.getData(scriptsPath  + "common/index/week.json",       /**设置回调，对应的是后续项目中的action**/


                   //       {"id":"testId","roleId":"roleId"},             /**对应的是后续传递给后台action的params参数*/


                            //'statistics-week',                           /**表示图标要放在哪个id的div中*/


                            //$.studentIndex.initLineChart                   /**回调，用于生成图标用*/


         //);


         $.studentIndex.getData(


                            contextPath  + "/admin/index/getDayData.action",     /**设置回调，对应的是后续项目中的action**/


                            {"id":"testId","roleId":"roleId"},             /**对应的是后续传递给后台action的params参数*/


                            'statistics-week',                            /**表示图标要放在哪个id的div中*/


                            $.studentIndex.initLineChart                    /**回调，用于生成图标用*/


         );


        


//       $.studentIndex.getData(


//                          scriptsPath  + "/student/index/user.json",       /**设置回调，对应的是后续项目中的action**/


//                          {"id":"testId","roleId":"roleId"},             /**对应的是后续传递给后台action的params参数*/


//                          'statistics-user',                             /**表示图标要放在哪个id的div中*/


//                          $.studentIndex.initPieChart                   /**回调，用于生成图标用*/


//       );


        


         $.studentIndex.getData(


                            contextPath  + "/admin/index/groupByArea.action",      /**设置回调，对应的是后续项目中的action**/


                            {"id":"testId","roleId":"roleId"},             /**对应的是后续传递给后台action的params参数*/


                            'statistics-user',                             /**表示图标要放在哪个id的div中*/


                            $.studentIndex.initPieChart                   /**回调，用于生成图标用*/


         );


        


         //$.studentIndex.initPieChart("statistics-user","");


        


         if  ((navigator.userAgent.indexOf('MSIE') >= 0)


                       &&  (navigator.userAgent.indexOf('Opera') < 0)){


                   $("#statistics-month").find("div:first-child").css("margin-left","-155px");


                   }


        


});








 


着出来的效果如下：


 
				


				
时间： 2024-10-03 03:28:24

		
		


		


	

	
	

		


		
Echarts柱状图，饼状图，折线图案例的相关文章


						

		

			

                java中制作折线图 柱状图 饼状图
			

		

		

									

				问题描述 java中制作折线图 柱状图 饼状图 java中 jfreechart 如何从数据库中读取数据,显示的时候作为一个动态的曲线图展示出来,这个要如何实现?谁有好的建议提一下,或者给个demo看看			

		

	

				

		

			

                jfreechart jsp mysql-jfreechart怎么从mysql读取数据生成柱状图饼状图并显示到web页面
			

		

		

									

				问题描述 jfreechart怎么从mysql读取数据生成柱状图饼状图并显示到web页面 jfreechart怎么从mysql读取数据生成柱状图饼状图并显示到web页面,最好能有个实例.			

		

	

				

		

			

                jQuery.Highcharts.js绘制柱状图饼状图曲线图_jquery
			

		

		

									

				在数据统计和分析业务中,有时会遇到客户需要在一个图表中将柱状图.饼状图.曲线图的都体现出来,即可以从柱状图中看出具体数据.又能从曲线图中看出变化趋势,还能从饼状图中看出各部分数据比重.Highcharts可以轻松实现三图合一的效果. 复制代码 代码如下: var chart;             $(document).ready(function() {                 chart = new Highcharts.Chart({                     c			

		

	

				

		

			

                MPAndroidChart开源图表库的使用介绍之饼状图、折线图和柱状图_java
			

		

		

									

				MPAndroidChart开源图表库之饼状图 为大家介绍一款图标开源库MPAndroidChart,它不仅可以在Android设备上绘制各种统计图表,而且可以对图表进行拖动和缩放操作,用起来非常灵活.MPAndroidChart同样拥有常用的图表类型:线型图.饼图.柱状图和散点图. mpandroidchartlibrary.jar包下载地址: https://github.com/PhilJay/MPAndroidChart/releases 下面主要实现以下饼状图: 1.从上面的地址中下载			

		

	

				

		

			

                jfreechart插件将数据展示成饼状图、柱状图和折线图_javascript技巧
			

		

		

									

				本文以展示柱状图为例进行介绍,当然这仅仅是一种方法而已:还有很多方法可以用于展示图表,例如自定义图表标签.使用jfreechart插件等: 1.导入js文件,包含了很多展示方法: 复制代码 代码如下: <script type="text/javascript" src=<select:link page="/js/ChartObject.js"/>></script> <script type="text/jav			

		

	

				

		

			

                一生成柱状图、横柱图、折线图的类
			

		

		

									

				以下是引用片段: <?php /** * 文件:cal_image.class.php * 功能:产生柱状.折线图.横柱图类 */ Class ImageReport { /* 图片数属性 */ var $X; //图片大小X轴 var $Y; //图片大小Y轴 var $R; //背影色R值 var $G; //背影色G值 var $B; //背影色B值 var $TRANSPARENT; //是否透明1或0 var $IMAGE; //图片对像 /* 附加属性 */ var $ARRAYSP			

		

	

				

		

			

                echarts+java+ajax实现动态线状图实例
			

		

		

									

				echarts官方都是静态的例子,没有结合后台代码的例子.本站提供最全的echarts教程和实例.希望对大家有帮助.废话不多说.今天分享一下:echarts+java+ajax实现动态线状图实例. 先看效果图: 1.html代码+JavaScript代码+ajax调用:  代码如下 复制代码 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4			

		

	

				

		

			

                D3.js实现折线图的方法详解_javascript技巧
			

		

		

									

				前言 D3.js是一个帮助开发者操纵基于数据的文档的JavaScript类库,在<D3.js实现柱状图的方法详解>中已经给大家介绍过如何用D3.js来实现一个简单的柱状图了,今天我们来学习用D3.js来实现折线图,感兴趣的朋友们下面来一起看看吧. 折线图由坐标轴.线条和点组成.和实现柱状图一样,我们还是先把大概的画图框架搭起来,代码如下(别忘了添加D3.js): <!DOCTYPE html> <html lang="en"> <head>			

		

	

				

		

			

                使用Silverlight Toolkit绘制图表(下)--饼图,折线图,散点图
			

		

		

									

				在上一篇文章中,介绍了如何使用Silverlight Toolkit提供的Chart控件绘制柱状图(Column,Bar), 今天会继续 使用上文中所创建的代码,我们只要做很少的修改就可以让柱状图显示变成饼图,折线图或散点图. 好了,开始今天的正文. 首先,我们要新创建一个饼图的"Silverlight 控件",并将其命名为:PieSample.xaml 然后我们拷贝相应的ColumnSample.xaml,ColumnSample.xaml.cs中的相应代码到: PieSample.			

		

	

				

		

			

                C#在网页里画折线图的坐标轴问题
			

		

		

									

				问题描述 我需要在网页里将从数据库里的来的信息显示成图表,一共有4列,分别为总价1,总价2,均价1,均价2总价为柱状图,均价为折线图,显示在一张图标内总价显示正常但加入均价时我用下面代码CreateYAxis(Chart1,Chart1.ChartAreas[0],Chart1.Series[2],36,5);CreateYAxis(Chart1,Chart1.ChartAreas[0],Chart1.Series[3],36,5);他在图表的右边出现了2个纵轴.我在前面添加了areaAxis.