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

简介: 在使用Echarts之前需要做的工作是引入Echarts所需的js: <script type="text/javascript" src="${scriptsPath}/echarts/echarts.min.js" charset="utf-8"></script> 定义要在那个div区域显示图形:  <div class="similari
 

在使用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");

                   }

        

});

 

着出来的效果如下:

 


目录
相关文章
|
搜索推荐 前端开发 数据可视化
【优秀python web毕设案例】基于协同过滤算法的酒店推荐系统,django框架+bootstrap前端+echarts可视化,有后台有爬虫
本文介绍了一个基于Django框架、协同过滤算法、ECharts数据可视化以及Bootstrap前端技术的酒店推荐系统,该系统通过用户行为分析和推荐算法优化,提供个性化的酒店推荐和直观的数据展示,以提升用户体验。
547 1
【优秀python web毕设案例】基于协同过滤算法的酒店推荐系统,django框架+bootstrap前端+echarts可视化,有后台有爬虫
|
12月前
|
算法 Java Linux
java制作海报五:java 后端整合 echarts 画出 折线图,项目放在linux上,echarts图上不显示中文,显示方框口口口
这篇文章介绍了如何在Java后端整合ECharts库来绘制折线图,并讨论了在Linux环境下ECharts图表中文显示问题。
311 1
|
12月前
|
JSON JavaScript 前端开发
vue中使用echarts实现省市地图绘制,根据数据在地图上显示柱状图信息,增加涟漪特效动画效果
vue中使用echarts实现省市地图绘制,根据数据在地图上显示柱状图信息,增加涟漪特效动画效果
3169 0
|
数据可视化 数据挖掘
ECharts综合案例一:近七天跑步数据
使用ECharts进行一周跑步数据分析,通过雷达图展示多维度指标(如距离、速度、时间),颜色对比体现个人与平均表现。折线图则清晰显示每日里程趋势,代码示例展示了自定义的`radar`和`line`图表配置。图表交互性强,支持点击高亮,动画流畅,提供完整代码资源。#ECharts #跑步数据 #数据可视化
367 3
ECharts综合案例一:近七天跑步数据
|
数据可视化 数据挖掘
ECharts综合案例一:近七天跑步数据
使用ECharts展示近七天跑步数据,结合雷达图和折线图揭示运动表现。雷达图多维度呈现全程距离、速度和时间,对比平均指标;折线图清晰展示里程趋势。图表具有交互性和动画效果,通过[代码地址](https://download.csdn.net/download/No_Name_Cao_Ni_Mei/89454698)可获取详情。#ECharts #跑步数据 #数据可视化 #雷达图 #折线图
331 3
ECharts综合案例一:近七天跑步数据
Echarts——饼图折线图柱状图相互转换
Echarts——饼图折线图柱状图相互转换
553 0
|
数据采集 自然语言处理 数据可视化
ECharts 词云案例四—电影《千与千寻》部分短评
**使用ECharts和电影《千与千寻》短评创建的词云案例展示了数据可视化的力量。通过Python处理评论,提取关键词并计算频率,利用jieba和WordCloud生成词云,ECharts进一步增强了视觉效果。词云突出了角色如“千寻”、“无脸男”及关键词“勇气”、“成长”,揭示了观众的情感共鸣。示例代码和资源可在链接中获取。**
201 0
 ECharts 词云案例四—电影《千与千寻》部分短评
|
JavaScript 前端开发 数据可视化
ECharts 雷达图案例001-自定义节点动画
使用ECharts创建自定义雷达图,通过JavaScript动态更新高亮和交互反馈,增强用户体验。关键步骤包括:开启动画效果,数据更新时保持图表状态,鼠标悬浮时动态高亮指标,优化动画性能。案例展示了ECharts在数据可视化中的灵活性和表现力。[查看完整案例](https://download.csdn.net/download/No_Name_Cao_Ni_Mei/89454380)。
817 0
 ECharts 雷达图案例001-自定义节点动画
【详细流程】vue+Element UI项目中使用echarts绘制圆环图 折线图 饼图 柱状图
【详细流程】vue+Element UI项目中使用echarts绘制圆环图 折线图 饼图 柱状图
1403 0
|
12月前
|
小程序 前端开发 JavaScript
微信小程序图表制作利器:ECharts组件的使用与技巧
微信小程序图表制作利器:ECharts组件的使用与技巧
1029 1

热门文章

最新文章