首页 > 代码库 > 【Echarts】百度Echarts的使用入门+两个简单的小例子+心得

【Echarts】百度Echarts的使用入门+两个简单的小例子+心得

2024-10-10 19:54:02   217人阅读

Echarts对于展示结果，有一个很好的表达方式。

1.首先，在官网将js下载到本地，引用到页面上

这里是在开发环境，所以下载最后源代码这个

技术分享

 

技术分享

managerResult.jsp

技术分享 
 1 <%@ page language="java" contentType="text/html; charset=utf-8"
 2     pageEncoding="utf-8"%>
 3 <!DOCTYPE html>
 4 <html  lang="en">
 5     <head>
 6         <meta charset="utf-8">
 7         <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
 8         <meta name="format-detection" content="telephone=no" />
 9         <meta name="apple-mobile-web-app-capable" content="yes" />
10         <meta name="viewport" content="width=device-width,initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no" />
11         <meta name="description" content="">
12         <meta name="keywords" content="">
13         <title>Echarts图表统计结果</title>
14         <link rel="stylesheet" type="text/css" href="../quest/css/bootstrap.min.css"/>
15     </head>
16     <body>
17         <div class="container">
18             <div class="row">
19                 <div id="mainPie" style="width: 800px;height:400px;"></div>
20                 <div id="mainBar" style="width: 800px;height:400px;"></div>
21             </div>
22         </div>
23     </body>
24     <script type="text/javascript" src="/resources/bootstrap-3.3.5-dist/js/jquery-1.10.2.min.js"></script>
25     <script type="text/javascript" src="/resources/bootstrap-3.3.5-dist/js/bootstrap.min.js"></script>
26     <script type="text/javascript" src= "../quest/js/echarts.js"></script>
27     <script type="text/javascript" src= "../quest/js/managerResult.js"></script>
28 </html>
View Code

页面中分别为 柱状图和 饼状图 放置了两个div作为容器

 

2.managerResult.js

步骤就3步

1》var myChartBar = echarts.init(document.getElementById(‘mainBar‘)); 获取容器

2》配置option

3》myChartBar.setOption(optionBar); 初始化图表进行展示

技术分享 
  1 $(document).ready(function(){
  2       //获取饼状图容器 并 初始化echarts实例
  3     var myChartPie = echarts.init(document.getElementById(‘mainPie‘));
  4     
  5     
  6     //饼状图 配置
  7     var optionPie = {
  8             title : {//标题
  9                 text: ‘问卷统计调查结果‘,
 10                 subtext: ‘多条件组合‘,
 11                 x:‘center‘
 12             },
 13             tooltip : {//光标在上显示信息
 14                 trigger: ‘item‘,
 15                 formatter: "{a} <br/>{b} : {c} ({d}%)",
 16                 backgroundColor : ‘#986c11‘,
 17             },
 18             toolbox: {//工具按钮
 19                 show : true,
 20                 feature : {
 21                     mark : {show: true},
 22                     dataView : {show: true, readOnly: false},
 23                     magicType : {
 24                         show: true,
 25                         type: [‘pie‘, ‘funnel‘]
 26                     },
 27                     restore : {show: true},
 28                     saveAsImage : {show: true}
 29                 }
 30             },
 31             legend: {//图例
 32                 orient: ‘vertical‘,
 33                 left: ‘left‘ ,
 34                 data: [‘统计项‘,‘未统计项‘]
 35             },
 36             series : [//系列列表  图表类型+数据源
 37                 {
 38                     name: ‘问卷统计‘,
 39                     type: ‘pie‘,
 40                     radius : ‘55%‘,
 41                     center: [‘50%‘, ‘60%‘],
 42                     data:[
 43                         {value:335, name:‘统计项‘},
 44                         {value:310, name:‘未统计项‘}
 45                     ],
 46                     itemStyle: {
 47                         emphasis: {
 48                             shadowBlur: 100,
 49                             shadowOffsetX: 10,
 50                             shadowColor: ‘rgba(0, 0, 0, 0.5)‘
 51                         }
 52                     },
 53                     label: {
 54                         normal: {
 55                             show: true,
 56                             position: ‘outside‘,
 57                             formatter :‘{a}\n{b} : {c} ({d}%)‘,
 58                             textStyle:{
 59                                 fontSize : 2,
 60                                 fontStyle : ‘normal‘
 61                             }
 62                         },
 63                     }
 64                     
 65                 }
 66             ]
 67         };
 68 
 69 
 70     // 使用刚指定的配置项和数据显示图表。
 71     myChartPie.setOption(optionPie);
 72     
 73     
 74     
 75     //获取饼状图容器 并 初始化echarts实例
 76     var myChartBar = echarts.init(document.getElementById(‘mainBar‘));
 77     
 78         //柱状图配置
 79         var optionBar = {
 80                 title:{
 81                     show : true,
 82                     text : ‘多条件分量统计‘,
 83                     x:‘center‘
 84                 },
 85                 color: [‘#3398DB‘],
 86                 tooltip : {
 87                     trigger: ‘axis‘,
 88                     axisPointer : {            // 坐标轴指示器，坐标轴触发有效
 89                         type : ‘shadow‘        // 默认为直线，可选为：‘line‘ | ‘shadow‘
 90                     }
 91                 },
 92                  toolbox: {
 93                     show : true,
 94                     feature : {
 95                         dataView : {show: true, readOnly: false},
 96                         magicType : {show: true, type: [‘line‘, ‘bar‘]},
 97                         restore : {show: true},
 98                         saveAsImage : {show: true}
 99                     }
100                 },
101                 grid: {//网格配置
102                     show : true,
103                     left: ‘3%‘,
104                     right: ‘15%‘,
105                     bottom: ‘3%‘,
106                     shadowBlur : 10,
107                     containLabel: true
108                 },
109                 xAxis : [
110                     {
111                         name : ‘筛选条件类目‘,
112                         type : ‘category‘,
113                         data : [
114                             {
115                                 value: ‘周一‘,
116                                 textStyle: {
117                                     fontSize: 4,
118                                     baseline : ‘middle‘,
119                                 }
120                             }, ‘Tue‘, ‘Wed‘, ‘Thu‘, ‘Fri‘, ‘Sat‘, ‘Sun‘],
121                         axisTick: {
122                             alignWithLabel: true
123                         },
124                         axisLabel :{
125                             rotate : 50
126                         }
127                         
128                     }
129                 ],
130                 yAxis : [
131                     {
132                         name : ‘统计人数‘,
133                         type : ‘value‘
134                     }
135                 ],
136                 series : [
137                     {
138                         name:‘问卷人数‘,
139                         type:‘bar‘,
140                         barWidth: ‘30%‘,
141                         label: {
142                             normal: {
143                                 show: true,
144                                 position: ‘top‘,
145                                 formatter :‘{b} : {c}‘,
146                                 textStyle:{
147                                     fontSize : 2,
148                                     fontStyle : ‘normal‘
149                                 }
150                             }
151                         },
152                         data:[10, 52, 200, 334, 390, 330, 220]
153                     }
154                 ]
155             };
156 
157     
158         myChartBar.setOption(optionBar);
159     
160     
161     
162     
163 });
View Code

 

 

心得：

只要根据官方提供的dome和API，就能根据你想要在Echarst上展示什么东西，就认真的在API里面找，一定可以查找到！！认真观看API！！！

 

【Echarts】百度Echarts的使用入门+两个简单的小例子+心得


联系
我们