【Echarts】百度Echarts的使用入门+两个简单的小例子+心得 |
您所在的位置：网站首页 › 基于echarts › 【Echarts】百度Echarts的使用入门+两个简单的小例子+心得 |
【Echarts】百度Echarts的使用入门+两个简单的小例子+心得
|
Echarts对于展示结果，有一个很好的表达方式。 1.首先，在官网将js下载到本地，引用到页面上 这里是在开发环境，所以下载最后源代码这个
managerResult.jsp  
1
3 DOCTYPE html>
4
5
6
7
8
9
10
11
12
13 Echarts图表统计结果
14
15
16
17
18
19
20
21 ${condition}
22 ${questOptions}
23
24
25
26
27
28
29
30
31
32
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} {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
**********************************************************************如果想动态从后台获取数据的话，往下看*************************************************************** ***********************************************************************************************************************************************************************************
先看看js中，ajax从后台获取的数据，赋值给图表的data即可 4》带有ajax的Echarts 实例化过程
1 var condition = $("textarea[name='condition']").text();
2 var questOptions = $("textarea[name='questOptions']").text();
3 //全局变量，便于给图表赋值
4 var XData;//X轴类目
5 var VData;//实际数据
6
7 //ajax从后台获取数据给全局变量
8 $.ajax({url:"/questionnaire/barDate.jhtml",
9 type:"get",
10 async:false,
11 traditional:false,
12 data:{questOptions:questOptions,condition:condition},
13 success:function(data){
14 //后台拼接组装好的json数据传给前台这里，直接转化一下根据键名获取键值，赋值给全局变量
15 XData = JSON.parse(data).X;
16 VData = JSON.parse(data).V;
17 }
18 });
19
20 //获取饼状图容器 并 初始化echarts实例
21 var myChartBar = echarts.init(document.getElementById('mainBar'));
22
23 //柱状图配置
24 var optionBar = {
25 title:{
26 show : true,
27 text : '多条件分量统计',
28 x:'center'
29 },
30 color: ['#3398DB'],
31 tooltip : {
32 trigger: 'axis',
33 axisPointer : { // 坐标轴指示器，坐标轴触发有效
34 type : 'shadow' // 默认为直线，可选为：'line' | 'shadow'
35 }
36 },
37 toolbox: {
38 show : true,
39 feature : {
40 dataView : {show: true, readOnly: false},
41 magicType : {show: true, type: ['line', 'bar']},
42 restore : {show: true},
43 saveAsImage : {show: true}
44 }
45 },
46 grid: {//网格配置
47 show : true,
48 left: '3%',
49 right: '15%',
50 bottom: '15%',
51 shadowBlur : 10,
52 containLabel: true
53 },
54 xAxis : [
55 {
56 name : '筛选条件类目',
57 type : 'category',
58 data : XData,
59 axisTick: {
60 alignWithLabel: true
61 },
62 axisLabel :{
63 rotate : 50
64 }
65
66 }
67 ],
68 yAxis : [
69 {
70 name : '统计人数',
71 type : 'value'
72 }
73 ],
74 series : [
75 {
76 name:'问卷人数',
77 type:'bar',
78 barWidth: '30%',
79 label: {
80 normal: {
81 show: true,
82 position: 'top',
83 formatter :'{b} : {c}',
84 textStyle:{
85 fontSize : 2,
86 fontStyle : 'normal'
87 }
88 }
89 },
90 data:VData
91 }
92 ]
93 };
94
95
96 myChartBar.setOption(optionBar);
View Code
5》后台部分代码【只看json数据 组装部分】
1 @RequestMapping(value= "/barDate" ,produces = "text/html;charset=UTF-8")
2 @ResponseBody
3 public String barDate(HttpServletRequest request,String condition,String questOptions) throws UnsupportedEncodingException{
4
5 //勾选项
6 questOptions = questOptions.replaceAll("category=", "");
7 String [] questArr = questOptions.equals("")? new String[0]:questOptions.split(";");
8 //填空题
9 Map mapList = doMap(condition);
10 System.out.println("勾选项："+questArr);
11
12
13 JSONObject jsonObject = new JSONObject();
14 JSONArray array1 = new JSONArray();
15 JSONArray array2 = new JSONArray();
16 Map newList = new HashMap();
17 //填空题
18 mapList.forEach((key,value)->{
19 boolean flag = false;
20 if(value != null){
21 if(key.contains("Arr")){
22 String newKey = key.substring(0,key.lastIndexOf("Arr"));
23 if(key.contains("age")){
24 Date[] date = (Date[]) value;
25 if(date[0] != null && date[1] != null){
26 array1.add("年龄段:"+date[0]+"-"+date[1]);
27 flag = true;
28 }else if(date[0] != null || date[1] != null){
29 array1.add("年龄:"+date[0] == null ? date[1] : date[0]);
30 flag = true;
31 }
32 }else{
33 Double [] v = (Double[]) value;
34 if(v[0] != null && v[1] != null){
35 array1.add(newKey+"段:"+v[0]+"-"+v[1]);
36 flag = true;
37 }else if(v[0] != null || v[1] != null){
38 array1.add(newKey+":"+v[0] == null ? v[1] : v[0]);
39 flag = true;
40 }
41 }
42 }
43 if(key.contains("userName")){
44 array1.add("姓名:"+value);
45 flag = true;
46 }
47 if(key.contains("sex")){
48 array1.add("性别:"+value);
49 flag = true;
50 }
51 if(key.contains("memopause")){
52 array1.add("是否绝经:"+value);
53 flag = true;
54 }
55
56 if(flag){
57 newList.put(key, value);
58 List list = questionnaireService.findQuests(newList, new String[0]);
59 newList.clear();
60 array2.add(list.size());
61 flag = false;
62 }
63
64 }
65 });
66 //获取资源文件中键值对
67 ResourceBundle bundle = ResourceBundle.getBundle("quest");
68
69 if(questArr.length >0){
70 for (String string : questArr) {
71 array1.add(bundle.getString(string));
72 List list = questionnaireService.findQuests(newList, string);
73 array2.add(list.size());
74 }
75 }
76 jsonObject.put("X", array1);//键名为 X
77 jsonObject.put("V", array2);//键名为 V
78
79 return jsonObject.toString();
80 }
81
View Code
JSONArray array1 = new JSONArray();用来存储X轴类目名 JSONArray array2 = new JSONArray();用来存储实际一一对应的数据 6》看看图示的结果
心得： 只要根据官方提供的dome和API，就能根据你想要在Echarst上展示什么东西，就认真的在API里面找，一定可以查找到！！认真观看API！！！
|
【本文地址】
今日新闻 |
推荐新闻 |