Details | Last modification | View Log | RSS feed
| Rev | Author | Line No. | Line |
|---|---|---|---|
| 1 | espaco | 1 | jQuery(document).ready(function() { |
| 2 | // ECHARTS |
||
| 3 | require.config({ |
||
| 4 | paths: { |
||
| 5 | echarts: '../assets/global/plugins/echarts/' |
||
| 6 | } |
||
| 7 | }); |
||
| 8 | |||
| 9 | // DEMOS |
||
| 10 | require( |
||
| 11 | [ |
||
| 12 | 'echarts', |
||
| 13 | 'echarts/chart/bar', |
||
| 14 | 'echarts/chart/chord', |
||
| 15 | 'echarts/chart/eventRiver', |
||
| 16 | 'echarts/chart/force', |
||
| 17 | 'echarts/chart/funnel', |
||
| 18 | 'echarts/chart/gauge', |
||
| 19 | 'echarts/chart/heatmap', |
||
| 20 | 'echarts/chart/k', |
||
| 21 | 'echarts/chart/line', |
||
| 22 | 'echarts/chart/map', |
||
| 23 | 'echarts/chart/pie', |
||
| 24 | 'echarts/chart/radar', |
||
| 25 | 'echarts/chart/scatter', |
||
| 26 | 'echarts/chart/tree', |
||
| 27 | 'echarts/chart/treemap', |
||
| 28 | 'echarts/chart/venn', |
||
| 29 | 'echarts/chart/wordCloud' |
||
| 30 | ], |
||
| 31 | function(ec) { |
||
| 32 | //--- BAR --- |
||
| 33 | var myChart = ec.init(document.getElementById('echarts_bar')); |
||
| 34 | myChart.setOption({ |
||
| 35 | tooltip: { |
||
| 36 | trigger: 'axis' |
||
| 37 | }, |
||
| 38 | legend: { |
||
| 39 | data: ['Cost', 'Expenses'] |
||
| 40 | }, |
||
| 41 | toolbox: { |
||
| 42 | show: true, |
||
| 43 | feature: { |
||
| 44 | mark: { |
||
| 45 | show: true |
||
| 46 | }, |
||
| 47 | dataView: { |
||
| 48 | show: true, |
||
| 49 | readOnly: false |
||
| 50 | }, |
||
| 51 | magicType: { |
||
| 52 | show: true, |
||
| 53 | type: ['line', 'bar'] |
||
| 54 | }, |
||
| 55 | restore: { |
||
| 56 | show: true |
||
| 57 | }, |
||
| 58 | saveAsImage: { |
||
| 59 | show: true |
||
| 60 | } |
||
| 61 | } |
||
| 62 | }, |
||
| 63 | calculable: true, |
||
| 64 | xAxis: [{ |
||
| 65 | type: 'category', |
||
| 66 | data: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'] |
||
| 67 | }], |
||
| 68 | yAxis: [{ |
||
| 69 | type: 'value', |
||
| 70 | splitArea: { |
||
| 71 | show: true |
||
| 72 | } |
||
| 73 | }], |
||
| 74 | series: [{ |
||
| 75 | name: 'Cost', |
||
| 76 | type: 'bar', |
||
| 77 | data: [2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3] |
||
| 78 | }, { |
||
| 79 | name: 'Expenses', |
||
| 80 | type: 'bar', |
||
| 81 | data: [2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3] |
||
| 82 | }] |
||
| 83 | }); |
||
| 84 | |||
| 85 | // --- LINE --- |
||
| 86 | var myChart2 = ec.init(document.getElementById('echarts_line')); |
||
| 87 | myChart2.setOption({ |
||
| 88 | title: { |
||
| 89 | text: 'Weekly Weather', |
||
| 90 | subtext: 'Lorem ipsum' |
||
| 91 | }, |
||
| 92 | tooltip: { |
||
| 93 | trigger: 'axis' |
||
| 94 | }, |
||
| 95 | legend: { |
||
| 96 | data: ['High', 'Low'] |
||
| 97 | }, |
||
| 98 | toolbox: { |
||
| 99 | show: true, |
||
| 100 | feature: { |
||
| 101 | mark: { |
||
| 102 | show: true |
||
| 103 | }, |
||
| 104 | dataView: { |
||
| 105 | show: true, |
||
| 106 | readOnly: false |
||
| 107 | }, |
||
| 108 | magicType: { |
||
| 109 | show: true, |
||
| 110 | type: ['line', 'bar'] |
||
| 111 | }, |
||
| 112 | restore: { |
||
| 113 | show: true |
||
| 114 | }, |
||
| 115 | saveAsImage: { |
||
| 116 | show: true |
||
| 117 | } |
||
| 118 | } |
||
| 119 | }, |
||
| 120 | calculable: true, |
||
| 121 | xAxis: [{ |
||
| 122 | type: 'category', |
||
| 123 | boundaryGap: false, |
||
| 124 | data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] |
||
| 125 | }], |
||
| 126 | yAxis: [{ |
||
| 127 | type: 'value', |
||
| 128 | axisLabel: { |
||
| 129 | formatter: '{value} °C' |
||
| 130 | } |
||
| 131 | }], |
||
| 132 | series: [{ |
||
| 133 | name: 'High', |
||
| 134 | type: 'line', |
||
| 135 | data: [11, 11, 15, 13, 12, 13, 10], |
||
| 136 | markPoint: { |
||
| 137 | data: [{ |
||
| 138 | type: 'max', |
||
| 139 | name: 'Max' |
||
| 140 | }, { |
||
| 141 | type: 'min', |
||
| 142 | name: 'Min' |
||
| 143 | }] |
||
| 144 | }, |
||
| 145 | markLine: { |
||
| 146 | data: [{ |
||
| 147 | type: 'average', |
||
| 148 | name: 'Mean' |
||
| 149 | }] |
||
| 150 | } |
||
| 151 | }, { |
||
| 152 | name: 'Low', |
||
| 153 | type: 'line', |
||
| 154 | data: [1, -2, 2, 5, 3, 2, 0], |
||
| 155 | markPoint: { |
||
| 156 | data: [{ |
||
| 157 | name: 'Lowest', |
||
| 158 | value: -2, |
||
| 159 | xAxis: 1, |
||
| 160 | yAxis: -1.5 |
||
| 161 | }] |
||
| 162 | }, |
||
| 163 | markLine: { |
||
| 164 | data: [{ |
||
| 165 | type: 'average', |
||
| 166 | name: 'Mean' |
||
| 167 | }] |
||
| 168 | } |
||
| 169 | }] |
||
| 170 | }); |
||
| 171 | |||
| 172 | // -- SCATTER -- |
||
| 173 | var myChart3 = ec.init(document.getElementById('echarts_scatter')); |
||
| 174 | myChart3.setOption({ |
||
| 175 | tooltip: { |
||
| 176 | trigger: 'item' |
||
| 177 | }, |
||
| 178 | toolbox: { |
||
| 179 | show: true, |
||
| 180 | feature: { |
||
| 181 | mark: { |
||
| 182 | show: true |
||
| 183 | }, |
||
| 184 | dataZoom: { |
||
| 185 | show: true |
||
| 186 | }, |
||
| 187 | dataView: { |
||
| 188 | show: true, |
||
| 189 | readOnly: false |
||
| 190 | }, |
||
| 191 | restore: { |
||
| 192 | show: true |
||
| 193 | }, |
||
| 194 | saveAsImage: { |
||
| 195 | show: true |
||
| 196 | } |
||
| 197 | } |
||
| 198 | }, |
||
| 199 | dataRange: { |
||
| 200 | min: 0, |
||
| 201 | max: 100, |
||
| 202 | y: 'center', |
||
| 203 | text: ['High', 'Low'], |
||
| 204 | color: ['lightgreen', 'yellow'], |
||
| 205 | calculable: true |
||
| 206 | }, |
||
| 207 | xAxis: [{ |
||
| 208 | type: 'value', |
||
| 209 | scale: true |
||
| 210 | }], |
||
| 211 | yAxis: [{ |
||
| 212 | type: 'value', |
||
| 213 | position: 'right', |
||
| 214 | scale: true |
||
| 215 | }], |
||
| 216 | animation: false, |
||
| 217 | series: [{ |
||
| 218 | name: 'scatter1', |
||
| 219 | type: 'scatter', |
||
| 220 | symbolSize: 5, |
||
| 221 | data: (function() { |
||
| 222 | var d = []; |
||
| 223 | var len = 500; |
||
| 224 | var value; |
||
| 225 | while (len--) { |
||
| 226 | value = (Math.random() * 100).toFixed(2) - 0; |
||
| 227 | d.push([ |
||
| 228 | (Math.random() * value + value).toFixed(2) - 0, (Math.random() * value).toFixed(2) - 0, |
||
| 229 | value |
||
| 230 | ]); |
||
| 231 | } |
||
| 232 | return d; |
||
| 233 | })() |
||
| 234 | }] |
||
| 235 | }); |
||
| 236 | |||
| 237 | // -- CANDLESTICK -- |
||
| 238 | var myChart4 = ec.init(document.getElementById('echarts_candle')); |
||
| 239 | myChart4.setOption({ |
||
| 240 | tooltip: { |
||
| 241 | trigger: 'axis', |
||
| 242 | formatter: function(params) { |
||
| 243 | var res = params[0].seriesName + ' ' + params[0].name; |
||
| 244 | res += '<br/> Opening : ' + params[0].value[0] + ' Highest : ' + params[0].value[3]; |
||
| 245 | res += '<br/> Closing : ' + params[0].value[1] + ' Lowest : ' + params[0].value[2]; |
||
| 246 | return res; |
||
| 247 | } |
||
| 248 | }, |
||
| 249 | legend: { |
||
| 250 | data: ['Composite Index'] |
||
| 251 | }, |
||
| 252 | toolbox: { |
||
| 253 | show: true, |
||
| 254 | feature: { |
||
| 255 | mark: { |
||
| 256 | show: true |
||
| 257 | }, |
||
| 258 | dataZoom: { |
||
| 259 | show: true |
||
| 260 | }, |
||
| 261 | dataView: { |
||
| 262 | show: true, |
||
| 263 | readOnly: false |
||
| 264 | }, |
||
| 265 | restore: { |
||
| 266 | show: true |
||
| 267 | }, |
||
| 268 | saveAsImage: { |
||
| 269 | show: true |
||
| 270 | } |
||
| 271 | } |
||
| 272 | }, |
||
| 273 | dataZoom: { |
||
| 274 | show: true, |
||
| 275 | realtime: true, |
||
| 276 | start: 0, |
||
| 277 | end: 50 |
||
| 278 | }, |
||
| 279 | xAxis: [{ |
||
| 280 | type: 'category', |
||
| 281 | boundaryGap: true, |
||
| 282 | axisTick: { |
||
| 283 | onGap: false |
||
| 284 | }, |
||
| 285 | splitLine: { |
||
| 286 | show: false |
||
| 287 | }, |
||
| 288 | data: [ |
||
| 289 | "2013/1/24", "2013/1/25", "2013/1/28", "2013/1/29", "2013/1/30", |
||
| 290 | "2013/1/31", "2013/2/1", "2013/2/4", "2013/2/5", "2013/2/6", |
||
| 291 | "2013/2/7", "2013/2/8", "2013/2/18", "2013/2/19", "2013/2/20", |
||
| 292 | "2013/2/21", "2013/2/22", "2013/2/25", "2013/2/26", "2013/2/27", |
||
| 293 | "2013/2/28", "2013/3/1", "2013/3/4", "2013/3/5", "2013/3/6", |
||
| 294 | "2013/3/7", "2013/3/8", "2013/3/11", "2013/3/12", "2013/3/13", |
||
| 295 | "2013/3/14", "2013/3/15", "2013/3/18", "2013/3/19", "2013/3/20", |
||
| 296 | "2013/3/21", "2013/3/22", "2013/3/25", "2013/3/26", "2013/3/27", |
||
| 297 | "2013/3/28", "2013/3/29", "2013/4/1", "2013/4/2", "2013/4/3", |
||
| 298 | "2013/4/8", "2013/4/9", "2013/4/10", "2013/4/11", "2013/4/12", |
||
| 299 | "2013/4/15", "2013/4/16", "2013/4/17", "2013/4/18", "2013/4/19", |
||
| 300 | "2013/4/22", "2013/4/23", "2013/4/24", "2013/4/25", "2013/4/26", |
||
| 301 | "2013/5/2", "2013/5/3", "2013/5/6", "2013/5/7", "2013/5/8", |
||
| 302 | "2013/5/9", "2013/5/10", "2013/5/13", "2013/5/14", "2013/5/15", |
||
| 303 | "2013/5/16", "2013/5/17", "2013/5/20", "2013/5/21", "2013/5/22", |
||
| 304 | "2013/5/23", "2013/5/24", "2013/5/27", "2013/5/28", "2013/5/29", |
||
| 305 | "2013/5/30", "2013/5/31", "2013/6/3", "2013/6/4", "2013/6/5", |
||
| 306 | "2013/6/6", "2013/6/7", "2013/6/13" |
||
| 307 | ] |
||
| 308 | }], |
||
| 309 | yAxis: [{ |
||
| 310 | type: 'value', |
||
| 311 | scale: true, |
||
| 312 | boundaryGap: [0.01, 0.01] |
||
| 313 | }], |
||
| 314 | series: [{ |
||
| 315 | name: 'Composite Index', |
||
| 316 | type: 'k', |
||
| 317 | barMaxWidth: 20, |
||
| 318 | itemStyle: { |
||
| 319 | normal: { |
||
| 320 | color: 'red', // Bar Colors |
||
| 321 | color0: 'lightgreen', |
||
| 322 | lineStyle: { |
||
| 323 | width: 2, |
||
| 324 | color: 'orange', |
||
| 325 | color0: 'green' |
||
| 326 | } |
||
| 327 | }, |
||
| 328 | emphasis: { |
||
| 329 | color: 'black', |
||
| 330 | color0: 'white' |
||
| 331 | } |
||
| 332 | }, |
||
| 333 | data: [ // Opening, Closing, Min, Max |
||
| 334 | { |
||
| 335 | value: [2320.26, 2302.6, 2287.3, 2362.94], |
||
| 336 | itemStyle: { |
||
| 337 | normal: { |
||
| 338 | color0: 'blue', // Opening Fill color |
||
| 339 | lineStyle: { |
||
| 340 | width: 3, |
||
| 341 | color0: 'blue' // Opening Border color |
||
| 342 | } |
||
| 343 | }, |
||
| 344 | emphasis: { |
||
| 345 | color0: 'blue' // Opening Fill color |
||
| 346 | } |
||
| 347 | } |
||
| 348 | }, |
||
| 349 | [2300, 2291.3, 2288.26, 2308.38], |
||
| 350 | [2295.35, 2346.5, 2295.35, 2346.92], |
||
| 351 | [2347.22, 2358.98, 2337.35, 2363.8], |
||
| 352 | [2360.75, 2382.48, 2347.89, 2383.76], |
||
| 353 | [2383.43, 2385.42, 2371.23, 2391.82], |
||
| 354 | [2377.41, 2419.02, 2369.57, 2421.15], |
||
| 355 | [2425.92, 2428.15, 2417.58, 2440.38], |
||
| 356 | [2411, 2433.13, 2403.3, 2437.42], |
||
| 357 | [2432.68, 2434.48, 2427.7, 2441.73], |
||
| 358 | [2430.69, 2418.53, 2394.22, 2433.89], |
||
| 359 | [2416.62, 2432.4, 2414.4, 2443.03], |
||
| 360 | [2441.91, 2421.56, 2415.43, 2444.8], |
||
| 361 | [2420.26, 2382.91, 2373.53, 2427.07], |
||
| 362 | [2383.49, 2397.18, 2370.61, 2397.94], |
||
| 363 | [2378.82, 2325.95, 2309.17, 2378.82], |
||
| 364 | [2322.94, 2314.16, 2308.76, 2330.88], |
||
| 365 | [2320.62, 2325.82, 2315.01, 2338.78], |
||
| 366 | [2313.74, 2293.34, 2289.89, 2340.71], |
||
| 367 | [2297.77, 2313.22, 2292.03, 2324.63], |
||
| 368 | [2322.32, 2365.59, 2308.92, 2366.16], |
||
| 369 | [2364.54, 2359.51, 2330.86, 2369.65], |
||
| 370 | [2332.08, 2273.4, 2259.25, 2333.54], |
||
| 371 | [2274.81, 2326.31, 2270.1, 2328.14], |
||
| 372 | [2333.61, 2347.18, 2321.6, 2351.44], |
||
| 373 | [2340.44, 2324.29, 2304.27, 2352.02], |
||
| 374 | [2326.42, 2318.61, 2314.59, 2333.67], |
||
| 375 | [2314.68, 2310.59, 2296.58, 2320.96], |
||
| 376 | [2309.16, 2286.6, 2264.83, 2333.29], |
||
| 377 | [2282.17, 2263.97, 2253.25, 2286.33], |
||
| 378 | [2255.77, 2270.28, 2253.31, 2276.22], |
||
| 379 | [2269.31, 2278.4, 2250, 2312.08], |
||
| 380 | [2267.29, 2240.02, 2239.21, 2276.05], |
||
| 381 | [2244.26, 2257.43, 2232.02, 2261.31], |
||
| 382 | [2257.74, 2317.37, 2257.42, 2317.86], |
||
| 383 | [2318.21, 2324.24, 2311.6, 2330.81], |
||
| 384 | [2321.4, 2328.28, 2314.97, 2332], |
||
| 385 | [2334.74, 2326.72, 2319.91, 2344.89], |
||
| 386 | [2318.58, 2297.67, 2281.12, 2319.99], |
||
| 387 | [2299.38, 2301.26, 2289, 2323.48], |
||
| 388 | [2273.55, 2236.3, 2232.91, 2273.55], |
||
| 389 | [2238.49, 2236.62, 2228.81, 2246.87], |
||
| 390 | [2229.46, 2234.4, 2227.31, 2243.95], |
||
| 391 | [2234.9, 2227.74, 2220.44, 2253.42], |
||
| 392 | [2232.69, 2225.29, 2217.25, 2241.34], |
||
| 393 | [2196.24, 2211.59, 2180.67, 2212.59], |
||
| 394 | [2215.47, 2225.77, 2215.47, 2234.73], |
||
| 395 | [2224.93, 2226.13, 2212.56, 2233.04], |
||
| 396 | [2236.98, 2219.55, 2217.26, 2242.48], |
||
| 397 | [2218.09, 2206.78, 2204.44, 2226.26], |
||
| 398 | [2199.91, 2181.94, 2177.39, 2204.99], |
||
| 399 | [2169.63, 2194.85, 2165.78, 2196.43], |
||
| 400 | [2195.03, 2193.8, 2178.47, 2197.51], |
||
| 401 | [2181.82, 2197.6, 2175.44, 2206.03], |
||
| 402 | [2201.12, 2244.64, 2200.58, 2250.11], |
||
| 403 | [2236.4, 2242.17, 2232.26, 2245.12], |
||
| 404 | [2242.62, 2184.54, 2182.81, 2242.62], |
||
| 405 | [2187.35, 2218.32, 2184.11, 2226.12], |
||
| 406 | [2213.19, 2199.31, 2191.85, 2224.63], |
||
| 407 | [2203.89, 2177.91, 2173.86, 2210.58], |
||
| 408 | [2170.78, 2174.12, 2161.14, 2179.65], |
||
| 409 | [2179.05, 2205.5, 2179.05, 2222.81], |
||
| 410 | [2212.5, 2231.17, 2212.5, 2236.07], |
||
| 411 | [2227.86, 2235.57, 2219.44, 2240.26], |
||
| 412 | [2242.39, 2246.3, 2235.42, 2255.21], |
||
| 413 | [2246.96, 2232.97, 2221.38, 2247.86], |
||
| 414 | [2228.82, 2246.83, 2225.81, 2247.67], |
||
| 415 | [2247.68, 2241.92, 2231.36, 2250.85], |
||
| 416 | [2238.9, 2217.01, 2205.87, 2239.93], |
||
| 417 | [2217.09, 2224.8, 2213.58, 2225.19], |
||
| 418 | [2221.34, 2251.81, 2210.77, 2252.87], |
||
| 419 | [2249.81, 2282.87, 2248.41, 2288.09], |
||
| 420 | [2286.33, 2299.99, 2281.9, 2309.39], |
||
| 421 | [2297.11, 2305.11, 2290.12, 2305.3], |
||
| 422 | [2303.75, 2302.4, 2292.43, 2314.18], |
||
| 423 | [2293.81, 2275.67, 2274.1, 2304.95], |
||
| 424 | [2281.45, 2288.53, 2270.25, 2292.59], |
||
| 425 | [2286.66, 2293.08, 2283.94, 2301.7], |
||
| 426 | [2293.4, 2321.32, 2281.47, 2322.1], |
||
| 427 | [2323.54, 2324.02, 2321.17, 2334.33], |
||
| 428 | [2316.25, 2317.75, 2310.49, 2325.72], |
||
| 429 | [2320.74, 2300.59, 2299.37, 2325.53], |
||
| 430 | [2300.21, 2299.25, 2294.11, 2313.43], |
||
| 431 | [2297.1, 2272.42, 2264.76, 2297.1], |
||
| 432 | [2270.71, 2270.93, 2260.87, 2276.86], |
||
| 433 | [2264.43, 2242.11, 2240.07, 2266.69], |
||
| 434 | [2242.26, 2210.9, 2205.07, 2250.63], |
||
| 435 | [2190.1, 2148.35, 2126.22, 2190.1] |
||
| 436 | ], |
||
| 437 | markPoint: { |
||
| 438 | symbol: 'star', |
||
| 439 | //symbolSize:20, |
||
| 440 | itemStyle: { |
||
| 441 | normal: { |
||
| 442 | label: { |
||
| 443 | position: 'top' |
||
| 444 | } |
||
| 445 | } |
||
| 446 | }, |
||
| 447 | data: [{ |
||
| 448 | name: 'Highest', |
||
| 449 | value: 2444.8, |
||
| 450 | xAxis: '2013/2/18', |
||
| 451 | yAxis: 2466 |
||
| 452 | }] |
||
| 453 | } |
||
| 454 | }] |
||
| 455 | }); |
||
| 456 | |||
| 457 | // -- PIE -- |
||
| 458 | var myChart5 = ec.init(document.getElementById('echarts_pie')); |
||
| 459 | myChart5.setOption({ |
||
| 460 | tooltip: { |
||
| 461 | show: true, |
||
| 462 | formatter: "{a} <br/>{b} : {c} ({d}%)" |
||
| 463 | }, |
||
| 464 | legend: { |
||
| 465 | orient: 'vertical', |
||
| 466 | x: 'left', |
||
| 467 | data: ['All', 'Marketing', 'Search', 'EDM', 'Partnership', 'Video', 'Social', 'Google', 'Bing', 'Others'] |
||
| 468 | }, |
||
| 469 | toolbox: { |
||
| 470 | show: true, |
||
| 471 | feature: { |
||
| 472 | mark: { |
||
| 473 | show: true |
||
| 474 | }, |
||
| 475 | dataView: { |
||
| 476 | show: true, |
||
| 477 | readOnly: false |
||
| 478 | }, |
||
| 479 | restore: { |
||
| 480 | show: true |
||
| 481 | }, |
||
| 482 | saveAsImage: { |
||
| 483 | show: true |
||
| 484 | } |
||
| 485 | } |
||
| 486 | }, |
||
| 487 | calculable: true, |
||
| 488 | series: [{ |
||
| 489 | name: 'Source', |
||
| 490 | type: 'pie', |
||
| 491 | center: ['35%', 200], |
||
| 492 | radius: 80, |
||
| 493 | itemStyle: { |
||
| 494 | normal: { |
||
| 495 | label: { |
||
| 496 | position: 'inner', |
||
| 497 | formatter: function(params) { |
||
| 498 | return (params.percent - 0).toFixed(0) + '%' |
||
| 499 | } |
||
| 500 | }, |
||
| 501 | labelLine: { |
||
| 502 | show: false |
||
| 503 | } |
||
| 504 | }, |
||
| 505 | emphasis: { |
||
| 506 | label: { |
||
| 507 | show: true, |
||
| 508 | formatter: "{b}\n{d}%" |
||
| 509 | } |
||
| 510 | } |
||
| 511 | |||
| 512 | }, |
||
| 513 | data: [{ |
||
| 514 | value: 335, |
||
| 515 | name: 'All' |
||
| 516 | }, { |
||
| 517 | value: 679, |
||
| 518 | name: 'Marketing' |
||
| 519 | }, { |
||
| 520 | value: 1548, |
||
| 521 | name: 'Search' |
||
| 522 | }] |
||
| 523 | }, { |
||
| 524 | name: 'Source', |
||
| 525 | type: 'pie', |
||
| 526 | center: ['35%', 200], |
||
| 527 | radius: [110, 140], |
||
| 528 | data: [{ |
||
| 529 | value: 335, |
||
| 530 | name: 'All' |
||
| 531 | }, { |
||
| 532 | value: 310, |
||
| 533 | name: 'EDM' |
||
| 534 | }, { |
||
| 535 | value: 234, |
||
| 536 | name: 'Partnership' |
||
| 537 | }, { |
||
| 538 | value: 135, |
||
| 539 | name: 'Video' |
||
| 540 | }, { |
||
| 541 | value: 1048, |
||
| 542 | name: 'Social', |
||
| 543 | itemStyle: { |
||
| 544 | normal: { |
||
| 545 | color: (function() { |
||
| 546 | var zrColor = require('zrender/tool/color'); |
||
| 547 | return zrColor.getRadialGradient( |
||
| 548 | 300, 200, 110, 300, 200, 140, [ |
||
| 549 | [0, 'rgba(255,255,0,1)'], |
||
| 550 | [1, 'rgba(30,144,250,1)'] |
||
| 551 | ] |
||
| 552 | ) |
||
| 553 | })(), |
||
| 554 | label: { |
||
| 555 | textStyle: { |
||
| 556 | color: 'rgba(30,144,255,0.8)', |
||
| 557 | align: 'center', |
||
| 558 | baseline: 'middle', |
||
| 559 | fontFamily: 'Open Sans', |
||
| 560 | fontSize: 30, |
||
| 561 | fontWeight: '700' |
||
| 562 | } |
||
| 563 | }, |
||
| 564 | labelLine: { |
||
| 565 | length: 40, |
||
| 566 | lineStyle: { |
||
| 567 | color: '#f0f', |
||
| 568 | width: 3, |
||
| 569 | type: 'dotted' |
||
| 570 | } |
||
| 571 | } |
||
| 572 | } |
||
| 573 | } |
||
| 574 | }, { |
||
| 575 | value: 251, |
||
| 576 | name: 'Google' |
||
| 577 | }, { |
||
| 578 | value: 102, |
||
| 579 | name: 'Bing', |
||
| 580 | itemStyle: { |
||
| 581 | normal: { |
||
| 582 | label: { |
||
| 583 | show: false |
||
| 584 | }, |
||
| 585 | labelLine: { |
||
| 586 | show: false |
||
| 587 | } |
||
| 588 | }, |
||
| 589 | emphasis: { |
||
| 590 | label: { |
||
| 591 | show: true |
||
| 592 | }, |
||
| 593 | labelLine: { |
||
| 594 | show: true, |
||
| 595 | length: 50 |
||
| 596 | } |
||
| 597 | } |
||
| 598 | } |
||
| 599 | }, { |
||
| 600 | value: 147, |
||
| 601 | name: 'Others' |
||
| 602 | }] |
||
| 603 | }, { |
||
| 604 | name: 'Source', |
||
| 605 | type: 'pie', |
||
| 606 | clockWise: true, |
||
| 607 | startAngle: 135, |
||
| 608 | center: ['75%', 200], |
||
| 609 | radius: [80, 120], |
||
| 610 | itemStyle: { |
||
| 611 | normal: { |
||
| 612 | label: { |
||
| 613 | show: false |
||
| 614 | }, |
||
| 615 | labelLine: { |
||
| 616 | show: false |
||
| 617 | } |
||
| 618 | }, |
||
| 619 | emphasis: { |
||
| 620 | color: (function() { |
||
| 621 | var zrColor = require('zrender/tool/color'); |
||
| 622 | return zrColor.getRadialGradient( |
||
| 623 | 650, 200, 80, 650, 200, 120, [ |
||
| 624 | [0, 'rgba(255,255,0,1)'], |
||
| 625 | [1, 'rgba(255,0,0,1)'] |
||
| 626 | ] |
||
| 627 | ) |
||
| 628 | })(), |
||
| 629 | label: { |
||
| 630 | show: true, |
||
| 631 | position: 'center', |
||
| 632 | formatter: "{d}%", |
||
| 633 | textStyle: { |
||
| 634 | color: 'red', |
||
| 635 | fontSize: '30', |
||
| 636 | fontFamily: 'Open Sans', |
||
| 637 | fontWeight: 'bold' |
||
| 638 | } |
||
| 639 | } |
||
| 640 | } |
||
| 641 | }, |
||
| 642 | data: [{ |
||
| 643 | value: 335, |
||
| 644 | name: 'All' |
||
| 645 | }, { |
||
| 646 | value: 310, |
||
| 647 | name: 'EDM' |
||
| 648 | }, { |
||
| 649 | value: 234, |
||
| 650 | name: 'Partnership' |
||
| 651 | }, { |
||
| 652 | value: 135, |
||
| 653 | name: 'Video' |
||
| 654 | }, { |
||
| 655 | value: 1548, |
||
| 656 | name: 'Search' |
||
| 657 | }], |
||
| 658 | markPoint: { |
||
| 659 | symbol: 'star', |
||
| 660 | data: [{ |
||
| 661 | name: 'Max', |
||
| 662 | value: 1548, |
||
| 663 | x: '80%', |
||
| 664 | y: 50, |
||
| 665 | symbolSize: 32 |
||
| 666 | }] |
||
| 667 | } |
||
| 668 | }] |
||
| 669 | }); |
||
| 670 | } |
||
| 671 | ); |
||
| 672 | }); |