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