| <!DOCTYPE html> | |
| <!-- | |
| 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"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1" /> | |
| <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> | |
| <!-- <script src="ut/lib/canteen.js"></script> --> | |
| <link rel="stylesheet" href="lib/reset.css" /> | |
| </head> | |
| <body> | |
| <style> | |
| </style> | |
| <div id="main0"></div> | |
| <div id="main1"></div> | |
| <div id="main2"></div> | |
| <script> | |
| function makeToggleChartButtons(changeFocus) { | |
| return [{ | |
| text: 'Set focus: series', | |
| onclick: function () { | |
| changeFocus({ focus: 'series' }); | |
| } | |
| }, { | |
| text: 'Set focus: self', | |
| onclick: function () { | |
| changeFocus({ focus: 'self' }); | |
| } | |
| }, { | |
| text: 'Set blurScope: series', | |
| onclick: function () { | |
| changeFocus({ blurScope: 'series' }); | |
| } | |
| }, { | |
| text: 'Set blurScope: coordinateSystem', | |
| onclick: function () { | |
| changeFocus({ blurScope: 'coordinateSystem' }); | |
| } | |
| }, { | |
| text: 'Set blurScope: global', | |
| onclick: function () { | |
| changeFocus({ blurScope: 'global' }); | |
| } | |
| }]; | |
| } | |
| </script> | |
| <script> | |
| require(['echarts'/*, 'map/js/china' */], function (echarts) { | |
| var option; | |
| option = { | |
| grid: { | |
| right: '20%' | |
| }, | |
| legend: { | |
| data: ['蒸发量', '降水量', '平均温度'] | |
| }, | |
| xAxis: [ | |
| { | |
| type: 'category', | |
| axisTick: { | |
| alignWithLabel: true | |
| }, | |
| data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'] | |
| } | |
| ], | |
| yAxis: [ | |
| { | |
| type: 'value', | |
| name: '蒸发量', | |
| min: 0, | |
| max: 250, | |
| position: 'right', | |
| axisLabel: { | |
| formatter: '{value} ml' | |
| } | |
| }, | |
| { | |
| type: 'value', | |
| name: '降水量', | |
| min: 0, | |
| max: 250, | |
| position: 'right', | |
| offset: 80, | |
| axisLabel: { | |
| formatter: '{value} ml' | |
| } | |
| }, | |
| { | |
| type: 'value', | |
| name: '温度', | |
| min: 0, | |
| max: 25, | |
| position: 'left', | |
| axisLabel: { | |
| formatter: '{value} °C' | |
| } | |
| } | |
| ], | |
| series: [ | |
| { | |
| name: '蒸发量', | |
| type: 'bar', | |
| 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] | |
| }, | |
| { | |
| name: '降水量', | |
| type: 'bar', | |
| yAxisIndex: 1, | |
| 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] | |
| }, | |
| { | |
| name: '平均温度', | |
| type: 'line', | |
| yAxisIndex: 2, | |
| data: [2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2] | |
| } | |
| ] | |
| }; | |
| var chart = testHelper.create(echarts, 'main0', { | |
| title: [ | |
| 'Multiple series on same grid' | |
| ], | |
| buttons: makeToggleChartButtons(function (newOpt) { | |
| option.series.forEach(function (seriesOpt) { | |
| seriesOpt.emphasis = Object.assign(seriesOpt.emphasis || {}, newOpt) | |
| }); | |
| chart.setOption(option); | |
| }), | |
| option: option | |
| }); | |
| }); | |
| </script> | |
| <script> | |
| require(['echarts'/*, 'map/js/china' */], function (echarts) { | |
| var dataAll = [ | |
| [ | |
| [10.0, 8.04], | |
| [8.0, 6.95], | |
| [13.0, 7.58], | |
| [9.0, 8.81], | |
| [11.0, 8.33], | |
| [14.0, 9.96], | |
| [6.0, 7.24], | |
| [4.0, 4.26], | |
| [12.0, 10.84], | |
| [7.0, 4.82], | |
| [5.0, 5.68] | |
| ], | |
| [ | |
| [10.0, 9.14], | |
| [8.0, 8.14], | |
| [13.0, 8.74], | |
| [9.0, 8.77], | |
| [11.0, 9.26], | |
| [14.0, 8.10], | |
| [6.0, 6.13], | |
| [4.0, 3.10], | |
| [12.0, 9.13], | |
| [7.0, 7.26], | |
| [5.0, 4.74] | |
| ], | |
| [ | |
| [10.0, 7.46], | |
| [8.0, 6.77], | |
| [13.0, 12.74], | |
| [9.0, 7.11], | |
| [11.0, 7.81], | |
| [14.0, 8.84], | |
| [6.0, 6.08], | |
| [4.0, 5.39], | |
| [12.0, 8.15], | |
| [7.0, 6.42], | |
| [5.0, 5.73] | |
| ], | |
| [ | |
| [8.0, 6.58], | |
| [8.0, 5.76], | |
| [8.0, 7.71], | |
| [8.0, 8.84], | |
| [8.0, 8.47], | |
| [8.0, 7.04], | |
| [8.0, 5.25], | |
| [19.0, 12.50], | |
| [8.0, 5.56], | |
| [8.0, 7.91], | |
| [8.0, 6.89] | |
| ] | |
| ]; | |
| var markLineOpt = { | |
| animation: false, | |
| label: { | |
| formatter: 'y = 0.5 * x + 3', | |
| align: 'right' | |
| }, | |
| lineStyle: { | |
| type: 'solid' | |
| }, | |
| tooltip: { | |
| formatter: 'y = 0.5 * x + 3' | |
| }, | |
| data: [[{ | |
| coord: [0, 3], | |
| symbol: 'none' | |
| }, { | |
| coord: [20, 13], | |
| symbol: 'none' | |
| }]] | |
| }; | |
| option = { | |
| title: { | |
| text: 'Anscombe\'s quartet', | |
| left: 'center', | |
| top: 0 | |
| }, | |
| grid: [ | |
| {x: '7%', y: '7%', width: '38%', height: '38%'}, | |
| {x2: '7%', y: '7%', width: '38%', height: '38%'}, | |
| {x: '7%', y2: '7%', width: '38%', height: '38%'}, | |
| {x2: '7%', y2: '7%', width: '38%', height: '38%'} | |
| ], | |
| tooltip: { | |
| formatter: 'Group {a}: ({c})' | |
| }, | |
| xAxis: [ | |
| {gridIndex: 0, min: 0, max: 20}, | |
| {gridIndex: 1, min: 0, max: 20}, | |
| {gridIndex: 2, min: 0, max: 20}, | |
| {gridIndex: 3, min: 0, max: 20} | |
| ], | |
| yAxis: [ | |
| {gridIndex: 0, min: 0, max: 15}, | |
| {gridIndex: 1, min: 0, max: 15}, | |
| {gridIndex: 2, min: 0, max: 15}, | |
| {gridIndex: 3, min: 0, max: 15} | |
| ], | |
| series: [ | |
| { | |
| name: 'I', | |
| type: 'scatter', | |
| xAxisIndex: 0, | |
| yAxisIndex: 0, | |
| data: dataAll[0], | |
| symbolSize: 20, | |
| markLine: markLineOpt | |
| }, | |
| { | |
| name: 'II', | |
| type: 'scatter', | |
| xAxisIndex: 1, | |
| yAxisIndex: 1, | |
| data: dataAll[1], | |
| symbolSize: 20, | |
| markLine: markLineOpt | |
| }, | |
| { | |
| name: 'III', | |
| type: 'scatter', | |
| xAxisIndex: 2, | |
| yAxisIndex: 2, | |
| data: dataAll[2], | |
| symbolSize: 20, | |
| markLine: markLineOpt | |
| }, | |
| { | |
| name: 'IV', | |
| type: 'scatter', | |
| xAxisIndex: 3, | |
| yAxisIndex: 3, | |
| data: dataAll[3], | |
| symbolSize: 20, | |
| markLine: markLineOpt | |
| } | |
| ] | |
| }; | |
| var chart = testHelper.create(echarts, 'main1', { | |
| title: [ | |
| 'Multiple grid' | |
| ], | |
| buttons: makeToggleChartButtons(function (newOpt) { | |
| option.series.forEach(function (seriesOpt) { | |
| seriesOpt.emphasis = Object.assign(seriesOpt.emphasis || {}, newOpt) | |
| }); | |
| chart.setOption(option); | |
| }), | |
| option: option | |
| }); | |
| }); | |
| </script> | |
| <script> | |
| require(['echarts'/*, 'map/js/china' */], function (echarts) { | |
| var option; | |
| option = { | |
| xAxis: { | |
| data: ['a', 'b', 'c'] | |
| }, | |
| yAxis: {}, | |
| series: [{ | |
| type: 'bar', | |
| emphasis: { | |
| focus: 'series' | |
| }, | |
| data: [1212, 3232, 2525] | |
| }, { | |
| type: 'bar', | |
| emphasis: { | |
| // itemStyle: { | |
| // color: 'red' | |
| // }, | |
| focus: 'series' | |
| }, | |
| data: [1212, 3232, 2525] | |
| }] | |
| }; | |
| var buttons = makeToggleChartButtons(function (newOpt) { | |
| option.series.forEach(function (seriesOpt) { | |
| seriesOpt.emphasis = Object.assign(seriesOpt.emphasis || {}, newOpt) | |
| }); | |
| chart.setOption(option); | |
| }); | |
| buttons.push({ | |
| text: 'highlight seriesIndex: 0, dataIndex: 1', | |
| onclick: function () { | |
| chart.dispatchAction({ | |
| type: 'highlight', | |
| seriesIndex: 0, | |
| dataIndex: 1 | |
| }); | |
| } | |
| }, { | |
| text: 'highlight seriesIndex: 1, dataIndex: 1', | |
| onclick: function () { | |
| chart.dispatchAction({ | |
| type: 'highlight', | |
| seriesIndex: 1, | |
| dataIndex: 1 | |
| }); | |
| } | |
| }, { | |
| text: 'downplay seriesIndex: 1, dataIndex: 1', | |
| onclick: function () { | |
| chart.dispatchAction({ | |
| type: 'downplay', | |
| seriesIndex: 1, | |
| dataIndex: 1 | |
| }); | |
| } | |
| }, { | |
| text: 'downplay all', | |
| onclick: function () { | |
| chart.dispatchAction({ | |
| type: 'downplay' | |
| }); | |
| } | |
| }, { | |
| text: 'Highlight all', | |
| onclick: function () { | |
| chart.dispatchAction({ | |
| type: 'highlight', | |
| seriesIndex: [0, 1], | |
| }); | |
| } | |
| }); | |
| var chart = testHelper.create(echarts, 'main2', { | |
| title: [ | |
| 'API trigger highlight' | |
| ], | |
| option: option, | |
| // height: 300, | |
| buttons: buttons | |
| // recordCanvas: true, | |
| }); | |
| }); | |
| </script> | |
| </body> | |
| </html> | |