1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
  | let options= { 
 |      bar:{ 
 |        // title: { 
 |        //   text: 'World Population' 
 |        // }, 
 |        tooltip: { 
 |          trigger: 'axis', 
 |          axisPointer: { 
 |            type: 'shadow' 
 |          } 
 |        }, 
 |        // legend: {}, 
 |        grid: { 
 |          top:10, 
 |          left: '3%', 
 |          right: '4%', 
 |          bottom: '3%', 
 |          containLabel: true 
 |        }, 
 |        xAxis: { 
 |          type: 'value', 
 |          boundaryGap: [0, 0.01] 
 |        }, 
 |        yAxis: { 
 |          type: 'category', 
 |          data: ['Brazil', 'Indonesia', 'USA', 'India', 'China', 'World'] 
 |        }, 
 |        series: [ 
 |          { 
 |            name: '2011', 
 |            type: 'bar', 
 |            data: [18203, 23489, 29034, 14970, 31744, 60230] 
 |          }, 
 |          { 
 |            name: '2012', 
 |            type: 'bar', 
 |            data: [19325, 23438, 31000, 11594, 24141, 6807] 
 |          } 
 |        ] 
 |      }, 
 |      pie: { 
 |        tooltip: { 
 |          trigger: "item", 
 |          formatter: "{a} <br/>{b} : {c} ({d}%)" 
 |        }, 
 |        legend: { 
 |          top: 20, 
 |          // orient: "vertical", 
 |          // right: 300, 
 |          // top: 200, 
 |          // bottom: 20, 
 |          data: [ 
 |            "图例1", 
 |            "图例2", 
 |            "图例3", 
 |            "图例4", 
 |            "图例5", 
 |            "图例6", 
 |            "图例7" 
 |          ] 
 |        }, 
 |        series: [ 
 |          { 
 |            name: "图例1", 
 |            type: "pie", 
 |            radius: ['40%', '70%'], 
 |            selectedMode: "single", 
 |            itemStyle: { 
 |              borderRadius: 6, 
 |              borderColor: '#fff', 
 |              borderWidth: 2 
 |            }, 
 |            data: [ 
 |              { 
 |                value: 2563, 
 |                name: "图例1", 
 |                itemStyle: { 
 |                  color: "rgb(45, 140, 240)" 
 |                } 
 |              }, 
 |              { 
 |                value: 727, 
 |                name: "图例2", 
 |                itemStyle: { 
 |                  color: "rgb(92, 173, 255)" 
 |                } 
 |              }, 
 |              { 
 |                value: 2182, 
 |                name: "图例3", 
 |                itemStyle: { 
 |                  color: "rgb(25, 190, 107)" 
 |                } 
 |              }, 
 |              { 
 |                value: 1419, 
 |                name: "图例4", 
 |                itemStyle: { 
 |                  color: "#00e5ff" 
 |                } 
 |              }, 
 |              { 
 |                value: 984, 
 |                name: "图例5", 
 |                itemStyle: { 
 |                  color: "#ff80ab" 
 |                } 
 |              }, 
 |              { 
 |                value: 870, 
 |                name: "图例6", 
 |                itemStyle: { 
 |                  color: "rgb(237, 64, 20)" 
 |                } 
 |              }, 
 |              { 
 |                value: 1670, 
 |                name: "图例7", 
 |                itemStyle: { 
 |                  color: "#ffb445" 
 |                } 
 |              } 
 |            ] 
 |          } 
 |        ] 
 |      }, 
 |      line: { 
 |        legend: { 
 |          data: ["邮件营销", "联盟广告"] 
 |        }, 
 |        grid: { 
 |          left: "3%", 
 |          right: "4%", 
 |          bottom: "3%", 
 |          containLabel: true 
 |        }, 
 |        toolbox: { 
 |          feature: { 
 |            saveAsImage: {} 
 |          } 
 |        }, 
 |        xAxis: { 
 |          type: "category", 
 |          boundaryGap: false, 
 |          data: [ 
 |            "1月", 
 |            "2月", 
 |            "3月", 
 |            "4月", 
 |            "5月", 
 |            "6月", 
 |            "7月", 
 |            "8月", 
 |            "9月", 
 |            "10月", 
 |            "11月", 
 |            "12月" 
 |          ] 
 |        }, 
 |        yAxis: { 
 |          type: "value" 
 |        }, 
 |        series: [ 
 |          { 
 |            name: "邮件营销", 
 |            type: "line", 
 |            stack: "总量", 
 |            itemStyle: { 
 |              color: "rgb(25, 190, 107)" 
 |            }, 
 |            smooth: true, 
 |            data: [ 
 |              7.0, 
 |              6.9, 
 |              9.5, 
 |              12.5, 
 |              18.2, 
 |              21.5, 
 |              22.5, 
 |              23.3, 
 |              18.3, 
 |              13.9, 
 |              9.6 
 |            ] 
 |          }, 
 |          { 
 |            name: "联盟广告", 
 |            type: "line", 
 |            stack: "总量", 
 |            smooth: true, 
 |            itemStyle: { 
 |              color: "rgb(92, 173, 255)" 
 |            }, 
 |            data: [ 
 |              7.0, 
 |              6.9, 
 |              9.5, 
 |              14.5, 
 |              18.2, 
 |              21.5, 
 |              22.5, 
 |              21.3, 
 |              18.3, 
 |              13.9, 
 |              9.6 
 |            ] 
 |          } 
 |        ] 
 |      } 
 |    } 
 |    
 |    export default options; 
 |  
  |