| <!-- | |
| Licensed to the Apache Software Foundation (ASF) under one | |
| or more contributor license agreements. See the NOTICE file | |
| distributed with this work for additional information | |
| regarding copyright ownership. The ASF licenses this file | |
| to you under the Apache License, Version 2.0 (the | |
| "License"); you may not use this file except in compliance | |
| with the License. You may obtain a copy of the License at | |
| http://www.apache.org/licenses/LICENSE-2.0 | |
| Unless required by applicable law or agreed to in writing, | |
| software distributed under the License is distributed on an | |
| "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY | |
| KIND, either express or implied. See the License for the | |
| specific language governing permissions and limitations | |
| under the License. | |
| --> | |
| <html> | |
| <head> | |
| <meta charset="utf-8"> | |
| <script src="lib/simpleRequire.js"></script> | |
| <script src="lib/config.js"></script> | |
| <script src="lib/testHelper.js"></script> | |
| <link rel="stylesheet" href="lib/reset.css" /> | |
| <meta name="viewport" content="width=device-width, initial-scale=1" /> | |
| </head> | |
| <body> | |
| <style> | |
| h1 { | |
| line-height: 60px; | |
| height: 60px; | |
| background: #146402; | |
| text-align: center; | |
| font-weight: bold; | |
| color: #eee; | |
| font-size: 14px; | |
| } | |
| .chart { | |
| height: 300px; | |
| } | |
| </style> | |
| <div class="chart" id="plain"></div> | |
| <div class="chart" id="plain1"></div> | |
| <div class="chart" id="plain2"></div> | |
| <div class="chart" id="plain3"></div> | |
| <script> | |
| require([ | |
| 'echarts' | |
| ], function (echarts) { | |
| var graphic = echarts.graphic; | |
| var option = { | |
| tooltip: { | |
| trigger: 'axis', | |
| axisPointer: { | |
| type: 'cross', | |
| label: { | |
| backgroundColor: '#6a7985' | |
| } | |
| } | |
| }, | |
| legend: { | |
| data: ['邮件营销', '联盟广告', '视频广告', '直接访问', '搜索引擎'], | |
| itemStyle: { | |
| // borderColor: '#f00', | |
| borderWidth: 3, | |
| borderType: 'dashed' | |
| }, | |
| selected: { | |
| '联盟广告': false, | |
| '视频广告': false | |
| } | |
| }, | |
| toolbox: { | |
| feature: { | |
| saveAsImage: {} | |
| } | |
| }, | |
| grid: { | |
| left: '3%', | |
| right: '4%', | |
| bottom: '3%', | |
| containLabel: true | |
| }, | |
| xAxis: [ | |
| { | |
| type: 'category', | |
| boundaryGap: false, | |
| data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'] | |
| } | |
| ], | |
| yAxis: [ | |
| { | |
| type: 'value' | |
| } | |
| ], | |
| series: [ | |
| { | |
| name: '邮件营销', | |
| type: 'line', | |
| stack: '总量', | |
| areaStyle: {}, | |
| // default emptyCircle | |
| // symbol: 'circle', | |
| itemStyle: { | |
| borderColor: '#096', | |
| borderWidth: 1 | |
| }, | |
| data: [120, 132, 101, 134, 90, 230, 210] | |
| }, | |
| { | |
| name: '联盟广告', | |
| type: 'line', | |
| stack: '总量', | |
| areaStyle: {}, | |
| symbol: 'circle', | |
| itemStyle: { | |
| borderColor: '#ffde33', | |
| borderWidth: 1 | |
| }, | |
| data: [220, 182, 191, 234, 290, 330, 310] | |
| }, | |
| { | |
| name: '视频广告', | |
| type: 'line', | |
| stack: '总量', | |
| areaStyle: {}, | |
| symbol: 'rect', | |
| itemStyle: { | |
| borderColor: '#ff9933', | |
| borderWidth: 2 | |
| }, | |
| data: [150, 232, 201, 154, 190, 330, 410] | |
| }, | |
| { | |
| name: '直接访问', | |
| type: 'line', | |
| stack: '总量', | |
| areaStyle: { normal: {} }, | |
| symbol: 'roundRect', | |
| itemStyle: { | |
| borderColor: '#cc0033', | |
| borderWidth: 3 | |
| }, | |
| data: [320, 332, 301, 334, 390, 330, 320] | |
| }, | |
| { | |
| name: '搜索引擎', | |
| type: 'line', | |
| stack: '总量', | |
| label: { | |
| normal: { | |
| show: true, | |
| position: 'top' | |
| } | |
| }, | |
| areaStyle: { normal: {} }, | |
| symbol: 'triangle', | |
| itemStyle: { | |
| borderColor: '#660099', | |
| borderWidth: 4 | |
| }, | |
| data: [820, 932, 901, 934, 1290, 1330, 1320] | |
| } | |
| ] | |
| }; | |
| // chart.setOption(option); | |
| testHelper.create(echarts, 'plain', { | |
| title: [ | |
| '(Legend symbol of line)', | |
| 'the emptyCircle symbol doesn\'t have fillColor, so the strokeColor should be the same as color of corresponding series', | |
| 'the borderType of legend symbol is dashed, especially the first emptyCircle symbol', | |
| 'the color of line in legend symbol should be same as corresponding symbol', | |
| 'the borderWidth of legend symbols should only be determined by legend.itemStyle.borderWidth', | |
| 'the second and the third legend symbol should be unselected' | |
| ], | |
| option: option, | |
| height: 300 | |
| }); | |
| var option1 = { | |
| tooltip: { | |
| trigger: 'axis', | |
| axisPointer: { | |
| type: 'shadow' | |
| } | |
| }, | |
| legend: { | |
| data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎', '百度', '谷歌', '必应', '其他'], | |
| itemStyle: { | |
| borderWidth: 3 | |
| }, | |
| selected: { | |
| '联盟广告': false | |
| } | |
| }, | |
| grid: { | |
| left: '3%', | |
| right: '4%', | |
| bottom: '3%', | |
| containLabel: true | |
| }, | |
| xAxis: [ | |
| { | |
| type: 'category', | |
| data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'] | |
| } | |
| ], | |
| yAxis: [ | |
| { | |
| type: 'value' | |
| } | |
| ], | |
| series: [ | |
| { | |
| name: '直接访问', | |
| type: 'bar', | |
| data: [320, 332, 301, 334, 390, 330, 320], | |
| itemStyle: { | |
| borderColor: '#000', | |
| borderWidth: 3 | |
| } | |
| }, | |
| { | |
| name: '邮件营销', | |
| type: 'bar', | |
| stack: '广告', | |
| data: [120, 132, 101, 134, 90, 230, 210], | |
| itemStyle: { | |
| barBorderColor: '#f00', | |
| borderColor: '#00f', | |
| borderWidth: 5 | |
| } | |
| }, | |
| { | |
| name: '联盟广告', | |
| type: 'bar', | |
| stack: '广告', | |
| data: [220, 182, 191, 234, 290, 330, 310] | |
| }, | |
| { | |
| name: '视频广告', | |
| type: 'bar', | |
| stack: '广告', | |
| data: [150, 232, 201, 154, 190, 330, 410] | |
| }, | |
| { | |
| name: '搜索引擎', | |
| type: 'bar', | |
| data: [862, 1018, 964, 1026, 1679, 1600, 1570], | |
| markLine: { | |
| lineStyle: { | |
| normal: { | |
| type: 'dashed' | |
| } | |
| }, | |
| data: [ | |
| [{ type: 'min' }, { type: 'max' }] | |
| ] | |
| } | |
| }, | |
| { | |
| name: '百度', | |
| type: 'bar', | |
| barWidth: 5, | |
| stack: '搜索引擎', | |
| data: [620, 732, 701, 734, 1090, 1130, 1120] | |
| }, | |
| { | |
| name: '谷歌', | |
| type: 'bar', | |
| stack: '搜索引擎', | |
| data: [120, 132, 101, 134, 290, 230, 220] | |
| }, | |
| { | |
| name: '必应', | |
| type: 'bar', | |
| stack: '搜索引擎', | |
| data: [60, 72, 71, 74, 190, 130, 110] | |
| }, | |
| { | |
| name: '其他', | |
| type: 'bar', | |
| stack: '搜索引擎', | |
| data: [62, 82, 91, 84, 109, 110, 120] | |
| } | |
| ] | |
| }; | |
| // chart1.setOption(option1); | |
| testHelper.create(echarts, 'plain1', { | |
| title: [ | |
| '(Legend symbol of bar)', | |
| 'the borderColor of first legend symbol should be black', | |
| 'the borderColor of second legend symbol should be blue', | |
| 'the bar borderColor of second series should be red, because the legend borderColor is incompatible with barBorderColor', | |
| 'the third legend symbol should be unselected', | |
| 'the borderColor of other legend symbols should be the same as color of corresponding series', | |
| 'the borderColor of all legend symbols should be 3' | |
| ], | |
| option: option1, | |
| height: 300 | |
| }); | |
| var option2 = { | |
| tooltip: { | |
| trigger: 'item', | |
| formatter: "{a} <br/>{b}: {c} ({d}%)" | |
| }, | |
| legend: { | |
| orient: 'vertical', | |
| x: 'left', | |
| data: ['直达', '营销广告', '搜索引擎', '邮件营销', '联盟广告', '视频广告', '百度', '谷歌', '必应', '其他'], | |
| itemStyle: { | |
| borderWidth: 3, | |
| borderColor: '#f00' | |
| }, | |
| selected: { | |
| '直达': false | |
| } | |
| }, | |
| series: [ | |
| { | |
| name: '访问来源', | |
| type: 'pie', | |
| selectedMode: 'single', | |
| radius: [0, '30%'], | |
| label: { | |
| normal: { | |
| position: 'inner' | |
| } | |
| }, | |
| itemStyle: { | |
| borderColor: '#ff9933', | |
| borderWidth: 2 | |
| }, | |
| labelLine: { | |
| normal: { | |
| show: false | |
| } | |
| }, | |
| data: [ | |
| { value: 335, name: '直达', selected: true }, | |
| { value: 679, name: '营销广告' }, | |
| { value: 1548, name: '搜索引擎' } | |
| ] | |
| }, | |
| { | |
| name: '访问来源', | |
| type: 'pie', | |
| radius: ['40%', '55%'], | |
| label: { | |
| normal: { | |
| formatter: '{a|{a}}{abg|}\n{hr|}\n {b|{b}：}{c} {per|{d}%} ', | |
| backgroundColor: '#eee', | |
| borderColor: '#aaa', | |
| borderWidth: 1, | |
| borderRadius: 4, | |
| // shadowBlur:3, | |
| // shadowOffsetX: 2, | |
| // shadowOffsetY: 2, | |
| // shadowColor: '#999', | |
| // padding: [0, 7], | |
| rich: { | |
| a: { | |
| color: '#999', | |
| lineHeight: 22, | |
| align: 'center' | |
| }, | |
| // abg: { | |
| // backgroundColor: '#333', | |
| // width: '100%', | |
| // align: 'right', | |
| // height: 22, | |
| // borderRadius: [4, 4, 0, 0] | |
| // }, | |
| hr: { | |
| borderColor: '#aaa', | |
| width: '100%', | |
| borderWidth: 0.5, | |
| height: 0 | |
| }, | |
| b: { | |
| fontSize: 16, | |
| lineHeight: 33 | |
| }, | |
| per: { | |
| color: '#eee', | |
| backgroundColor: '#334455', | |
| padding: [2, 4], | |
| borderRadius: 2 | |
| } | |
| } | |
| } | |
| }, | |
| itemStyle: { | |
| borderColor: '#660099', | |
| borderWidth: 4 | |
| }, | |
| data: [ | |
| { value: 335, name: '直达' }, | |
| { value: 310, name: '邮件营销' }, | |
| { value: 234, name: '联盟广告' }, | |
| { value: 135, name: '视频广告' }, | |
| { value: 1048, name: '百度' }, | |
| { value: 251, name: '谷歌' }, | |
| { value: 147, name: '必应' }, | |
| { value: 102, name: '其他' } | |
| ] | |
| } | |
| ] | |
| }; | |
| // chart2.setOption(option2); | |
| testHelper.create(echarts, 'plain2', { | |
| title: [ | |
| '(Legend symbol of pie)', | |
| 'the first legend symbol should be unselected', | |
| 'the borderColor of legend symbol should be red', | |
| 'the borderWidth of all legend symbols should be 3' | |
| ], | |
| option: option2, | |
| height: 300 | |
| }); | |
| var data = [ | |
| [[28604, 77, 17096869, 'Australia', 1990], [31163, 77.4, 27662440, 'Canada', 1990], [1516, 68, 1154605773, 'China', 1990], [13670, 74.7, 10582082, 'Cuba', 1990], [28599, 75, 4986705, 'Finland', 1990], [29476, 77.1, 56943299, 'France', 1990], [31476, 75.4, 78958237, 'Germany', 1990], [28666, 78.1, 254830, 'Iceland', 1990], [1777, 57.7, 870601776, 'India', 1990], [29550, 79.1, 122249285, 'Japan', 1990], [2076, 67.9, 20194354, 'North Korea', 1990], [12087, 72, 42972254, 'South Korea', 1990], [24021, 75.4, 3397534, 'New Zealand', 1990], [43296, 76.8, 4240375, 'Norway', 1990], [10088, 70.8, 38195258, 'Poland', 1990], [19349, 69.6, 147568552, 'Russia', 1990], [10670, 67.3, 53994605, 'Turkey', 1990], [26424, 75.7, 57110117, 'United Kingdom', 1990], [37062, 75.4, 252847810, 'United States', 1990]], | |
| [[44056, 81.8, 23968973, 'Australia', 2015], [43294, 81.7, 35939927, 'Canada', 2015], [13334, 76.9, 1376048943, 'China', 2015], [21291, 78.5, 11389562, 'Cuba', 2015], [38923, 80.8, 5503457, 'Finland', 2015], [37599, 81.9, 64395345, 'France', 2015], [44053, 81.1, 80688545, 'Germany', 2015], [42182, 82.8, 329425, 'Iceland', 2015], [5903, 66.8, 1311050527, 'India', 2015], [36162, 83.5, 126573481, 'Japan', 2015], [1390, 71.4, 25155317, 'North Korea', 2015], [34644, 80.7, 50293439, 'South Korea', 2015], [34186, 80.6, 4528526, 'New Zealand', 2015], [64304, 81.6, 5210967, 'Norway', 2015], [24787, 77.3, 38611794, 'Poland', 2015], [23038, 73.13, 143456918, 'Russia', 2015], [19360, 76.5, 78665830, 'Turkey', 2015], [38225, 81.4, 64715810, 'United Kingdom', 2015], [53354, 79.1, 321773631, 'United States', 2015]] | |
| ]; | |
| var option3 = { | |
| backgroundColor: new echarts.graphic.RadialGradient(0.3, 0.3, 0.8, [{ | |
| offset: 0, | |
| color: '#f7f8fa' | |
| }, { | |
| offset: 1, | |
| color: '#cdd0d5' | |
| }]), | |
| title: { | |
| text: '1990 与 2015 年各国家人均寿命与 GDP' | |
| }, | |
| legend: { | |
| right: 10, | |
| data: ['1990', '2015'], | |
| itemStyle: { | |
| borderWidth: 3, | |
| borderColor: '#000' | |
| }, | |
| selected: { | |
| '1990': false | |
| } | |
| }, | |
| xAxis: { | |
| splitLine: { | |
| lineStyle: { | |
| type: 'dashed' | |
| } | |
| } | |
| }, | |
| yAxis: { | |
| splitLine: { | |
| lineStyle: { | |
| type: 'dashed' | |
| } | |
| }, | |
| scale: true | |
| }, | |
| series: [{ | |
| name: '1990', | |
| data: data[0], | |
| type: 'scatter', | |
| symbolSize: function (data) { | |
| return Math.sqrt(data[2]) / 5e2; | |
| }, | |
| label: { | |
| emphasis: { | |
| show: true, | |
| formatter: function (param) { | |
| return param.data[3]; | |
| }, | |
| position: 'top' | |
| } | |
| }, | |
| itemStyle: { | |
| normal: { | |
| shadowBlur: 10, | |
| shadowColor: 'rgba(120, 36, 50, 0.5)', | |
| shadowOffsetY: 5, | |
| color: new echarts.graphic.RadialGradient(0.4, 0.3, 1, [{ | |
| offset: 0, | |
| color: 'rgb(251, 118, 123)' | |
| }, { | |
| offset: 1, | |
| color: 'rgb(204, 46, 72)' | |
| }]) | |
| } | |
| } | |
| }, { | |
| name: '2015', | |
| data: data[1], | |
| type: 'scatter', | |
| symbolSize: function (data) { | |
| return Math.sqrt(data[2]) / 5e2; | |
| }, | |
| label: { | |
| emphasis: { | |
| show: true, | |
| formatter: function (param) { | |
| return param.data[3]; | |
| }, | |
| position: 'top' | |
| } | |
| }, | |
| itemStyle: { | |
| normal: { | |
| shadowBlur: 10, | |
| shadowColor: 'rgba(25, 100, 150, 0.5)', | |
| shadowOffsetY: 5, | |
| color: new echarts.graphic.RadialGradient(0.4, 0.3, 1, [{ | |
| offset: 0, | |
| color: 'rgb(129, 227, 238)' | |
| }, { | |
| offset: 1, | |
| color: 'rgb(25, 183, 207)' | |
| }]) | |
| } | |
| } | |
| }] | |
| }; | |
| testHelper.create(echarts, 'plain3', { | |
| title: [ | |
| '(Legend symbol of scatter)', | |
| 'the legend symbol of 1990 should be unselected', | |
| 'the borderColor of legend symbol should be black', | |
| 'the borderWidth of all legend symbols should be 3' | |
| ], | |
| option: option3, | |
| height: 300 | |
| }); | |
| }); | |
| </script> | |
| </body> | |
| </html> |