| <!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/esl.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> |
| <link rel="stylesheet" href="lib/reset.css" /> |
| </head> |
| <body> |
| <style> |
| .test-title { |
| background: #146402; |
| color: #fff; |
| } |
| </style> |
| |
| |
| <div id="main0"></div> |
| <div id="main1"></div> |
| <div id="main2"></div> |
| <h2><a href="./custom-feature.html">custom element event case.</a></h2> |
| <div id="main3"></div> |
| <div id="main4"></div> |
| <div id="main5"></div> |
| <div id="main6"></div> |
| |
| |
| <script> |
| |
| require([ |
| 'echarts'/*, 'map/js/china' */ |
| ], function (echarts) { |
| |
| var option = { |
| xAxis: { |
| triggerEvent: true, |
| data: ['aaaa', 'bbbb', 'cccc', 'dddd', 'eeee'] |
| }, |
| yAxis: [{ |
| triggerEvent: true |
| }, { |
| triggerEvent: true, |
| type: 'category' |
| }], |
| series: [{ |
| type: 'line', |
| data: [121, 442, 55], |
| }, { |
| type: 'scatter', |
| yAxisIndex: 1, |
| data: ['asdf', 'zxcv', 'qwer'] |
| }, { |
| type: 'line', |
| data: [234, 213, 255], |
| markPoint: { |
| data: [{ |
| name: 'max value (default)', |
| type: 'max' |
| }] |
| } |
| }] |
| }; |
| |
| var chart = testHelper.create(echarts, 'main0', { |
| title: [ |
| '[click scatter point, console.log]: "clk", "clk series", "clk series.scatter"', |
| '[click xAxis, console.log]: "clk", "clk xAxis", "clk xAxis.category"', |
| '[click yAxis.category, console.log]: "clk", "clk yAxis.category"', |
| '[click line point, console.log]: "clk", "clk series"', |
| '[click the markPoint]: "clk", "clk series"' |
| ], |
| option: option |
| }); |
| |
| chart.on('click', function () { |
| console.log('clk'); |
| }); |
| chart.on('click', 'xAxis', function () { |
| console.log('clk xAxis'); |
| }); |
| chart.on('click', 'xAxis.category', function () { |
| console.log('clk xAxis.category'); |
| }); |
| chart.on('click', 'yAxis.category', function () { |
| console.log('clk yAxis.category'); |
| }); |
| chart.on('click', 'series', function () { |
| console.log('clk series'); |
| }); |
| chart.on('click', 'series.scatter', function () { |
| console.log('clk series.scatter'); |
| }); |
| |
| }); |
| |
| </script> |
| |
| |
| |
| |
| |
| |
| |
| <script> |
| |
| require([ |
| 'echarts'/*, 'map/js/china' */ |
| ], function (echarts) { |
| |
| var option = { |
| xAxis: { |
| triggerEvent: true, |
| data: ['aaaa', 'bbbb', 'cccc', 'dddd', 'eeee'] |
| }, |
| yAxis: [{ |
| id: 'left', |
| name: 'yAxisIndex: 0', |
| triggerEvent: true |
| }, { |
| name: 'yAxisIndex: 1', |
| triggerEvent: true, |
| type: 'category' |
| }], |
| series: [{ |
| type: 'line', |
| name: 'line-all', |
| symbolSize: 20, |
| data: [121, {name: 'dataIndex 1', value: 442}, 55], |
| }, { |
| type: 'scatter', |
| yAxisIndex: 1, |
| label: { |
| show: true, |
| formatter: 'name: {b}' |
| }, |
| symbolSize: 20, |
| data: [ |
| 'asdf', |
| {name: 'ff, dataIndex 1', value: 'zxcv'}, |
| 'qwer' |
| ] |
| }, { |
| type: 'line', |
| name: 'line-all', |
| symbolSize: 20, |
| label: { |
| show: true, |
| formatter: 'name: {b}' |
| }, |
| data: [ |
| {name: 'ee', value: 234}, |
| {name: 'ff, dataIndex 1', value: 113}, |
| {name: 'gg', value: 255} |
| ] |
| }] |
| }; |
| |
| var chart = testHelper.create(echarts, 'main1', { |
| title: [ |
| '[click scatter point, console.log]: "clk"', |
| '[click line point, console.log]: "clk", "click line-all"', |
| '[mouseup line point dataIndex 1, console.log]: "mup line-all dataIndex 1"', |
| '[mouseup scatter point dataIndex 1, console.log]: nothing logged', |
| '[mouseup line point not dataIndex 1, console.log]: nothing logged', |
| '[mouseover yAxisId: "left", console.log]: "mover yAxisId x"', |
| '[click yAxisIndex: 1, console.log]: "clk", "clk yAxisIndex 1"', |
| '[click data name "gg", console.log]: "clk", "clk data name gg"' |
| ], |
| option: option |
| }); |
| |
| chart.on('click', function () { |
| console.log('clk'); |
| }); |
| chart.on('click', {yAxisIndex: 1}, function () { |
| console.log('clk yAxisIndex 1'); |
| }); |
| chart.on('mouseover', {yAxisId: 'left'}, function () { |
| console.log('mover yAxisId x'); |
| }); |
| chart.on('click', {seriesName: 'line-all'}, function () { |
| console.log('clk line-all'); |
| }); |
| chart.on('click', {name: 'gg'}, function () { |
| console.log('clk data name gg'); |
| }); |
| chart.on('mouseup', {seriesName: 'line-all', dataIndex: 1}, function () { |
| console.log('mup line-all dataIndex 1'); |
| }); |
| }); |
| |
| </script> |
| |
| |
| |
| |
| |
| <script> |
| |
| require([ |
| 'echarts'/*, 'map/js/china' */ |
| ], function (echarts) { |
| |
| option = { |
| graphic: [{ |
| type: 'text', |
| left: 50, |
| top: 20, |
| style: { |
| textBackgroundColor: '#123456', |
| textPadding: 5, |
| fill: '#fff', |
| text: [ |
| 'this is a text of graphic component', |
| 'my name is not "aaa", click me must NOT console.log("aaa")' |
| ].join('\n') |
| } |
| }, { |
| type: 'text', |
| name: 'aaa', |
| left: 50, |
| top: 60, |
| style: { |
| textBackgroundColor: '#654321', |
| textPadding: 5, |
| fill: '#ffffff', |
| text: [ |
| 'this is a text of graphic component', |
| 'my name is "aaa", click me MUST console.log("aaa")' |
| ].join('\n') |
| } |
| }], |
| title: [{ |
| text: 'this is a text of title component, triggerEvent: true', |
| subtext: 'this is a subtext of title component, triggerEvent: true', |
| triggerEvent: true, |
| top: 120 |
| }, { |
| text: 'this is a text of title component, triggerEvent: default(false)', |
| subtext: 'this is a subtext of title component, triggerEvent: default(false)', |
| top: 180 |
| }] |
| }; |
| |
| chart = myChart = testHelper.create(echarts, 'main4', { |
| option: option, |
| title: 'click the text (graphic component), console.log the params' |
| }); |
| |
| chart.on('click', function (params) { |
| console.log(params); |
| }) |
| chart.on('click', {name: 'aaa'}, function (params) { |
| console.log('aaa', params); |
| }); |
| }); |
| </script> |
| |
| |
| |
| |
| |
| |
| <script> |
| |
| require([ |
| 'echarts'/*, 'map/js/china' */ |
| ], function (echarts) { |
| |
| var option = { |
| graphic: [{ |
| type: 'text', |
| left: 50, |
| top: 20, |
| info: { |
| x: 1 |
| }, |
| style: { |
| textBackgroundColor: '#123456', |
| textPadding: 5, |
| fill: '#fff', |
| text: 'click info is {x: 1}' |
| } |
| }, { |
| type: 'text', |
| left: 50, |
| top: 100, |
| info: 1234567, |
| style: { |
| textBackgroundColor: '#678901', |
| textPadding: 5, |
| fill: '#ff0', |
| text: 'click info is 1234567' |
| } |
| }, { |
| type: 'text', |
| left: 50, |
| top: 150, |
| info: ['a', 'b'], |
| style: { |
| textBackgroundColor: '#678901', |
| textPadding: 5, |
| fill: '#ff2', |
| text: 'click info is ["a", "b"]' |
| } |
| }] |
| }; |
| |
| var chart = testHelper.create(echarts, 'main5', { |
| option: option, |
| title: [ |
| 'user info check', |
| 'click text see console.log', |
| 'then click the button, and click text see console.log' |
| ], |
| button: { |
| text: 'setOption to merge user info', |
| onclick: function () { |
| chart.setOption({ |
| graphic: [{ |
| info: {b: 2}, |
| style: { |
| text: 'click info is {b: 2}' |
| } |
| }, { |
| info: void 0, |
| style: { |
| text: 'click info is undefined' |
| } |
| }] |
| }); |
| } |
| } |
| }); |
| |
| chart.on('click', function (params) { |
| console.log(params.info); |
| }) |
| }); |
| </script> |
| |
| |
| |
| |
| |
| |
| <script> |
| |
| require([ |
| 'echarts'/*, 'map/js/china' */ |
| ], function (echarts) { |
| |
| var option = { |
| tooltip: {}, |
| animationDurationUpdate: 1500, |
| animationEasingUpdate: 'quinticInOut', |
| series : [ |
| { |
| type: 'graph', |
| symbolSize: 20, |
| roam: true, |
| label: { |
| normal: { |
| show: true |
| } |
| }, |
| edgeSymbol: ['circle', 'arrow'], |
| edgeSymbolSize: [4, 10], |
| edgeLabel: { |
| normal: { |
| textStyle: { |
| fontSize: 20 |
| } |
| } |
| }, |
| focusNodeAdjacency: true, |
| data: [{ |
| name: '节点1', |
| x: 300, |
| y: 300, |
| value: 2321 |
| }, { |
| name: '节点2', |
| x: 800, |
| y: 300 |
| }], |
| links: [{ |
| source: 0, |
| target: 1, |
| symbolSize: [5, 20], |
| label: { |
| normal: { |
| show: true |
| // position: 'end' |
| } |
| }, |
| lineStyle: { |
| normal: { |
| width: 5, |
| curveness: 0.2 |
| } |
| } |
| }, { |
| source: '节点2', |
| target: '节点1', |
| label: { |
| normal: { |
| show: true |
| } |
| }, |
| lineStyle: { |
| normal: { curveness: 0.2 } |
| } |
| }], |
| lineStyle: { |
| normal: { |
| curveness: 0 |
| } |
| } |
| } |
| ] |
| }; |
| |
| var chart = testHelper.create(echarts, 'main6', { |
| title: [ |
| 'dataType filter', |
| '[click node, console.log]: "clk", "clk node"', |
| '[click edge, console.log]: "clk", "clk edge"', |
| ], |
| option: option |
| }); |
| |
| chart.on('click', function () { |
| console.log('clk'); |
| }); |
| chart.on('click', {dataType: 'node'}, function () { |
| console.log('clk node'); |
| }); |
| chart.on('click', {dataType: 'edge'}, function () { |
| console.log('clk edge'); |
| }); |
| |
| }); |
| |
| </script> |
| |
| |
| |
| |
| |
| |
| </body> |
| </html> |
