Echarts南丁格爾玫瑰圖和Highcharts可變寬度的環形餅圖
最近業務需要做一個環形餅圖，當時就想着採用Echarts的南丁格爾玫瑰圖方案，但是由於數據差距太大，實現效果不理想；然而網上也沒有合適的解決方案，幾經折騰，最後採用Highcharts的可變寬度的環形餅圖方案，特寫此博客爲大家提供更多的思路。
原文參考：https://blog.csdn.net/weixin_41967475/article/details/113536407
設計獅的效果圖
使用Echarts南丁格爾圖的半徑模式
採用Echarts方案我所實現的效果圖：
下面是實現源碼，爲方便閱讀，我未對“虛擬數據”進行提取
<div id="dataEchart"></div>
//引入ECharts
import Vue from 'vue'
import echarts from 'echarts'
Vue.prototype.$echarts = echarts
let myEchart = this.$echarts.init(document.getElementById("dataEchart"));
let option = {
tooltip: {
trigger: "item",
formatter: "{a} <br/>{b} : {c} ({d}%)",
},
series: [
{
name: "停車場數據",
type: "pie",
clockwise: false, // 逆時針旋轉
startAngle: 90, //90度開始
radius: [60, 110],
avoidLabelOverlap: false,
center: ["50%", "50%"],
roseType: "radius",//半徑模式
label: {
show: true,
},
data: [
{
value: 72,
name: "rose5",
itemStyle: {
color: "#007EFF",
},
},
{
value: 9,
name: "rose4",
itemStyle: {
color: "#798AFA",
},
},
{
value: 9,
name: "rose3",
itemStyle: {
color: "#33D3B2",
},
},
{
value: 7,
name: "rose2",
itemStyle: {
color: "#FF974F",
},
},
{
value: 3,
name: "rose1",
itemStyle: {
color: "#FAC661",
},
},
],
},
{
name: "停車場數據",
type: "pie",
clockwise: false, // 逆時針旋轉
startAngle: 90, //90度開始
radius: [50, 61],
calculable: false,
avoidLabelOverlap: false,
center: ["50%", "50%"],
label: {
show: true,
position: "inside",
formatter: "{d}%",
},
itemStyle: {
show: false,
borderWidth: 0, //去掉默認邊框
},
data: [
{
value: 72,
name: "rose5",
itemStyle: {
color: "#0071e5",
},
},
{
value: 9,
name: "rose4",
itemStyle: {
color: "#6c7be0",
},
},
{
value: 9,
name: "rose3",
itemStyle: {
color: "#2dbd9f",
},
},
{
value: 7,
name: "rose2",
itemStyle: {
color: "#e58746",
},
},
{
value: 3,
name: "rose1",
itemStyle: {
color: "#e0b157",
},
},
],
},
],
};
myEchart.setOption(option);
Highcharts可變寬度的環形餅圖
採用Highcharts方案我所實現的效果圖：
下面是實現源碼，爲方便閱讀，我未對“虛擬數據”進行提取
<div id="dataEchart"></div>
// 引入Highcharts
import * as Highcharts from "highcharts";
// 引入可變餅圖模塊
require("highcharts/modules/variable-pie")(Highcharts);
Highcharts.chart("dataEchart", {
// 圖標對象
chart: {
type: "variablepie",
backgroundColor: "transparent", //背景透明
},
// 標題
title: {
text: null,
},
// 數據提示框
tooltip: {
enabled: false,
},
// 版權信息
credits: {
enabled: false, // 禁用版權信息
},
// 數據列
series: [
{
minPointSize: 10,
zMin: 0,
size: "70%",
innerSize: "50%",
name: "outCircle",
borderColor: "transparent", //去掉默認邊框顏色
data: [
{
y: 3,//數值
z: 4,//寬度
name: "rose1",
color: "#FAC661",
dataLabels: {
enabled: true,
color: "rgba(255, 255, 255, 0.5)",
style: {
textOutline: "none", //去掉字體默認樣式
},
},
},
{
y: 7,
z: 6,
name: "rose2",
color: "#FF974F",
dataLabels: {
enabled: true,
color: "rgba(255, 255, 255, 0.5)",
style: {
textOutline: "none",
},
},
},
{
y: 9,
z: 8,
name: "rose3",
color: "#33D3B2",
dataLabels: {
enabled: true,
color: "rgba(255, 255, 255, 0.5)",
style: {
textOutline: "none",
},
},
},
{
y: 9,
z: 8,
name: "rose4",
color: "#798AFA ",
dataLabels: {
enabled: true,
color: "rgba(255, 255, 255, 0.5)",
style: {
textOutline: "none",
},
distance: 15,
},
},
{
y: 72,
z: 10,
name: "rose5",
color: "#007EFF",
dataLabels: {
enabled: true,
color: "rgba(255, 255, 255, 0.5)",
style: {
textOutline: "none",
},
},
},
],
},
{
size: "35%",
innerSize: "80%",
name: "innerCircle",
borderColor: "transparent",
dataLabels: {
formatter: function () {
this.point.name;
},
color: "#ffffff",
distance: -30,
},
data: [
{
y: 3,
z: 4,
name: "rose1",
color: "#e0b157",
dataLabels: {
enabled: true,
color: "rgba(255, 255, 255, 0.9)",
style: {
textOutline: "none",
},
formatter: function () {
return this.percentage + "%";
},
x: -15,
y: -40,
},
},
{
y: 7,
z: 6,
name: "rose2",
color: "#e58746",
dataLabels: {
enabled: true,
color: "rgba(255, 255, 255, 0.9)",
style: {
textOutline: "none",
},
formatter: function () {
return this.percentage.toFixed(0) + "%";
},
x: 2,
y: -36,
},
},
{
y: 9,
z: 8,
name: "rose3",
color: "#2dbd9f",
dataLabels: {
enabled: true,
color: "rgba(255, 255, 255, 0.9)",
style: {
textOutline: "none",
},
formatter: function () {
return this.percentage + "%";
},
x: 18,
y: -25,
},
},
{
y: 9,
z: 8,
name: "rose4",
color: "#6c7be0",
dataLabels: {
enabled: true,
color: "rgba(255, 255, 255, 0.9)",
style: {
textOutline: "none",
},
formatter: function () {
return this.percentage + "%";
},
x: 25,
y: 0,
},
},
{
y: 72,
z: 10,
name: "rose5",
color: "#0071e5",
dataLabels: {
enabled: true,
color: "rgba(255, 255, 255, 0.9)",
style: {
textOutline: "none",
},
formatter: function () {
return this.percentage + "%";
},
x: -15,
y: 30,
},
},
],
},
],
});
總結
- Echarts豐富的圖表類型，優雅的可視化設計，我個人是非常喜歡的，但是有些功能找不到解決方案，也只能另闢蹊徑了；
- 在使用Echarts的時候，我也嘗試了將較小的數據放大，但效果不太理性，最終放棄，改爲Highcharts。
- Highcharts第一次接觸，由於時間關係，沒有系統的閱讀開發文檔，踩了不少坑，比如：如何去掉默認邊框顏色，去掉dataLabels默認字體樣式，如何設置字體顏色，餅圖如何實現內置label；
- 關於Highcharts上面的坑，我當時想的是如Echarts那樣公共的設置樣式，但是沒有效果，最終只能在每條數據裏定義樣式，若你有更好的實現方式，留下您的鏈接，共同學習，共同進步！