| <!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> |
| <!-- <script src="ut/lib/canteen.js"></script> --> |
| <link rel="stylesheet" href="lib/reset.css" /> |
| </head> |
| <body> |
| <style> |
| table { |
| padding: 20px; |
| } |
| tr { |
| padding: 5px; |
| } |
| </style> |
| |
| |
| |
| <div id="main0"></div> |
| <div id="main1"></div> |
| <div id="main2"></div> |
| |
| <table> |
| <tr> |
| <td> |
| <button onclick="randAll()">Random All</button> |
| </td> |
| </tr> |
| <tr> |
| <td> |
| symbolSize |
| </td> |
| <td> |
| <input type="range" min="0" max="1" value="1" step="0.01" id="symbolSize-range"> |
| <label id="symbolSize-label">1</label> |
| </td> |
| <td> |
| <button onclick="rand('symbolSize', 0, 1)">Random</button> |
| </td> |
| </tr> |
| <tr> |
| <td> |
| dashArrayX |
| </td> |
| <td> |
| <input type="range" min="0" max="50" value="10" id="dashArrayX-0-range"> |
| <input type="range" min="0" max="50" value="10" id="dashArrayX-1-range"> |
| <label id="dashArrayX-label">[10, 10]</label> |
| </td> |
| <td> |
| <button onclick="rand('dashArrayX-0', 0, 100)">Random</button> |
| </td> |
| </tr> |
| <tr> |
| <td> |
| dashArrayY |
| </td> |
| <td> |
| <input type="range" min="0" max="50" value="10" id="dashArrayY-0-range"> |
| <input type="range" min="0" max="50" value="10" id="dashArrayY-1-range"> |
| <label id="dashArrayY-label">[10, 10]</label> |
| </td> |
| <td> |
| <button onclick="rand('dashArrayY-0', 0, 100)">Random</button> |
| </td> |
| </tr> |
| <tr> |
| <td> |
| rotation |
| </td> |
| <td> |
| <input type="range" min="0" max="3.14" value="0" step="0.01" id="rotation-range"> |
| <label id="rotation-label">0</label> |
| </td> |
| <td> |
| <button onclick="rand('rotation', 0, 3.14)">Random</button> |
| </td> |
| </tr> |
| </table> |
| |
| |
| <div id="main-sankey"></div> |
| <div id="main-sunburst"></div> |
| <div id="main-treemap"></div> |
| <div id="main-custom-series"></div> |
| |
| <div id="main-fruit"></div> |
| <div id="main-newspaper"></div> |
| |
| |
| |
| <script> |
| require(['echarts'/*, 'map/js/china' */], function (echarts) { |
| var option; |
| var series = []; |
| var pieData = []; |
| var legendNames = []; |
| var itemStyle = { |
| decal: { |
| color: 'blue' |
| } |
| }; |
| for (var i = 0; i < 12; ++i) { |
| var s = { |
| name: 'bar' + i, |
| data: [i * 10 + 100], |
| type: 'bar' |
| }; |
| if (i === 0) { |
| s.itemStyle = itemStyle; |
| } |
| else if (i === 1) { |
| s.itemStyle = { |
| decal: { |
| symbol: 'none' |
| } |
| }; |
| } |
| else if (i === 2) { |
| s.data = [{ |
| value: s.data[0], |
| itemStyle: { |
| decal: { |
| symbol: 'none' |
| } |
| } |
| }]; |
| } |
| series.push(s); |
| |
| var p = { |
| name: 'pie' + i, |
| value: i * 5 + 10 |
| }; |
| pieData.push(p); |
| |
| legendNames.push('bar' + i, 'pie' + i); |
| } |
| series.push({ |
| type: 'pie', |
| center: ['75%', '50%'], |
| data: pieData, |
| radius: '50%' |
| }); |
| |
| option = { |
| legend: { |
| data: legendNames |
| }, |
| xAxis: { |
| type: 'category', |
| data: ['x'] |
| }, |
| yAxis: { |
| type: 'value' |
| }, |
| series: series, |
| grid: { |
| left: 50, |
| right: '40%' |
| }, |
| aria: { |
| decal: { |
| show: true |
| } |
| } |
| }; |
| |
| var chart = testHelper.create(echarts, 'main0', { |
| title: [ |
| 'It should use decal when aria.show is true', |
| '(1) Each bar and pie piece should have different decal', |
| '(2) The first bar and pie piece decal should be **blue**', |
| '(3) The second and third bar should not have decal' |
| ], |
| option: option |
| // height: 300, |
| // buttons: [{text: 'btn-txt', onclick: function () {}}], |
| // recordCanvas: true, |
| }); |
| }); |
| </script> |
| |
| |
| |
| <script> |
| require(['echarts'/*, 'map/js/china' */], function (echarts) { |
| var option; |
| var series = []; |
| var pieData = []; |
| var itemStyle = { |
| decal: { |
| color: 'blue', |
| symbol: [['rect', 'circle', 'triangle'], ['circle', 'none']] |
| } |
| }; |
| for (var i = 0; i < 6; ++i) { |
| var s = { |
| name: 'bar' + i, |
| data: [i * 10 + 100], |
| type: 'bar' |
| }; |
| if (i === 0) { |
| s.itemStyle = itemStyle; |
| s.emphasis = { |
| itemStyle: { |
| decal: { |
| color: 'red' |
| } |
| } |
| } |
| } |
| series.push(s); |
| |
| var p = { |
| name: 'pie' + i, |
| value: i * 5 + 10 |
| }; |
| if (i === 0) { |
| p.itemStyle = itemStyle; |
| p.emphasis = { |
| itemStyle: { |
| decal: { |
| color: 'red' |
| } |
| } |
| } |
| } |
| pieData.push(p); |
| } |
| series.push({ |
| type: 'pie', |
| center: ['75%', '50%'], |
| data: pieData, |
| radius: '50%' |
| }); |
| |
| option = { |
| xAxis: { |
| type: 'category', |
| data: ['x'] |
| }, |
| yAxis: { |
| type: 'value' |
| }, |
| series: series, |
| grid: { |
| left: 50, |
| right: '40%' |
| }, |
| aria: { |
| // no decal |
| } |
| }; |
| |
| var chart = testHelper.create(echarts, 'main1', { |
| title: [ |
| 'If aria is not enabled, decal can also be enabled', |
| '(1) Only the first bar and pie piece should use decal (be **blue**)', |
| '(2) `aria.label` should be in the HTML' |
| ], |
| option: option |
| }); |
| }); |
| </script> |
| |
| |
| |
| |
| |
| <script> |
| var option; |
| var decal = { |
| symbolSize: 1, |
| dashArrayX: [10, 10], |
| dashArrayY: [10, 10], |
| rotation: 0, |
| maxTileWidth: 256, |
| maxTileHeight: 256 |
| }; |
| |
| option = { |
| xAxis: { |
| type: 'category', |
| data: ['a', 'b'], |
| show: false |
| }, |
| yAxis: { |
| type: 'value', |
| show: false |
| }, |
| series: [{ |
| type: 'bar', |
| data: [70, 40], |
| itemStyle: { |
| decal: decal, |
| borderWidth: 20, |
| borderColor: '#ff0' |
| } |
| }, { |
| type: 'line', |
| data: [100, 80], |
| itemStyle: { |
| decal: decal, |
| borderWidth: 20, |
| borderColor: '#ff0' |
| }, |
| lineStyle: { |
| width: 20 |
| }, |
| symbol: 'circle', |
| symbolSize: 200 |
| }], |
| grid: { |
| left: 50, |
| right: 20 |
| }, |
| aria: { |
| enabled: true |
| }, |
| animation: false |
| }; |
| var chart; |
| require(['echarts'/*, 'map/js/china' */], function (echarts) { |
| |
| chart = testHelper.create(echarts, 'main2', { |
| title: [ |
| 'Change parameters and check if it goes into endless loop' |
| ], |
| option: option |
| }); |
| |
| ['symbolSize', 'dashArrayX-0', 'dashArrayX-1', 'dashArrayY-0', 'dashArrayY-1', 'rotation'].forEach(function (name) { |
| var input = document.getElementById(name + '-range'); |
| var nameSplit = name.split('-'); |
| var attrName = nameSplit[0]; |
| var idName = nameSplit[1]; |
| var label = document.getElementById(attrName + '-label'); |
| input.addEventListener('change', function (event) { |
| var value = event.target.value; |
| var labelText = +value; |
| var rangeValue = +value; |
| if (idName) { |
| var otherId = idName === '0' ? '1' : '0'; |
| var otherValue = document.getElementById(attrName + '-' + otherId + '-range').value; |
| labelText = idName === '0' |
| ? '[' + value + ', ' + otherValue + ']' |
| : '[' + otherValue + ', ' + value + ']'; |
| rangeValue = idName === '0' |
| ? [+value, +otherValue] |
| : [+otherValue, +value]; |
| } |
| label.innerText = labelText; |
| |
| decal[attrName] = rangeValue; |
| chart.setOption(option); |
| }); |
| }); |
| }); |
| |
| function rand(name, min, max) { |
| var n = Math.random() * (max - min) + min; |
| var value = max < 10 ? Math.floor(n * 100) / 100 : Math.floor(n); |
| |
| var nameSplit = name.split('-'); |
| var attrName = nameSplit[0]; |
| var idName = nameSplit[1]; |
| var labelText = value; |
| var rangeValue = value; |
| var label = document.getElementById(attrName + '-label'); |
| if (idName) { |
| var otherN = Math.random() * (max - min) + min; |
| var otherValue = max < 10 ? Math.floor(otherN * 100) / 100 : Math.floor(otherN); |
| document.getElementById(attrName + '-1-range').value = otherValue; |
| |
| labelText = idName === '0' |
| ? '[' + value + ', ' + otherValue + ']' |
| : '[' + otherValue + ', ' + value + ']'; |
| rangeValue = idName === '0' |
| ? [+value, +otherValue] |
| : [+otherValue, +value]; |
| } |
| label.innerText = labelText; |
| |
| var input = document.getElementById(name + '-range'); |
| input.value = value; |
| |
| decal[attrName] = rangeValue; |
| chart.setOption(option); |
| } |
| |
| function randAll() { |
| rand('symbolSize', 0, 1); |
| rand('dashArrayX-0', 0, 50); |
| rand('dashArrayY-0', 0, 50); |
| rand('rotation', 0, 3.14); |
| } |
| </script> |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| <script> |
| require(['echarts'/*, 'map/js/china' */], function (echarts) { |
| |
| |
| var testData = { |
| nodes: [ |
| { |
| name: 'a', |
| itemStyle: { |
| decal: { |
| color: 'yellow' |
| } |
| } |
| }, |
| { |
| name: 'b', |
| depth: 2 |
| }, |
| { |
| name: 'a1', |
| depth: 4 |
| }, |
| { |
| name: 'b1' |
| }, |
| { |
| name: 'c', |
| depth: 3 |
| }, |
| { |
| name: 'e', |
| depth: 1 |
| } |
| ], |
| links: [ |
| { |
| source: 'a', |
| target: 'a1', |
| value: 5 |
| }, |
| { |
| source: 'e', |
| target: 'b', |
| value: 3 |
| }, |
| { |
| source: 'a', |
| target: 'b1', |
| value: 0 |
| }, |
| { |
| source: 'b1', |
| target: 'a1', |
| value: 1 |
| }, |
| { |
| source: 'b1', |
| target: 'c', |
| value: 3 |
| }, |
| { |
| source: 'b', |
| target: 'c', |
| value: 3 |
| } |
| ] |
| }; |
| |
| var option = { |
| aria: { |
| decal: { show: true } |
| }, |
| tooltip: { |
| trigger: 'item', |
| triggerOn: 'mousemove' |
| }, |
| animation: false, |
| series: [ |
| { |
| type: 'sankey', |
| bottom: '10%', |
| focusNodeAdjacency: true, |
| itemStyle: { |
| decal: { |
| color: 'blue' |
| } |
| }, |
| data: testData.nodes, |
| links: testData.links |
| } |
| ] |
| }; |
| |
| var chart = testHelper.create(echarts, 'main-sankey', { |
| title: [ |
| 'All sankey nodes should have decal (they are from palette)', |
| 'decal color of all except "a" is **blue** (they are from series.itemStyle)', |
| 'decal color of "a" is **yellow** (it is from dataItem.itemStyle)' |
| ], |
| option: option |
| }); |
| }); |
| </script> |
| |
| |
| |
| <script> |
| require(['echarts'/*, 'map/js/china' */], function (echarts) { |
| var data = [{ |
| children: [{ |
| value: 5, |
| children: [{ |
| value: 1 |
| }, { |
| value: 2, |
| children: [{ |
| value: 1 |
| }] |
| }, { |
| children: [{ |
| value: 1 |
| }] |
| }] |
| }, { |
| value: 10, |
| children: [{ |
| value: 6, |
| children: [{ |
| value: 1 |
| }, { |
| value: 1 |
| }, { |
| value: 1 |
| }, { |
| value: 1 |
| }] |
| }, { |
| value: 2, |
| children: [{ |
| value: 1 |
| }] |
| }, { |
| children: [{ |
| value: 1 |
| }] |
| }] |
| }] |
| }, { |
| value: 9, |
| children: [{ |
| value: 4, |
| children: [{ |
| value: 2 |
| }, { |
| children: [{ |
| value: 1 |
| }] |
| }] |
| }, { |
| children: [{ |
| value: 3, |
| children: [{ |
| value: 1 |
| }, { |
| value: 1 |
| }] |
| }] |
| }] |
| }, { |
| value: 7, |
| children: [{ |
| children: [{ |
| value: 1 |
| }, { |
| value: 3, |
| children: [{ |
| value: 1 |
| }, { |
| value: 1 |
| }] |
| }, { |
| value: 2, |
| children: [{ |
| value: 1 |
| }, { |
| value: 1 |
| }] |
| }] |
| }] |
| }, { |
| children: [{ |
| value: 6, |
| children: [{ |
| value: 1 |
| }, { |
| value: 2, |
| children: [{ |
| value: 2 |
| }] |
| }, { |
| value: 1 |
| }] |
| }, { |
| value: 3, |
| children: [{ |
| value: 1, |
| }, { |
| children: [{ |
| value: 1 |
| }] |
| }, { |
| value: 1 |
| }] |
| }] |
| }]; |
| |
| var option = { |
| aria: { |
| decal: { show: true } |
| }, |
| series: { |
| type: 'sunburst', |
| data: data |
| } |
| }; |
| |
| var chart = testHelper.create(echarts, 'main-sunburst', { |
| title: [ |
| 'All sunburst nodes should have decal (by 1st level) (they are from palette)' |
| ], |
| option: option |
| }); |
| }); |
| </script> |
| |
| |
| |
| <script> |
| require(['echarts'/*, 'map/js/china' */], function (echarts) { |
| var option = { |
| aria: { |
| decal: { show: true } |
| }, |
| series: [{ |
| name: 'tm', |
| type: 'treemap', |
| roam: false, |
| label: { |
| position: 'insideRight', |
| emphasis: { |
| show: true |
| } |
| }, |
| leafDepth: 1, |
| levels: [{ |
| itemStyle: { |
| borderColor: '#333', |
| borderWidth: 4, |
| gapWidth: 2 |
| } |
| }, { |
| itemStyle: { |
| borderColor: '#aaa', |
| gapWidth: 2, |
| borderWidth: 2 |
| }, |
| colorSaturation: [0.2, 0.7] |
| }], |
| data: [{ |
| name: 'a', |
| value: 10, |
| children: [{ |
| name: 'a1', |
| value: 11, |
| children: [{ |
| name: 'a11', |
| value: 111, |
| }, { |
| name: 'a111', |
| value: 1111 |
| }, { |
| name: 'a112', |
| value: 1111 |
| }, { |
| name: 'a113', |
| value: 111 |
| }, { |
| name: 'a114', |
| value: 111 |
| }, { |
| name: 'a115', |
| value: 1100 |
| }] |
| }] |
| }, { |
| name: 'b', |
| value: 6, |
| children: [{ |
| name: 'b1', |
| value: 15, |
| children: [{ |
| name: 'b11', |
| value: 120 |
| }] |
| }] |
| }] |
| }] |
| }; |
| |
| var chart = testHelper.create(echarts, 'main-treemap', { |
| title: [ |
| 'All treemap nodes should have decal (by 1st level) (they are from palette)' |
| ], |
| option: option |
| }); |
| }); |
| </script> |
| |
| |
| |
| |
| <script> |
| require(['echarts'/*, 'map/js/china' */], function (echarts) { |
| |
| function renderItem(params, api) { |
| var pos = api.coord([api.value(0), api.value(1)]); |
| var paletteColor = api.visual('color'); |
| var paletteDecal = api.visual('decal'); |
| if (params.dataIndex === 0) { |
| return { |
| type: 'group', |
| x: pos[0], |
| y: pos[1], |
| children: [{ |
| type: 'circle', |
| shape: { cx: 0, cy: 0, r: 30 }, |
| style: { |
| fill: 'orange', |
| decal: { |
| color: 'blue', |
| dashArrayX: [1, 0], |
| dashArrayY: [4, 3], |
| dashLineOffset: 0, |
| rotation: -Math.PI / 4 |
| } |
| } |
| }, { |
| type: 'circle', |
| shape: { cx: 60, cy: 0, r: 30 }, |
| style: { fill: 'orange' } |
| }] |
| } |
| } |
| else { |
| return { |
| type: 'group', |
| x: pos[0], |
| y: pos[1], |
| children: [{ |
| type: 'rect', |
| shape: { x: -20, y: -20, width: 40, height: 40 }, |
| style: { fill: paletteColor, decal: paletteDecal }, |
| }, { |
| type: 'rect', |
| shape: { x: 60 - 20, y: -20, width: 40, height: 40 }, |
| style: { fill: paletteColor, decal: paletteDecal }, |
| }] |
| } |
| } |
| } |
| |
| var option = { |
| xAxis: { |
| }, |
| yAxis: { |
| }, |
| series: [{ |
| type: 'custom', |
| renderItem: renderItem, |
| data: [ [11, 22], [55, 22] ] |
| }, { |
| type: 'custom', |
| renderItem: renderItem, |
| data: [ [11, 55], [55, 55] ] |
| }, { |
| type: 'custom', |
| renderItem: renderItem, |
| data: [ [11, 88], [55, 88] ] |
| }], |
| aria: { |
| decal: { |
| show: true |
| } |
| } |
| }; |
| |
| var chart = testHelper.create(echarts, 'main-custom-series', { |
| title: [ |
| 'All circle/rect should show decals.', |
| 'Circel should be in specified decal (in **blue**) and specified color (in **orange**).', |
| 'Rect should be in palette decal and palette color' |
| ], |
| option: option |
| // height: 300, |
| // buttons: [{text: 'btn-txt', onclick: function () {}}], |
| // recordCanvas: true, |
| }); |
| }); |
| </script> |
| |
| |
| |
| |
| <script> |
| require(['echarts'/*, 'map/js/china' */], function (echarts) { |
| |
| var d = 30; |
| var path = [ |
| 'M12.815,443.027 C28.577,427.267 54.221,427.267 69.981,443.027 C85.736,458.781 85.735,484.423 69.983,500.182 C54.221,515.938 28.574,515.938 12.817,500.187 C-2.939,484.424 -2.94,458.782 12.815,443.027 Z M98.66,335.96 C114.421,351.721 114.421,377.366 98.659,393.127 C82.905,408.881 57.263,408.88 41.505,393.129 C25.75,377.366 25.75,351.719 41.501,335.962 C57.264,320.206 82.905,320.205 98.66,335.96 Z M119.871,414.332 C135.633,398.575 161.275,398.575 177.029,414.33 C192.79,430.091 192.789,455.736 177.029,471.497 C161.275,487.251 135.633,487.25 119.875,471.499 C104.12,455.736 104.12,430.089 119.871,414.332 Z M226.928,385.633 C242.69,369.877 268.332,369.876 284.087,385.631 C299.848,401.392 299.847,427.037 284.087,442.798 C268.333,458.552 242.691,458.551 226.933,442.8 C211.177,427.037 211.177,401.39 226.928,385.633 Z M205.718,307.272 C221.479,323.032 221.479,348.677 205.718,364.439 C189.964,380.193 164.322,380.192 148.564,364.441 C132.808,348.678 132.808,323.031 148.559,307.274 C164.322,291.518 189.963,291.517 205.718,307.272 Z M127.35,286.061 C111.596,301.815 85.954,301.814 70.196,286.063 C54.44,270.3 54.44,244.653 70.191,228.896 C85.954,213.14 111.595,213.139 127.35,228.894 C143.111,244.655 143.11,270.3 127.35,286.061 Z M156.038,179.002 C140.284,194.757 114.642,194.756 98.884,179.004 C83.128,163.241 83.128,137.594 98.879,121.837 C114.642,106.081 140.283,106.08 156.038,121.835 C171.799,137.596 171.798,163.241 156.038,179.002 Z M312.776,278.583 C328.537,294.344 328.537,319.989 312.776,335.75 C297.022,351.504 271.38,351.503 255.622,335.752 C239.866,319.989 239.866,294.342 255.617,278.585 C271.38,262.829 297.021,262.828 312.776,278.583 Z M333.998,356.957 C349.76,341.201 375.402,341.2 391.158,356.955 C406.919,372.716 406.918,398.361 391.158,414.122 C375.403,429.876 349.761,429.875 334.003,414.124 C318.247,398.361 318.247,372.714 333.998,356.957 Z M498,96.401 C506.284,96.401 513,103.118 513,111.402 C513,119.686 506.284,126.402 498,126.402 L407.813,126.402 L372.14,162.075 C369.464,157.907 366.319,153.955 362.677,150.313 C359.069,146.705 355.127,143.554 350.936,140.853 L366.275,125.513 C332.601,120.212 306.265,91.06 306.265,55.167 L306.265,15 C306.265,6.716 312.981,0 321.265,0 L345.365,0 C384.769,0 416.599,31.882 416.599,71.233 L416.599,96.401 L498,96.401 Z M284.31,228.694 C268.554,212.932 268.554,187.284 284.305,171.527 C300.068,155.771 325.709,155.77 341.464,171.525 C357.225,187.286 357.224,212.931 341.464,228.692 C325.71,244.446 300.068,244.445 284.31,228.694 Z M263.092,150.319 C247.337,166.074 221.696,166.073 205.937,150.321 C190.182,134.558 190.182,108.911 205.933,93.154 C221.696,77.398 247.337,77.397 263.092,93.152 C278.853,108.913 278.852,134.558 263.092,150.319 Z M177.25,257.381 C161.489,241.62 161.489,215.975 177.248,200.216 C193.011,184.46 218.652,184.46 234.407,200.214 C250.168,215.975 250.168,241.62 234.407,257.381 C218.652,273.135 193.011,273.135 177.25,257.381 Z M362.678,249.905 C378.438,234.144 404.083,234.145 419.844,249.905 C435.602,265.663 435.602,291.304 419.844,307.062 C404.083,322.823 378.439,322.823 362.678,307.063 C346.92,291.304 346.92,265.663 362.678,249.905 Z', |
| 'M251.78,126.4 C248.1,100.164 235.969,75.729 217.101,56.862 L210.997,50.758 C230.887,20.228 265.323,-1.42108547e-14 304.4,-1.42108547e-14 L384.733,-1.42108547e-14 C393.017,-1.42108547e-14 399.733,6.716 399.733,15 C399.733,76.426 349.76,126.4 288.333,126.4 L251.78,126.4 Z M174.675,99.289 L149.194,73.806 C143.336,67.948 143.336,58.451 149.194,52.593 C155.052,46.736 164.55,46.736 170.407,52.593 L195.888,78.075 C211.81,93.997 221.19,114.703 222.744,136.95 C217.759,138.31 212.836,139.885 208,141.671 C202.962,139.81 197.83,138.182 192.632,136.784 C191.123,122.622 184.886,109.499 174.675,99.289 Z M269.343,160.667 C350.1,160.667 415.8,226.367 415.8,307.124 C415.8,385.71 338.539,512 269.343,512 C252.999,512 235.815,505.259 218.269,491.966 C212.239,487.429 203.762,487.432 197.695,492 C180.178,505.263 162.995,512 146.657,512 C77.075,512 0.2,385.291 0.2,307.124 C0.2,226.367 65.9,160.667 146.657,160.667 C167.837,160.667 188.883,165.299 208,174.12 C227.117,165.299 248.163,160.667 269.343,160.667 Z', |
| 'M267.157,227.326 C210.111,269.798 144.193,291.333 71.233,291.334 C49.528,291.334 31.362,306.781 27.153,327.26 C11.883,313.249 -1.13686838e-13,292.601 -1.13686838e-13,264.05 L-1.13686838e-13,256 C-1.13686838e-13,247.716 6.716,241 15,241 L97.486,241 C169.209,241 245.378,223.348 315.718,183.492 C302.506,197.829 286.38,213.014 267.157,227.326 Z M143.533,371.667 C118.72,371.667 98.533,391.854 98.532,416.667 C98.532,417.525 98.548,418.379 98.565,419.232 C73.198,403.981 56.233,376.202 56.233,344.383 L56.233,336.333 C56.233,328.049 62.949,321.333 71.233,321.333 C214.679,321.333 306.098,244.189 354.102,184.97 C348.535,232.069 327.511,275.624 293.501,309.619 C253.47,349.631 200.21,371.667 143.533,371.667 Z M368.225,112.327 L338.983,53.846 C335.278,46.437 338.282,37.426 345.691,33.722 L409.958,1.588 C417.384,-2.125 426.388,0.907 430.083,8.296 C440.992,30.114 445.601,54.489 443.41,78.784 C442.741,86.198 441.441,93.504 439.551,100.635 C432.128,99.26 424.481,98.534 416.666,98.534 L400.6,98.534 C387.897,98.534 376.415,103.833 368.225,112.327 Z M416.667,128.533 C469.233,128.533 512,171.3 512,223.866 C512,383.027 383.225,512 223.866,512 C171.426,512 128.533,469.651 128.533,416.667 C128.533,408.383 135.249,401.667 143.533,401.667 C277.247,401.667 385.6,293.476 385.6,159.6 L385.6,143.533 C385.6,135.249 392.316,128.533 400.6,128.533 L416.667,128.533 Z' |
| ] |
| var option = { |
| series: [{ |
| type: 'pie', |
| data: [{ |
| value: 110, |
| name: 'Grapes' |
| }, { |
| value: 80, |
| name: 'Apples' |
| }, { |
| value: 40, |
| name: 'Bananas' |
| }], |
| label: { |
| fontSize: 16 |
| }, |
| labelLine: { |
| lineStyle: { |
| width: 2 |
| } |
| } |
| }], |
| |
| aria: { |
| decal: { |
| show: true, |
| decals: [{ |
| dashArrayX: [[d, d], [0, d, d, 0]], |
| dashArrayY: [d, 0], |
| symbol: 'path://' + path[0], |
| symbolKeepAspect: true, |
| symbolSize: 0.8 |
| }, { |
| dashArrayX: [[d, d], [0, d, d, 0]], |
| dashArrayY: [d, 0], |
| symbol: 'path://' + path[1], |
| symbolKeepAspect: true, |
| symbolSize: 0.8 |
| }, { |
| dashArrayX: [[d, d], [0, d, d, 0]], |
| dashArrayY: [d, 0], |
| symbol: 'path://' + path[2], |
| symbolKeepAspect: true, |
| symbolSize: 0.8 |
| }] |
| } |
| }, |
| |
| color: ['#7862A5', '#DD5353', '#FDD344'], |
| |
| }; |
| |
| var chart = testHelper.create(echarts, 'main-fruit', { |
| title: [ |
| 'Symbols should keep aspect ratio' |
| ], |
| option: option |
| // height: 300, |
| // buttons: [{text: 'btn-txt', onclick: function () {}}], |
| // recordCanvas: true, |
| }); |
| }); |
| </script> |
| |
| |
| <script> |
| require(['echarts'/*, 'map/js/china' */], function (echarts) { |
| var option = { |
| series: [{ |
| type: 'bar', |
| name: 'Apples', |
| data: [108, 26, 39, 24], |
| itemStyle: { |
| borderColor: 'black', |
| borderWidth: 2 |
| } |
| }, { |
| type: 'bar', |
| name: 'Oranges', |
| data: [23, 40, 60, 70], |
| itemStyle: { |
| borderColor: 'black', |
| borderWidth: 2 |
| } |
| }, { |
| type: 'bar', |
| name: 'Bananas', |
| data: [129, 40, 40, 50], |
| itemStyle: { |
| borderColor: 'black', |
| borderWidth: 2 |
| } |
| }, { |
| type: 'bar', |
| name: 'Pears', |
| data: [40, 60, 50, 89], |
| itemStyle: { |
| borderColor: 'black', |
| borderWidth: 2 |
| } |
| }], |
| |
| xAxis: { |
| data: ['Q1', 'Q2', 'Q3', 'Q4'], |
| axisLine: { |
| color: 'black' |
| }, |
| axisTick: { |
| color: 'black' |
| }, |
| axisLabel: { |
| color: 'black' |
| } |
| }, |
| yAxis: { |
| axisLine: { |
| color: 'black' |
| }, |
| axisTick: { |
| color: 'black' |
| }, |
| axisLabel: { |
| color: 'black' |
| }, |
| splitLine: { |
| lineStyle: { |
| color: 'black', |
| type: 'dashed' |
| } |
| } |
| }, |
| |
| aria: { |
| decal: { |
| show: true, |
| decals: [{ |
| dashArrayX: 0, |
| dashArrayY: 0, |
| color: 'black' |
| }, { |
| dashArrayX: 0, |
| dashArrayY: 0, |
| color: 'black' |
| }, { |
| dashArrayX: [1, 0], |
| dashArrayY: [2, 5], |
| symbolSize: 1, |
| rotation: Math.PI / 6, |
| color: 'black' |
| }, { |
| symbol: 'circle', |
| dashArrayX: [[8, 8], [0, 8, 8, 0]], |
| dashArrayY: [6, 0], |
| symbolSize: 0.8, |
| color: 'black' |
| }] |
| } |
| }, |
| |
| color: ['white', 'black', 'white', 'white'] |
| }; |
| |
| var chart = testHelper.create(echarts, 'main-newspaper', { |
| title: [ |
| 'Two-color decals' |
| ], |
| option: option |
| // height: 300, |
| // buttons: [{text: 'btn-txt', onclick: function () {}}], |
| // recordCanvas: true, |
| }); |
| }); |
| </script> |
| |
| |
| |
| </body> |
| </html> |
| |
