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

2024-04-19 18:38

本文主要是介绍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");

                   }

        

});

 

着出来的效果如下:

 


这篇关于Echarts柱状图,饼状图,折线图案例的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/918286

相关文章

PostgreSQL的扩展dict_int应用案例解析

《PostgreSQL的扩展dict_int应用案例解析》dict_int扩展为PostgreSQL提供了专业的整数文本处理能力,特别适合需要精确处理数字内容的搜索场景,本文给大家介绍PostgreS... 目录PostgreSQL的扩展dict_int一、扩展概述二、核心功能三、安装与启用四、字典配置方法

Python中re模块结合正则表达式的实际应用案例

《Python中re模块结合正则表达式的实际应用案例》Python中的re模块是用于处理正则表达式的强大工具,正则表达式是一种用来匹配字符串的模式,它可以在文本中搜索和匹配特定的字符串模式,这篇文章主... 目录前言re模块常用函数一、查看文本中是否包含 A 或 B 字符串二、替换多个关键词为统一格式三、提

Python get()函数用法案例详解

《Pythonget()函数用法案例详解》在Python中,get()是字典(dict)类型的内置方法,用于安全地获取字典中指定键对应的值,它的核心作用是避免因访问不存在的键而引发KeyError错... 目录简介基本语法一、用法二、案例:安全访问未知键三、案例:配置参数默认值简介python是一种高级编

MySQL中的索引结构和分类实战案例详解

《MySQL中的索引结构和分类实战案例详解》本文详解MySQL索引结构与分类,涵盖B树、B+树、哈希及全文索引,分析其原理与优劣势,并结合实战案例探讨创建、管理及优化技巧,助力提升查询性能,感兴趣的朋... 目录一、索引概述1.1 索引的定义与作用1.2 索引的基本原理二、索引结构详解2.1 B树索引2.2

从入门到精通MySQL 数据库索引(实战案例)

《从入门到精通MySQL数据库索引(实战案例)》索引是数据库的目录,提升查询速度,主要类型包括BTree、Hash、全文、空间索引,需根据场景选择,建议用于高频查询、关联字段、排序等,避免重复率高或... 目录一、索引是什么?能干嘛?核心作用:二、索引的 4 种主要类型(附通俗例子)1. BTree 索引(

HTML中meta标签的常见使用案例(示例详解)

《HTML中meta标签的常见使用案例(示例详解)》HTMLmeta标签用于提供文档元数据,涵盖字符编码、SEO优化、社交媒体集成、移动设备适配、浏览器控制及安全隐私设置,优化页面显示与搜索引擎索引... 目录html中meta标签的常见使用案例一、基础功能二、搜索引擎优化(seo)三、社交媒体集成四、移动

六个案例搞懂mysql间隙锁

《六个案例搞懂mysql间隙锁》MySQL中的间隙是指索引中两个索引键之间的空间,间隙锁用于防止范围查询期间的幻读,本文主要介绍了六个案例搞懂mysql间隙锁,具有一定的参考价值,感兴趣的可以了解一下... 目录概念解释间隙锁详解间隙锁触发条件间隙锁加锁规则案例演示案例一:唯一索引等值锁定存在的数据案例二:

MySQL 表的内外连接案例详解

《MySQL表的内外连接案例详解》本文给大家介绍MySQL表的内外连接,结合实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧... 目录表的内外连接(重点)内连接外连接表的内外连接(重点)内连接内连接实际上就是利用where子句对两种表形成的笛卡儿积进行筛选,我

Java Stream.reduce()方法操作实际案例讲解

《JavaStream.reduce()方法操作实际案例讲解》reduce是JavaStreamAPI中的一个核心操作,用于将流中的元素组合起来产生单个结果,:本文主要介绍JavaStream.... 目录一、reduce的基本概念1. 什么是reduce操作2. reduce方法的三种形式二、reduce

Spring Boot 整合 Redis 实现数据缓存案例详解

《SpringBoot整合Redis实现数据缓存案例详解》Springboot缓存,默认使用的是ConcurrentMap的方式来实现的,然而我们在项目中并不会这么使用,本文介绍SpringB... 目录1.添加 Maven 依赖2.配置Redis属性3.创建 redisCacheManager4.使用Sp