Spaces:
Running
Running
| <!-- | |
| 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="lib/canteen.js"></script> | |
| <link rel="stylesheet" href="lib/reset.css" /> | |
| </head> | |
| <body> | |
| <style> | |
| </style> | |
| <div id="Legacy_compat_test"></div> | |
| <div id="insideFill_Stroke_auto_test"></div> | |
| <div id="textConfig_other_feature_test"></div> | |
| <div id="insideFill_Stroke_hover_test"></div> | |
| <div id="z_order_test"></div> | |
| <div id="hover_style_disable"></div> | |
| <div id="hover_style_remove"></div> | |
| <!-- Utils ----------------------------------------------- --> | |
| <script> | |
| function createMaker(opt) { | |
| opt = opt || {}; | |
| var xStart = opt.xCurr || 80; | |
| var xCurr = xStart; | |
| var yStart = opt.yCurr || 20; | |
| var yCurr = yStart; | |
| var xStep = opt.xStep || 100; | |
| var yStep = opt.yStep || 65; | |
| var colCount = 0; | |
| var yMax = 0; | |
| var maxCol = opt.maxCol || Infinity; | |
| var children = []; | |
| function createRectShape(width, height) { | |
| width = width || 20; | |
| height = height || 30; | |
| return {x: -width / 2, y: 0, width: width, height: height}; | |
| } | |
| function makeGraphic(text, creators) { | |
| var y = yCurr; | |
| children.push({ | |
| type: 'text', x: xCurr, y: y, | |
| style: {text: text, fill: '#900', align: 'center', fontSize: 10} | |
| }); | |
| y += yStep; | |
| for (var i = 0; i < creators.length; i++) { | |
| children.push(creators[i](xCurr, y)); | |
| y += yStep; | |
| } | |
| xCurr += xStep; | |
| yMax = Math.max(y, yMax); | |
| colCount++; | |
| if (colCount >= maxCol) { | |
| colCount = 0; | |
| xCurr = xStart; | |
| yCurr = yMax + yStep * 0.7; | |
| } | |
| } | |
| return { | |
| makeGraphic: makeGraphic, | |
| createRectShape: createRectShape, | |
| children: children | |
| }; | |
| } | |
| // opt: {globalColor, backgroundColor} | |
| function createOption(renderItem, opt) { | |
| return { | |
| animation: false, | |
| backgroundColor: opt && opt.backgroundColor, | |
| color: opt && opt.globalColor, | |
| xAxis: {axisLine: {lineStyle: {color: 'rgba(0,0,0,0.2)'}}, axisLabel: {show: false}, splitLine: {show: false}}, | |
| yAxis: {axisLine: {lineStyle: {color: 'rgba(0,0,0,0.2)'}}, axisLabel: {show: false}, splitLine: {show: false}}, | |
| grid: {left: 30}, | |
| series: { | |
| type: 'custom', | |
| renderItem: renderItem, | |
| data: [[1, 1]] | |
| } | |
| }; | |
| } | |
| </script> | |
| <!-- --------------------------------------------------- --> | |
| <script> | |
| require(['echarts'], function (echarts) { | |
| function renderItem(params, api) { | |
| var maker = createMaker({xStep: 120, yStep: 60, maxCol: 5}); | |
| var makeGraphic = maker.makeGraphic; | |
| var createRectShape = maker.createRectShape; | |
| makeGraphic([ | |
| 'normal: green rect', 'inside orange' | |
| ].join('\n'), [ | |
| function (x, y) { | |
| return { | |
| type: 'rect', position: [x, y], shape: createRectShape(), | |
| style: { | |
| // textPosition not set but by default 'inside' | |
| text: 'legacy1', fill: 'green', textFill: 'orange' | |
| } | |
| }; | |
| }, | |
| function (x, y) { | |
| return { | |
| type: 'rect', x: x, y: y, shape: createRectShape(), | |
| style: {fill: 'green'}, | |
| textContent: {style: {text: 'ec5_api', fill: 'orange'}}, | |
| textConfig: {position: 'inside'} | |
| }; | |
| } | |
| ]); | |
| makeGraphic([ | |
| 'normal: green rect', 'inside orange', 'text is number 0', 'should be displayed' | |
| ].join('\n'), [ | |
| function (x, y) { | |
| return { | |
| type: 'rect', position: [x, y], shape: createRectShape(), | |
| style: { | |
| // text is number 0, can be displayed | |
| text: 0, fill: 'green', textFill: 'orange' | |
| } | |
| }; | |
| }, | |
| function (x, y) { | |
| return { | |
| type: 'rect', x: x, y: y, shape: createRectShape(), | |
| style: {fill: 'green'}, | |
| textContent: {style: {text: 0, fill: 'orange'}}, | |
| textConfig: {position: 'inside'} | |
| }; | |
| } | |
| ]); | |
| makeGraphic([ | |
| 'normal: green rect', 'inside white/bordered', 'hover: red rect', 'inside white/bordered' | |
| ].join('\n'), [ | |
| function (x, y) { | |
| return { | |
| type: 'rect', position: [x, y], shape: createRectShape(), | |
| style: api.style({text: 'legacy0'}), | |
| styleEmphasis: {fill: 'red'} | |
| }; | |
| }, | |
| function (x, y) { | |
| return { | |
| type: 'rect', position: [x, y], shape: createRectShape(), | |
| style: { | |
| text: 'legacy1', fill: 'green', textPosition: 'inside', | |
| textFill: '#fff', textStroke: 'green', textStrokeWidth: 2 | |
| }, | |
| styleEmphasis: {fill: 'red'} | |
| }; | |
| }, | |
| function (x, y) { | |
| return { | |
| type: 'rect', x: x, y: y, shape: createRectShape(), | |
| style: {fill: 'green'}, | |
| textContent: {style: {text: 'ec5_api'}}, | |
| textConfig: {position: 'inside'}, | |
| emphasis: {style: {fill: 'red'}} | |
| }; | |
| } | |
| ]); | |
| makeGraphic([ | |
| 'normal: green rect', 'bottom green', 'hover: red rect', 'bottom green' | |
| ].join('\n'), [ | |
| function (x, y) { | |
| return { | |
| type: 'rect', position: [x, y], shape: createRectShape(), | |
| style: api.style({text: 'legacy0', textPosition: 'bottom'}), | |
| styleEmphasis: {fill: 'red'} | |
| }; | |
| }, | |
| function (x, y) { | |
| return { | |
| type: 'rect', x: x, y: y, shape: createRectShape(), | |
| style: {fill: 'green'}, | |
| textContent: {style: {text: 'ec5_api'}}, | |
| textConfig: {position: 'bottom', outsideFill: 'green'}, | |
| emphasis: {style: {fill: 'red'}} | |
| }; | |
| } | |
| ]); | |
| makeGraphic([ | |
| 'green rect', 'normal: inside white/bordered', 'hover: inside red' | |
| ].join('\n'), [ | |
| function (x, y) { | |
| return { | |
| type: 'rect', position: [x, y], shape: createRectShape(), | |
| style: api.style({text: 'legacy0'}), | |
| styleEmphasis: {textFill: 'red'} | |
| }; | |
| }, | |
| function (x, y) { | |
| return { | |
| type: 'rect', position: [x, y], shape: createRectShape(), | |
| style: { | |
| text: 'legacy1', fill: 'green', textPosition: 'inside', | |
| textFill: '#fff', textStroke: 'green', textStrokeWidth: 2 | |
| }, | |
| styleEmphasis: {textFill: 'red'} | |
| }; | |
| }, | |
| function (x, y) { | |
| return { | |
| type: 'rect', x: x, y: y, shape: createRectShape(), | |
| style: {fill: 'green'}, | |
| textContent: { | |
| style: {text: 'ec5_api'}, | |
| emphasis: {style: {fill: 'red', stroke: 'green', lineWidth: 2}} | |
| }, | |
| textConfig: {position: 'inside'} | |
| }; | |
| } | |
| ]); | |
| makeGraphic([ | |
| 'green rect', 'normal: bottom red', 'hover: bottom blue' | |
| ].join('\n'), [ | |
| function (x, y) { | |
| return { | |
| type: 'rect', position: [x, y], shape: createRectShape(), | |
| style: api.style({text: 'legacy0', textPosition: 'bottom', textFill: 'red'}), | |
| styleEmphasis: {textFill: 'blue'} | |
| }; | |
| }, | |
| function (x, y) { | |
| return { | |
| type: 'rect', x: x, y: y, shape: createRectShape(), | |
| style: {fill: 'green'}, | |
| textContent: { | |
| style: {text: 'ec5_api', fill: 'red'}, | |
| emphasis: {style: {fill: 'blue'}} | |
| }, | |
| textConfig: {position: 'bottom'} | |
| }; | |
| } | |
| ]); | |
| makeGraphic(['green rect', 'normal: inside white/borded', 'hover: bottom'].join('\n'), [ | |
| function (x, y) { | |
| return { | |
| type: 'rect', position: [x, y], shape: createRectShape(), | |
| style: api.style({text: 'legacy0'}), | |
| // Hover not compat to ec4 (to complicated) | |
| styleEmphasis: {textPosition: 'bottom'} | |
| }; | |
| } | |
| ]); | |
| makeGraphic(['green rect', 'normal: inside red', 'hover: bottom red'].join('\n'), [ | |
| function (x, y) { | |
| return { | |
| type: 'rect', position: [x, y], shape: createRectShape(), | |
| style: api.style({text: 'legacy0', textFill: 'red'}), | |
| styleEmphasis: {textPosition: 'bottom'} | |
| }; | |
| } | |
| ]); | |
| makeGraphic(['green rect', 'normal: inside white', 'hover: bottom red'].join('\n'), [ | |
| function (x, y) { | |
| return { | |
| type: 'rect', position: [x, y], shape: createRectShape(), | |
| style: api.style({text: 'legacy0', textFill: 'white'}), | |
| styleEmphasis: {textFill: 'red', textPosition: 'bottom'} | |
| }; | |
| } | |
| ]); | |
| makeGraphic(['green rect', 'normal: inside white/bordered', 'hover: auto lift'].join('\n'), [ | |
| function (x, y) { | |
| return { | |
| type: 'rect', position: [x, y], shape: createRectShape(), | |
| style: api.style({text: 'legacy0'}) | |
| }; | |
| }, | |
| function (x, y) { | |
| return { | |
| type: 'rect', x: x, y: y, shape: createRectShape(), | |
| style: {fill: 'green'}, | |
| textContent: {style: {text: 'ec5_api'}}, | |
| textConfig: {position: 'inside'} | |
| }; | |
| } | |
| ]); | |
| makeGraphic(['green rect', 'normal: bottom green', 'hover: auto lift'].join('\n'), [ | |
| function (x, y) { | |
| return { | |
| type: 'rect', position: [x, y], shape: createRectShape(), | |
| style: api.style({text: 'legacy0', textPosition: 'bottom'}) | |
| }; | |
| }, | |
| function (x, y) { | |
| return { | |
| type: 'rect', x: x, y: y, shape: createRectShape(), | |
| style: {fill: 'green'}, | |
| textContent: {style: {text: 'ec5_api', fill: 'green'}}, | |
| textConfig: {position: 'bottom'} | |
| }; | |
| } | |
| ]); | |
| return { | |
| type: 'group', | |
| children: maker.children | |
| }; | |
| } | |
| var chart = testHelper.create(echarts, 'Legacy_compat_test', { | |
| title: [ | |
| 'Legacy compat test', | |
| 'Each column rects are the same effect implemented by', | |
| 'legacy API and corresponding new API.', | |
| 'So **each column** must be **the same result**', | |
| '(except text string and some ec5 enhancement).', | |
| '**Hover** also needs to be tested' | |
| ], | |
| height: 550, | |
| option: createOption(renderItem, {globalColor: ['green']}) | |
| }); | |
| }); | |
| </script> | |
| <script> | |
| require(['echarts'], function (echarts) { | |
| function renderItem() { | |
| var maker = createMaker({maxCol: 5}); | |
| var makeGraphic = maker.makeGraphic; | |
| var createRectShape = maker.createRectShape; | |
| // opt for example: | |
| // opt.type | |
| // opt.shape | |
| // opt.textConfig: {}, | |
| // opt.textContent: {}, if rich: textContent.style: {rich: {i: xxx}} | |
| // opt.emphasis: {} | |
| // opt.extraTitle: string[] | |
| function makeTest(opt) { | |
| var isRich = opt.textContent.style.rich; | |
| var type = opt.type || 'rect'; | |
| var shape = opt.shape || createRectShape(40, 120); | |
| var title = ['green rect', (isRich ? 'rich text' : 'plain text')]; | |
| opt.extraTitle && (title = title.concat(opt.extraTitle)); | |
| makeGraphic(title.join('\n'), [ | |
| function (x, y) { | |
| var result = { | |
| type: type, x: x, y: y, shape: shape, style: {fill: 'green'}, | |
| textConfig: opt.textConfig, | |
| textContent: opt.textContent | |
| } | |
| if (opt.emphasis) { | |
| result.emphasis = opt.emphasis; | |
| } | |
| return result; | |
| } | |
| ]); | |
| } | |
| makeTest({ | |
| textConfig: {position: 'insideTop', rotation: -0.5 * Math.PI}, | |
| textContent: {style: { | |
| text: '90 rotated text align with:\nv: top h: middle\ndefault distance', | |
| align: 'left', verticalAlign: 'middle' | |
| }} | |
| }); | |
| makeTest({ | |
| textConfig: {position: 'insideTop', rotation: -0.5 * Math.PI, distance: 0}, | |
| textContent: {style: { | |
| text: '90 rotated text align with:\n v: top h: middle\nno distance', | |
| align: 'left', verticalAlign: 'middle' | |
| }} | |
| }); | |
| makeTest({ | |
| textConfig: {position: 'insideTop', rotation: -0.5 * Math.PI, distance: 0, offset: [0, -25]}, | |
| textContent: {style: { | |
| text: '90 rotated text outside right rect\nalign top', | |
| fill: '#700', | |
| align: 'left', verticalAlign: 'bottom' | |
| }} | |
| }); | |
| makeTest({ | |
| textConfig: {position: 'insideTop', rotation: -0.5 * Math.PI}, | |
| textContent: {style: { | |
| text: '90 rotated text align with:\n{i|v: top h: middle}\n{a|align right}', | |
| align: 'left', verticalAlign: 'middle', | |
| rich: { | |
| i: {fontSize: 20, fill: 'orange'}, | |
| a: {align: 'right'} | |
| } | |
| }} | |
| }); | |
| makeTest({ | |
| extraTitle: ['emphasis:\nalign/verticalAlign rollback'], | |
| textConfig: {position: 'left'}, | |
| textContent: { | |
| style: { | |
| text: '--------\nalign\nright\n----', | |
| fill: '#700' | |
| } | |
| }, | |
| emphasis: { | |
| textConfig: {position: null} | |
| } | |
| }); | |
| makeTest({ | |
| type: 'circle', | |
| shape: {cx: 0, cy: 20, r: 30}, | |
| textConfig: { | |
| position: 'right', | |
| }, | |
| textContent: { | |
| rotation: -0.3 * Math.PI, | |
| originX: -35, | |
| style: { | |
| text: 'Rotate, outside, origin is center', | |
| fontSize: 20, | |
| fill: '#700', | |
| align: 'left', | |
| verticalAlign: 'middle' | |
| } | |
| } | |
| }); | |
| makeTest({ | |
| type: 'circle', | |
| shape: {cx: 0, cy: 20, r: 30}, | |
| textConfig: { | |
| position: 'inside', offset: [35, 0] | |
| }, | |
| textContent: { | |
| rotation: -0.3 * Math.PI, | |
| style: { | |
| text: 'Rotate, outside, origin is center', | |
| fontSize: 20, | |
| fill: '#700', | |
| align: 'left', | |
| verticalAlign: 'middle' | |
| } | |
| } | |
| }); | |
| return { | |
| type: 'group', | |
| children: maker.children | |
| }; | |
| } | |
| var chart = testHelper.create(echarts, 'textConfig_other_feature_test', { | |
| title: [ | |
| 'textConfig other feature test' | |
| ], | |
| option: createOption(renderItem), | |
| // recordCanvas: true, | |
| height: 800 | |
| }); | |
| }); | |
| </script> | |
| <script> | |
| require(['echarts'], function (echarts) { | |
| function renderItem() { | |
| var maker = createMaker({maxCol: 6}); | |
| var makeGraphic = maker.makeGraphic; | |
| var createRectShape = maker.createRectShape; | |
| // opt for example: | |
| // opt.textConfig: {}, | |
| // opt.textContentStyle: {}, if rich: textContentStyle: {rich: {i: xxx}} | |
| // opt.expect: [ {fill: 'white', stroke: 'green'}, {fill: 'white', stroke: 'green'} ] | |
| function makeTest(opt) { | |
| var expect0 = opt.expect[0]; | |
| var expect1 = opt.expect[1]; | |
| var isRich = opt.textContentStyle.rich; | |
| makeGraphic(['green rect', (isRich ? 'rich text' : 'plain text')].join('\n'), [ | |
| function (x, y) { | |
| var text = [ | |
| isRich ? '{i|inside}' : 'inside', | |
| 'fill: ' + expect0.fill, | |
| 'stroke: ' + expect0.stroke | |
| ].join('\n'); | |
| return { | |
| type: 'rect', x: x, y: y, shape: createRectShape(), style: {fill: 'green'}, | |
| textConfig: echarts.util.extend({position: 'inside'}, opt.textConfig), | |
| textContent: { | |
| style: echarts.util.extend({text: text}, opt.textContentStyle) | |
| } | |
| } | |
| }, | |
| function (x, y) { | |
| var text = [ | |
| isRich ? '{i|bottom}' : 'bottom', | |
| 'fill: ' + expect1.fill, | |
| 'stroke: ' + expect1.stroke | |
| ].join('\n'); | |
| return { | |
| type: 'rect', x: x, y: y, shape: createRectShape(), style: {fill: 'green'}, | |
| textConfig: echarts.util.extend({position: 'bottom'}, opt.textConfig), | |
| textContent: { | |
| style: echarts.util.extend({text: text}, opt.textContentStyle) | |
| } | |
| } | |
| } | |
| ]); | |
| } | |
| makeTest({ | |
| textConfig: {}, | |
| textContentStyle: {}, | |
| expect: [ | |
| {fill: 'white', stroke: 'green'}, | |
| {fill: 'black', stroke: 'none'} | |
| ] | |
| }); | |
| makeTest({ | |
| textConfig: {}, | |
| textContentStyle: {backgroundColor: '#aaa'}, | |
| expect: [ | |
| {fill: 'white', stroke: 'none'}, | |
| {fill: 'black', stroke: 'none'} | |
| ] | |
| }); | |
| makeTest({ | |
| textConfig: {}, | |
| textContentStyle: {borderColor: '#aaa', borderWidth: 2, padding: 5}, | |
| expect: [ | |
| {fill: 'white', stroke: 'none'}, | |
| {fill: 'black', stroke: 'none'} | |
| ] | |
| }); | |
| makeTest({ | |
| textConfig: {}, | |
| textContentStyle: {rich: {i: {fontSize: 30}}}, | |
| expect: [ | |
| {fill: 'white', stroke: 'green'}, | |
| {fill: 'black', stroke: 'none'} | |
| ] | |
| }); | |
| makeTest({ | |
| textConfig: {}, | |
| textContentStyle: {rich: {i: {backgroundColor: '#aaa'}}}, | |
| expect: [ | |
| {fill: 'white', stroke: 'none'}, | |
| {fill: 'black', stroke: 'none'} | |
| ] | |
| }); | |
| makeTest({ | |
| textConfig: {}, | |
| textContentStyle: {rich: {i: {borderColor: '#aaa', borderWidth: 2, fontSize: 20}}}, | |
| expect: [ | |
| {fill: 'white', stroke: 'none'}, | |
| {fill: 'black', stroke: 'green'} | |
| ] | |
| }); | |
| makeTest({ | |
| textConfig: {}, | |
| textContentStyle: {fill: 'orange'}, | |
| expect: [ | |
| {fill: 'orange', stroke: 'none'}, | |
| {fill: 'orange', stroke: 'none'} | |
| ] | |
| }); | |
| makeTest({ | |
| textConfig: {}, | |
| textContentStyle: {fill: 'orange', stroke: 'blue', lineWidth: 2}, | |
| expect: [ | |
| {fill: 'orange', stroke: 'blue'}, | |
| {fill: 'orange', stroke: 'blue'} | |
| ] | |
| }); | |
| makeTest({ | |
| textConfig: {}, | |
| textContentStyle: {stroke: 'blue', lineWidth: 2}, | |
| expect: [ | |
| {fill: 'white', stroke: 'blue'}, | |
| {fill: 'black', stroke: 'blue'} | |
| ] | |
| }); | |
| makeTest({ | |
| textConfig: {insideFill: 'yellow'}, | |
| textContentStyle: {}, | |
| expect: [ | |
| {fill: 'yellow', stroke: 'green'}, | |
| {fill: 'black', stroke: 'none'} | |
| ] | |
| }); | |
| makeTest({ | |
| textConfig: {insideFill: 'yellow'}, | |
| textContentStyle: {fill: 'orange'}, | |
| expect: [ | |
| {fill: 'orange', stroke: 'none'}, | |
| {fill: 'orange', stroke: 'none'} | |
| ] | |
| }); | |
| makeTest({ | |
| textConfig: {insideFill: 'yellow', insideStroke: 'blue'}, | |
| textContentStyle: {}, | |
| expect: [ | |
| {fill: 'yellow', stroke: 'blue'}, | |
| {fill: 'black', stroke: 'none'} | |
| ] | |
| }); | |
| makeTest({ | |
| textConfig: {insideFill: 'yellow', insideStroke: 'blue'}, | |
| textContentStyle: {fill: 'pink'}, | |
| expect: [ | |
| {fill: 'pink', stroke: 'blue'}, | |
| {fill: 'pink', stroke: 'none'} | |
| ] | |
| }); | |
| makeTest({ | |
| textConfig: {insideStroke: 'blue'}, | |
| textContentStyle: {}, | |
| expect: [ | |
| {fill: 'white', stroke: 'blue'}, | |
| {fill: 'black', stroke: 'none'} | |
| ] | |
| }); | |
| makeTest({ | |
| textConfig: {outsideFill: 'blue', outsideStroke: 'red'}, | |
| textContentStyle: {}, | |
| expect: [ | |
| {fill: 'white', stroke: 'green'}, | |
| {fill: 'blue', stroke: 'red'} | |
| ] | |
| }); | |
| makeTest({ | |
| textConfig: {outsideFill: 'blue', outsideStroke: 'red'}, | |
| textContentStyle: {fill: 'pink'}, | |
| expect: [ | |
| {fill: 'pink', stroke: 'none'}, | |
| {fill: 'pink', stroke: 'red'} | |
| ] | |
| }); | |
| return { | |
| type: 'group', | |
| children: maker.children | |
| }; | |
| } | |
| var chart = testHelper.create(echarts, 'insideFill_Stroke_auto_test', { | |
| title: [ | |
| 'insideFill/insideStroke outsideFill/outsideStroke auto rule test' | |
| ], | |
| option: createOption(renderItem, {backgroundColor: '#ddd'}), | |
| height: 800 | |
| }); | |
| }); | |
| </script> | |
| <script> | |
| require(['echarts'], function (echarts) { | |
| function renderItem(params, api) { | |
| var maker = createMaker({xCurr: 150, xStep: 150, yStep: 90}); | |
| var makeGraphic = maker.makeGraphic; | |
| var createRectShape = maker.createRectShape; | |
| makeGraphic(['insideFill/Stroke not set', 'normal: white/bordered'].join('\n'), [ | |
| function (x, y) { | |
| return { | |
| type: 'rect', x: x, y: y, shape: createRectShape(), | |
| style: {fill: 'green'}, | |
| textContent: { | |
| type: 'text', silent: true, style: { | |
| text: 'if hover,\ntop black' | |
| } | |
| }, | |
| textConfig: {position: 'inside'}, | |
| emphasis: { | |
| textConfig: {position: 'top'} | |
| } | |
| }; | |
| }, | |
| function (x, y) { | |
| return { | |
| type: 'rect', x: x, y: y, shape: createRectShape(), | |
| style: {fill: 'green'}, | |
| textContent: {type: 'text', silent: true, style: {text: 'if hover,\nright green'}}, | |
| textConfig: { | |
| position: 'inside', outsideFill: 'green' | |
| }, | |
| emphasis: { | |
| textConfig: {position: 'right'} | |
| } | |
| }; | |
| }, | |
| function (x, y) { | |
| return { | |
| type: 'rect', x: x, y: y, shape: createRectShape(), | |
| style: {fill: 'green'}, | |
| textContent: { | |
| silent: true, style: {text: 'if hover,\nbottom\nlarge bordered red'}, | |
| emphasis: {style: {fontSize: 20}} | |
| }, | |
| textConfig: { | |
| position: 'inside', outsideFill: 'green', outsideStroke: 'red' | |
| }, | |
| emphasis: { | |
| textConfig: {position: 'bottom'} | |
| } | |
| }; | |
| }, | |
| function (x, y) { | |
| return { | |
| type: 'rect', x: x, y: y, shape: createRectShape(), | |
| style: {fill: 'green'}, | |
| textContent: { | |
| silent: true, | |
| style: { | |
| text: 'rich text\nif hover,\nbottom black\n{r|normal orange\nhover red}', | |
| rich: {r: {fontSize: 16, fill: 'orange'}}, | |
| }, | |
| emphasis: { | |
| style: { | |
| rich: {r: {fill: 'red'}} | |
| } | |
| } | |
| }, | |
| textConfig: {position: 'inside'}, | |
| emphasis: { | |
| textConfig: {position: 'bottom'} | |
| } | |
| }; | |
| } | |
| ]); | |
| makeGraphic(['green rect'].join('\n'), [ | |
| function (x, y) { | |
| return { | |
| type: 'rect', x: x, y: y, shape: createRectShape(), | |
| style: {fill: 'green'}, | |
| textContent: {silent: true, style: { | |
| text: 'normal:\ninside yellow/bordered\nhover:\ntop black' | |
| }}, | |
| textConfig: {position: 'inside', insideFill: 'yellow'}, | |
| emphasis: { | |
| textConfig: {position: 'top'} | |
| } | |
| }; | |
| }, | |
| function (x, y) { | |
| return { | |
| type: 'rect', x: x, y: y, shape: createRectShape(), | |
| style: {fill: 'green'}, | |
| textContent: { | |
| silent: true, | |
| style: {text: 'normal:\ninside white/bordered\nhover:\nright green'} | |
| }, | |
| textConfig: { | |
| position: 'inside', outsideFill: 'green' | |
| }, | |
| emphasis: { | |
| textConfig: {position: 'right'} | |
| } | |
| }; | |
| } | |
| ]); | |
| return { | |
| type: 'group', | |
| children: maker.children | |
| }; | |
| } | |
| var chart = testHelper.create(echarts, 'insideFill_Stroke_hover_test', { | |
| title: [ | |
| 'insideFill/Stroke & hover test. Please **hover any of them**' | |
| ], | |
| option: createOption(renderItem), | |
| height: 600 | |
| }); | |
| }); | |
| </script> | |
| <script> | |
| require(['echarts'], function (echarts) { | |
| function renderItem(params, api) { | |
| return { | |
| type: 'group', | |
| children: [{ | |
| type: 'circle', | |
| shape: {cx: 100, cy: 100, r: 50}, | |
| style: {fill: 'red'}, | |
| z2: 100, | |
| // textContent do not set z2, but auto follow the circle z2. | |
| textContent: { | |
| type: 'text', | |
| style: { | |
| text: 'normal: {red|red} is over {green|green}.\nHover me', | |
| // stroke: '#fff', lineWidth: 2, | |
| rich: { | |
| red: {fill: 'red', stroke: '#fff', lineWidth: 2, fontSize: 20}, | |
| green: {fill: 'green', stroke: '#fff', lineWidth: 2, fontSize: 20} | |
| }, | |
| }, | |
| silent: true, | |
| emphasis: { | |
| style: { | |
| text: 'emphasis: {green|green} over {red|red}\nText {below|below} green', | |
| rich: { | |
| below: {fontSize: 40} | |
| } | |
| } | |
| } | |
| }, | |
| textConfig: { | |
| position: 'inside' | |
| } | |
| }, { | |
| type: 'circle', | |
| shape: {cx: 100, cy: 140, r: 40}, | |
| style: {fill: 'green'}, | |
| // textContent do not set z2, but auto follow the circle z2. | |
| textContent: { | |
| type: 'text', | |
| style: { | |
| text: 'text should be always\n{over|over} all circles.', | |
| rich: {over: {fontSize: 30}} | |
| }, | |
| silent: true | |
| }, | |
| textConfig: { | |
| position: 'inside' | |
| }, | |
| z2: 80, | |
| emphasis: { | |
| z2: 110 | |
| } | |
| }, { | |
| type: 'circle', | |
| shape: {cx: 300, cy: 100, r: 50}, | |
| style: {fill: 'red'}, | |
| z2: 100, | |
| // textContent do not set z2, but auto follow the circle z2. | |
| textContent: { | |
| type: 'text', | |
| style: { | |
| text: 'normal: {red|red} is over {green|green}.\nHover me', | |
| // stroke: '#fff', lineWidth: 2, | |
| rich: { | |
| red: {fill: 'red', stroke: '#fff', lineWidth: 2, fontSize: 20}, | |
| green: {fill: 'green', stroke: '#fff', lineWidth: 2, fontSize: 20} | |
| }, | |
| }, | |
| silent: true, | |
| emphasis: { | |
| style: { | |
| text: 'emphasis: {red|red} over {green|green}\nText {below|over} green', | |
| rich: { | |
| below: {fontSize: 40} | |
| } | |
| } | |
| } | |
| }, | |
| textConfig: { | |
| position: 'inside' | |
| } | |
| }, { | |
| type: 'circle', | |
| shape: {cx: 300, cy: 140, r: 40}, | |
| style: {fill: 'green'}, | |
| // textContent do not set z2, but auto follow the circle z2. | |
| textContent: { | |
| type: 'text', | |
| style: { | |
| text: 'text should be always\n{over|over} all circles.', | |
| rich: {over: {fontSize: 30}} | |
| }, | |
| silent: true, | |
| emphasis: { | |
| z2: 110 | |
| } | |
| }, | |
| textConfig: { | |
| position: 'inside' | |
| }, | |
| z2: 80 | |
| }] | |
| }; | |
| } | |
| var chart = testHelper.create(echarts, 'z_order_test', { | |
| title: [ | |
| 'z order test. Please **hover any of them**.' | |
| ], | |
| option: createOption(renderItem) | |
| }); | |
| }); | |
| </script> | |
| <script> | |
| require(['echarts'], function (echarts) { | |
| var option = { | |
| xAxis: {scale: true, min: 0.75, max: 3}, | |
| yAxis: {}, | |
| series: [{ | |
| type: 'custom', | |
| renderItem: function (params, api) { | |
| var shape0 = {x: 0, y: 30, width: 100, height: 50}; | |
| var shape1 = {x: 30, y: 50, width: 100, height: 50}; | |
| var shape2 = {x: 60, y: 70, width: 100, height: 50}; | |
| var position = api.coord([api.value(0), api.value(1)]); | |
| var name = api.value(2); | |
| var map = { | |
| legacy: { | |
| type: 'group', | |
| x: position[0], | |
| y: position[1], | |
| children: [{ | |
| type: 'rect', | |
| shape: shape0, | |
| style: {fill: '#333'} | |
| }, { | |
| type: 'rect', | |
| shape: shape1, | |
| style: { | |
| fill: '#555', | |
| text: 'has inner text', | |
| textFill: 'white', | |
| textPostion: 'insideTop' | |
| }, | |
| styleEmphasis: {textFill: 'yellow'} | |
| }, { | |
| type: 'rect', | |
| shape: shape2, | |
| style: {fill: '#500'}, | |
| styleEmphasis: false | |
| }] | |
| }, | |
| ec5: { | |
| type: 'group', | |
| x: position[0], | |
| y: position[1], | |
| children: [{ | |
| type: 'rect', | |
| shape: shape0, | |
| style: {fill: '#333'}, | |
| }, { | |
| type: 'rect', | |
| shape: shape1, | |
| style: {fill: '#555', text: 'has inner text'}, | |
| textContent: { | |
| style: {fill: 'white'}, | |
| emphasis: {style: {fill: 'yellow'}} | |
| }, | |
| textConfig: {position: 'insideTop'} | |
| }, { | |
| type: 'rect', | |
| shape: shape2, | |
| style: {fill: '#500'}, | |
| emphasis: { | |
| // set false to disable lift color and z2. | |
| style: false | |
| } | |
| }] | |
| } | |
| }; | |
| return map[name]; | |
| }, | |
| data: [[1, 1, 'legacy'], [2, 1, 'ec5']] | |
| }] | |
| }; | |
| var chart = testHelper.create(echarts, 'hover_style_disable', { | |
| title: [ | |
| 'Hover style disable: hover each group of elements,', | |
| 'all of the elements should lift color and z2 **except the red rect**' | |
| ], | |
| height: 300, | |
| option: option | |
| }); | |
| }); | |
| </script> | |
| <script> | |
| require(['echarts'], function (echarts) { | |
| var option = { | |
| xAxis: {scale: true, min: 0.75, max: 3}, | |
| yAxis: {}, | |
| series: [{ | |
| type: 'custom', | |
| renderItem: function (params, api) { | |
| var shape0 = {x: 00, y: 30, width: 100, height: 50}; | |
| var shape1 = {x: 30, y: 50, width: 100, height: 50}; | |
| var shape2 = {x: 60, y: 70, width: 100, height: 50}; | |
| var position = api.coord([api.value(0), api.value(1)]); | |
| var name = api.value(2); | |
| var useHover = !!api.value(3); | |
| var map = { | |
| legacy: { | |
| type: 'group', | |
| x: position[0], | |
| y: position[1], | |
| children: [{ | |
| type: 'rect', | |
| shape: shape0, | |
| style: api.style({fill: '#222', text: 'legacy'}), | |
| styleEmphasis: useHover ? {fill: 'red', textFill: 'yellow'} : false | |
| }] | |
| }, | |
| ec5: { | |
| type: 'group', | |
| x: position[0], | |
| y: position[1], | |
| children: [{ | |
| type: 'rect', | |
| shape: shape0, | |
| style: {fill: '#222'}, | |
| textContent: { | |
| style: {text: 'ec5_api'}, | |
| emphasis: {style: useHover ? {fill: 'yellow'} : false} | |
| }, | |
| textConfig: {position: 'inside'}, | |
| emphasis: {style: useHover ? {fill: 'red'} : false} | |
| }] | |
| } | |
| }; | |
| return map[name]; | |
| }, | |
| data: [[1, 1, 'legacy', 1], [2, 1, 'ec5', 1]] | |
| }] | |
| }; | |
| var chart = testHelper.create(echarts, 'hover_style_remove', { | |
| title: [ | |
| 'Hover style remove test: ', | |
| '(1) Hover each: become **red rect, yellow text**', | |
| '(2) Click "disable hover style", elements should more to right a bit.', | |
| '(3) Hover each again: should no hover style', | |
| '(4) Click "enable hover style", elements should more to left a bit.', | |
| '(5) Check whether resume to (1)', | |
| ], | |
| height: 300, | |
| option: option, | |
| buttons: [{ | |
| text: 'disable hover style', | |
| onclick: function () { | |
| chart.setOption({ | |
| xAxis: {scale: true, min: 0.75, max: 7}, | |
| series: { | |
| type: 'custom', | |
| data: [[3, 1, 'legacy', 0], [6, 1, 'ec5', 0]] | |
| } | |
| }) | |
| } | |
| }, { | |
| text: 'enable hover style', | |
| onclick: function () { | |
| chart.setOption({ | |
| xAxis: {scale: true, min: 0.75, max: 3}, | |
| series: { | |
| type: 'custom', | |
| data: [[1, 1, 'legacy', 1], [2, 1, 'ec5', 1]] | |
| } | |
| }) | |
| } | |
| }] | |
| }); | |
| }); | |
| </script> | |
| </body> | |
| </html> | |