| <!-- | |
| 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/jquery.min.js"></script> | |
| <script src="lib/facePrint.js"></script> | |
| <script src="lib/testHelper.js"></script> | |
| <meta name="viewport" content="width=device-width, initial-scale=1" /> | |
| <link rel="stylesheet" href="lib/reset.css"> | |
| </head> | |
| <body> | |
| <style> | |
| h1 { | |
| line-height: 60px; | |
| height: 60px; | |
| background: #146402; | |
| text-align: center; | |
| font-weight: bold; | |
| color: #eee; | |
| font-size: 14px; | |
| } | |
| .chart { | |
| height: 400px; | |
| } | |
| </style> | |
| <div class="chart" id="main1"></div> | |
| <h1>Narrow grid</h1> | |
| <div class="chart" id="main2"></div> | |
| <div class="chart" id="main3"></div> | |
| <div class="chart" id="main4"></div> | |
| <div class="chart" id="main5"></div> | |
| <div class="chart" id="main6"></div> | |
| <div class="chart" id="main7"></div> | |
| <script> | |
| require(['echarts'], function (echarts) { | |
| var chart = echarts.init(document.getElementById('main1'), null, { | |
| }); | |
| chart.setOption({ | |
| tooltip : { | |
| trigger: 'axis', | |
| axisPointer : { // 坐标轴指示器，坐标轴触发有效 | |
| type : 'shadow' // 默认为直线，可选为：'line' | 'shadow' | |
| } | |
| }, | |
| legend: { | |
| data:['直接访问','邮件营销','联盟广告','视频广告','搜索引擎','百度','谷歌','必应','其他'] | |
| }, | |
| toolbox: { | |
| show : true, | |
| orient: 'vertical', | |
| left: 'right', | |
| top: 'center', | |
| feature : { | |
| mark : {show: true}, | |
| dataView : {show: true, readOnly: false}, | |
| magicType : {show: true, type: ['line', 'bar', 'stack', 'tiled']}, | |
| restore : {show: true}, | |
| saveAsImage : {show: true} | |
| } | |
| }, | |
| calculable : true, | |
| xAxis : [ | |
| { | |
| type : 'category', | |
| data : ['周一','周二','周三','周四','周五','周六','周日'] | |
| } | |
| ], | |
| yAxis : [ | |
| { | |
| type : 'value' | |
| } | |
| ], | |
| series : [ | |
| { | |
| seletedMode: 'series', | |
| name:'直接访问', | |
| type:'bar', | |
| select: { | |
| itemStyle: { | |
| color: 'green' | |
| } | |
| }, | |
| data:[{value: 120, itemStyle: {selectable: false}}, 332, 301, 334, 390, 330, 320] | |
| }, | |
| { | |
| name:'邮件营销', | |
| type:'bar', | |
| stack: '广告', | |
| data:[120, 132, 101, 134, 90, 230, 210] | |
| }, | |
| { | |
| 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 : { | |
| itemStyle:{ | |
| normal:{ | |
| label: { | |
| formatter: function (params) { | |
| console.log(params); | |
| } | |
| }, | |
| lineStyle:{ | |
| 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] | |
| } | |
| ] | |
| }); | |
| }); | |
| </script> | |
| <script> | |
| var echarts; | |
| var chart; | |
| var myChart; | |
| var groupCategories = []; | |
| var groupColors = []; | |
| require(['echarts'], function (ec) { | |
| echarts = ec; | |
| option = { | |
| color: [{ | |
| type: 'linear', | |
| colorStops: [{ | |
| offset: 0, | |
| color: 'rgba(42, 20, 20, 0.8)' | |
| }, { | |
| offset: 1, | |
| color: 'rgba(42, 20, 20, 0)' | |
| }], | |
| x: 0.5, | |
| y: 0, | |
| x2: 0.49999999999999994, | |
| y2: 1 | |
| }], | |
| xAxis: { | |
| // data: ['a', 'b', 'c', 'd'], | |
| data: ['a', 'b'], | |
| axisTick: {show: false}, | |
| axisLabel: { | |
| formatter: 'barGap: \'-100%\'' | |
| } | |
| }, | |
| yAxis: { | |
| splitLine: {show: false} | |
| }, | |
| animationDurationUpdate: 1200, | |
| grid: { | |
| width: 100 | |
| }, | |
| animation: false, | |
| series: [{ | |
| type: 'bar', | |
| itemStyle: { | |
| normal: { | |
| color: '#ddd' | |
| } | |
| }, | |
| silent: true, | |
| barWidth: 40, | |
| barGap: '-100%', // Make series be overlap | |
| data: [60, 60], | |
| label: { | |
| show: true, | |
| color: 'blue', | |
| position: 'top' | |
| } | |
| }, { | |
| type: 'bar', | |
| barWidth: 40, | |
| z: 10, | |
| data: [45, 55] | |
| }] | |
| }; | |
| testHelper.createChart(echarts, 'main2', option); | |
| }); | |
| </script> | |
| <script> | |
| var echarts; | |
| var chart; | |
| var myChart; | |
| var groupCategories = []; | |
| var groupColors = []; | |
| require([ | |
| 'echarts' | |
| ], function (ec) { | |
| echarts = ec; | |
| var dataCount = 10; | |
| var dayTimestamp = 24 * 60 * 60 * 1000; | |
| function makeSeriesData() { | |
| var result = []; | |
| var date = +(new Date(2019, 8, 10)); | |
| for (var i = 0; i < dataCount; i++) { | |
| result.push([+date, Math.random() * 1000]); | |
| date += dayTimestamp; | |
| } | |
| return result; | |
| } | |
| option = { | |
| xAxis: { | |
| type: 'time', | |
| boundaryGap: ['20%', '20%'], | |
| splitLine: {show: false} | |
| }, | |
| yAxis: { | |
| axisLine: {show: false}, | |
| axisTick: {show: false}, | |
| splitLine: {show: false} | |
| }, | |
| legend: {}, | |
| series: [{ | |
| name: 'barA1', | |
| type: 'bar', | |
| stack: 'a', | |
| select: { | |
| itemStyle: { | |
| color: 'green' | |
| } | |
| }, | |
| itemStyle: { | |
| shadowBlur: 10, | |
| borderColor: '#ef1', | |
| borderWidth: 5 | |
| }, | |
| data: makeSeriesData() | |
| }, { | |
| name: 'barA2', | |
| type: 'bar', | |
| stack: 'a', | |
| itemStyle: { | |
| borderColor: '#1dd', | |
| borderWidth: 5 | |
| }, | |
| data: makeSeriesData() | |
| }, { | |
| name: 'barB', | |
| type: 'bar', | |
| itemStyle: { | |
| shadowBlur: 5, | |
| borderColor: '#ef1', | |
| borderWidth: 3 | |
| }, | |
| data: makeSeriesData() | |
| }] | |
| }; | |
| var chart = testHelper.create(echarts, 'main3', { | |
| title: [ | |
| 'bar on time axis', | |
| 'click the legend, the bar should display normally' | |
| ], | |
| option: option | |
| // recordCanvas: true | |
| }); | |
| }); | |
| </script> | |
| <script> | |
| var echarts; | |
| var chart; | |
| var myChart; | |
| var groupCategories = []; | |
| var groupColors = []; | |
| require([ | |
| 'echarts' | |
| ], function (ec) { | |
| echarts = ec; | |
| var dataCount = 5; | |
| function makeSeriesData() { | |
| var result = []; | |
| var date = 0; | |
| for (var i = 0; i < dataCount; i++) { | |
| result.push([+date, Math.random() * 1000]); | |
| date += Math.ceil(Math.random() * 10); | |
| } | |
| return result; | |
| } | |
| var itemStyle = { | |
| shadowBlur: 5 | |
| }; | |
| option = { | |
| xAxis: { | |
| scale: true, | |
| // boundaryGap: ['0.5%', .1], | |
| splitLine: {show: false} | |
| }, | |
| yAxis: { | |
| axisLabel: { | |
| margin: 40 | |
| }, | |
| axisLine: {show: false}, | |
| axisTick: {show: false}, | |
| splitLine: {show: false} | |
| }, | |
| dataZoom: [{ | |
| type: 'slider' | |
| }, { | |
| type: 'inside' | |
| }], | |
| legend: {}, | |
| series: [{ | |
| name: 'barA', | |
| type: 'bar', | |
| itemStyle: itemStyle, | |
| data: makeSeriesData() | |
| }, { | |
| name: 'barB', | |
| type: 'bar', | |
| itemStyle: itemStyle, | |
| data: makeSeriesData() | |
| }], | |
| animation: false | |
| }; | |
| var chart = testHelper.create(echarts, 'main4', { | |
| title: [ | |
| 'bar on value axis', | |
| 'click the legend, the bar should display normally' | |
| ], | |
| option: option | |
| // recordCanvas: true | |
| }); | |
| }); | |
| </script> | |
| <script> | |
| var echarts; | |
| var chart; | |
| var myChart; | |
| var groupCategories = []; | |
| var groupColors = []; | |
| require([ | |
| 'echarts' | |
| ], function (ec) { | |
| echarts = ec; | |
| var dataCount = 10; | |
| function makeSeriesData() { | |
| var result = []; | |
| var date = 10; | |
| for (var i = 0; i < dataCount; i++) { | |
| result.push([+date, Math.random() * 1000]); | |
| date += 1; | |
| } | |
| return result; | |
| } | |
| var itemStyle = { | |
| shadowBlur: 5 | |
| }; | |
| option = { | |
| xAxis: { | |
| type: 'category', | |
| scale: true, | |
| boundaryGap: false, | |
| splitLine: {show: false}, | |
| axisLine: {show: false} | |
| }, | |
| yAxis: { | |
| axisLabel: { | |
| margin: 40 | |
| }, | |
| axisLine: {show: false}, | |
| axisTick: {show: false}, | |
| splitLine: {show: false} | |
| }, | |
| legend: {}, | |
| series: [{ | |
| name: 'lineA', | |
| type: 'line', | |
| data: makeSeriesData() | |
| }, { | |
| name: 'barA', | |
| type: 'bar', | |
| itemStyle: itemStyle, | |
| data: makeSeriesData() | |
| }, { | |
| name: 'barB', | |
| type: 'bar', | |
| itemStyle: itemStyle, | |
| data: makeSeriesData() | |
| }] | |
| }; | |
| var chart = testHelper.create(echarts, 'main5', { | |
| title: [ | |
| 'bar on category axis', | |
| 'click the legend, the bar should display normally' | |
| ], | |
| option: option | |
| // recordCanvas: true | |
| }); | |
| }); | |
| </script> | |
| <script> | |
| require(['echarts'], function (echarts) { | |
| option = { | |
| animation: false, | |
| dataZoom: [ | |
| { | |
| "type": "slider", | |
| "show": true | |
| } | |
| ], | |
| color: ['#003366', '#e5323e'], | |
| legend: { | |
| data: ['Forest', 'Desert'] | |
| }, | |
| xAxis: [ | |
| { | |
| type: 'time' | |
| } | |
| ], | |
| yAxis: [ | |
| { | |
| type: 'value' | |
| } | |
| ], | |
| series: [ | |
| { | |
| name: 'Forest', | |
| type: 'bar', | |
| barGap: 0, | |
| data: [["2017-05-26", 320], ["2017-05-25", 340], ["2017-05-24", 310]] | |
| }, | |
| { | |
| name: 'Desert', | |
| type: 'bar', | |
| data: [["2017-05-26", 240], ["2017-05-24", 315]] | |
| } | |
| ] | |
| }; | |
| var chart = testHelper.create(echarts, 'main6', { | |
| title: [ | |
| 'Bar series with time axis', | |
| 'Zoom in and bars should not overlap' | |
| ], | |
| option: option | |
| }); | |
| }); | |
| </script> | |
| <script> | |
| require(['echarts'], function (echarts) { | |
| option = { | |
| xAxis: { | |
| type: 'category', | |
| data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] | |
| }, | |
| yAxis: { | |
| type: 'value' | |
| }, | |
| series: [ | |
| { | |
| data: [120, 200, 150, 80, 70, 110, 130], | |
| type: 'bar', | |
| showBackground: true, | |
| backgroundStyle: { | |
| color: 'rgba(180, 180, 180, 0.2)' | |
| }, | |
| select: { | |
| itemStyle: { | |
| color: 'red' | |
| } | |
| }, | |
| selectedMode: 'single', | |
| stack: 'all', | |
| emphasis: {focus: 'series', blurScope: 'coordinateSystem'} | |
| }, | |
| { | |
| data: [120, 200, 150, 80, 70, 110, 130], | |
| type: 'bar', | |
| showBackground: true, | |
| backgroundStyle: { | |
| color: 'rgba(180, 180, 180, 0.2)' | |
| }, | |
| select: { | |
| itemStyle: { | |
| color: 'yellow' | |
| } | |
| }, | |
| selectedMode: 'single', | |
| stack: 'all', | |
| emphasis: {focus: 'series', blurScope: 'coordinateSystem'} | |
| }, | |
| { | |
| data: [130, { | |
| value: 120, | |
| select: { | |
| disabled: true | |
| } | |
| }, 160, { | |
| value: 120, | |
| selected: true | |
| }, 170, { | |
| value: 210, | |
| selected: true | |
| }, 230], | |
| type: 'bar', | |
| showBackground: true, | |
| backgroundStyle: { | |
| color: 'rgba(180, 180, 180, 0.2)' | |
| }, | |
| stack: 'all', | |
| select: { | |
| itemStyle: { | |
| color: 'green' | |
| } | |
| }, | |
| emphasis: {focus: 'series', blurScope: 'coordinateSystem'}, | |
| selectedMode: 'single', | |
| } | |
| ] | |
| } | |
| var chart = testHelper.create(echarts, 'main7', { | |
| title: [ | |
| 'Select in Bar Series', | |
| 'Click on bar will turn whole series into select state, expect second item in second serie whose select has been disbale' | |
| ], | |
| option: option, | |
| button: [ | |
| { | |
| text: 'Click to update selectedMode to \'single\'', | |
| onClick: () => { | |
| chart.setOption({ | |
| series: [ | |
| { selectedMode: 'single' }, | |
| { selectedMode: 'single' }, | |
| { selectedMode: 'single' }, | |
| ] | |
| }) | |
| } | |
| }, | |
| { | |
| text: 'Click to update selectedMode \'multiple\'', | |
| onClick: () => { | |
| chart.setOption({ | |
| series: [ | |
| { selectedMode: 'multiple' }, | |
| { selectedMode: 'multiple' }, | |
| { selectedMode: 'multiple' }, | |
| ] | |
| }) | |
| } | |
| }, | |
| { | |
| text: 'Click to update selectedMode \'series\'', | |
| onClick: () => { | |
| chart.setOption({ | |
| series: [ | |
| { selectedMode: 'series' }, | |
| { selectedMode: 'series' }, | |
| { selectedMode: 'series' }, | |
| ] | |
| }) | |
| } | |
| }, | |
| ] | |
| }); | |
| }); | |
| </script> | |
| </body> | |
| </html> |