| <!-- |
| 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> |
