| <!-- |
| 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" /> |
| <script src="lib/simpleRequire.js"></script> |
| <script src="lib/config.js"></script> |
| <meta name="viewport" content="width=device-width, initial-scale=1" /> |
| </head> |
| <body> |
| <style> |
| h1 { |
| line-height: 60px; |
| height: 60px; |
| background: #146402; |
| text-align: center; |
| font-weight: bold; |
| color: #eee; |
| font-size: 14px; |
| } |
| .chart { |
| height: 600px; |
| } |
| </style> |
| |
| <div id="chart-with-single-negative" class="chart"></div> |
| <div id="chart-with-full-negative" class="chart"></div> |
| <div id="chart-with-empty-circle-config" class="chart"></div> |
| <script> |
| require(["echarts"], function (echarts) { |
| var chartWithSingleNegative = echarts.init( |
| document.getElementById("chart-with-single-negative") |
| ); |
| chartWithSingleNegative.setOption({ |
| aria: { |
| enabled: true, |
| }, |
| title: { |
| text: `The minus value slice should be filtered`, |
| x: "center", |
| }, |
| tooltip: { |
| trigger: "item", |
| formatter: "{a} <br/>{b} : {c} ({d}%)", |
| }, |
| legend: { |
| orient: "vertical", |
| left: "left", |
| data: [ |
| "直接访问", |
| "邮件营销", |
| "联盟广告", |
| "视频广告(value is 0)", |
| "搜索引擎(value is minus)", |
| ], |
| }, |
| series: [ |
| { |
| name: "访问来源", |
| type: "pie", |
| radius: "55%", |
| center: ["50%", "60%"], |
| selectedMode: "single", |
| data: [ |
| { value: 335, name: "直接访问" }, |
| { value: 310, name: "邮件营销" }, |
| { value: 234, name: "联盟广告" }, |
| { value: 0, name: "视频广告(value is 0)" }, |
| { |
| value: -1548, |
| name: "搜索引擎(value is minus)", |
| }, |
| ], |
| emphasis: { |
| itemStyle: { |
| shadowBlur: 10, |
| shadowOffsetX: 0, |
| shadowColor: "rgba(0, 0, 0, 0.5)", |
| }, |
| }, |
| }, |
| ], |
| }); |
| |
| var chartWithFullNegative = echarts.init( |
| document.getElementById("chart-with-full-negative") |
| ); |
| chartWithFullNegative.setOption({ |
| aria: { |
| enabled: true, |
| }, |
| title: { |
| text: `The pie chart should be empty when all values are negative`, |
| x: "center", |
| }, |
| tooltip: { |
| trigger: "item", |
| formatter: "{a} <br/>{b} : {c} ({d}%)", |
| }, |
| legend: { |
| orient: "vertical", |
| left: "left", |
| data: ["直接访问", "邮件营销", "联盟广告"], |
| }, |
| series: [ |
| { |
| name: "访问来源", |
| type: "pie", |
| radius: "55%", |
| center: ["50%", "60%"], |
| selectedMode: "single", |
| data: [ |
| { value: -335, name: "直接访问" }, |
| { value: -310, name: "邮件营销" }, |
| { value: -234, name: "联盟广告" }, |
| ], |
| emphasis: { |
| itemStyle: { |
| shadowBlur: 10, |
| shadowOffsetX: 0, |
| shadowColor: "rgba(0, 0, 0, 0.5)", |
| }, |
| }, |
| }, |
| ], |
| }); |
| |
| var chartWithEmptyCircleConfig = echarts.init( |
| document.getElementById("chart-with-empty-circle-config") |
| ); |
| chartWithEmptyCircleConfig.setOption({ |
| aria: { |
| enabled: true, |
| }, |
| title: { |
| text: `The empty circle can be configured, see: showEmptyCircle、emptyCircleStyle`, |
| x: "center", |
| }, |
| tooltip: { |
| trigger: "item", |
| formatter: "{a} <br/>{b} : {c} ({d}%)", |
| }, |
| legend: { |
| orient: "vertical", |
| left: "left", |
| data: ["直接访问", "邮件营销", "联盟广告"], |
| }, |
| series: [ |
| { |
| name: "访问来源", |
| type: "pie", |
| radius: "55%", |
| center: ["50%", "60%"], |
| selectedMode: "single", |
| data: [ |
| { value: -335, name: "直接访问" }, |
| { value: -310, name: "邮件营销" }, |
| { value: -234, name: "联盟广告" }, |
| ], |
| emphasis: { |
| itemStyle: { |
| shadowBlur: 10, |
| shadowOffsetX: 0, |
| shadowColor: "rgba(0, 0, 0, 0.5)", |
| }, |
| }, |
| showEmptyCircle: true, |
| emptyCircleStyle: { |
| color: 'red', |
| opacity: 0.3 |
| } |
| }, |
| ], |
| }); |
| |
| window.onresize = () => { |
| chartWithSingleNegative.resize(); |
| chartWithFullNegative.resize(); |
| chartWithEmptyCircleConfig.resize(); |
| }; |
| }); |
| </script> |
| </body> |
| </html> |
