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>
页面中分别为 柱状图和 饼状图 放置了两个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 });
心得：
只要根据官方提供的dome和API，就能根据你想要在Echarst上展示什么东西，就认真的在API里面找，一定可以查找到！！认真观看API！！！
时间： 2024-10-13 15:18:53