2018-07-24 15:36:43 起 -
餅圖單項不同顏色的設置
效果圖：
實現：
說明：
其實很簡單，就是設置全局的color屬性即可。color屬性可以是一套數組，里邊的樣式以字符串格式設置。
設置以后餅圖每一項會依照順序使用數組的顏色值，如果不夠用會循環使用。
餅圖每個單項的漸變效果
效果圖：
實現：
說明：
data數據可以是一個數組，數組每一項是一個對象，對象里邊可以再次設置私有屬性以覆蓋全局屬性，比如color。
所以對每一個單項設置漸變色，就在data數組的每一個對象中單獨設置color即可。
代碼：
data: [
{
value: 335,
name: '直接訪問',
itemStyle: {
color: {
colorStops: [{
offset: 0,
color: '#ff7474 ' // 0% 處的顏色
}, {
offset: 1,
color: '#4176ff' // 100% 處的顏色
}]
}
}
},
{
value: 310,
name: '郵件營銷',
itemStyle: {
color: {
colorStops: [{
offset: 0,
color: '#ffe390' // 0% 處的顏色
}, {
offset: 1,
color: '#f7c222' // 100% 處的顏色
}]
}
}
},
{
value: 234,
name: '聯盟廣告',
itemStyle: {
color: {
colorStops: [{
offset: 0,
color: '#9090ff' // 0% 處的顏色
}, {
offset: 1,
color: '#5656d0' // 100% 處的顏色
}]
}
}
},
{
value: 135,
name: '視頻廣告',
itemStyle: {
color: {
colorStops: [{
offset: 0,
color: '#95ec95' // 0% 處的顏色
}, {
offset: 1,
color: '#4ebb4e' // 100% 處的顏色
}]
}
}
},
{
value: 1548,
name: '搜索引擎',
itemStyle: {
color: {
colorStops: [{
offset: 0,
color: '#ea92ff' // 0% 處的顏色
}, {
offset: 1,
color: '#a847bf' // 100% 處的顏色
}]
}
}
}
]
餅圖label固定字數，超出的限制為顯示”...”
效果圖：
實現：
見另一篇文章總結比較清晰明了：https://www.cnblogs.com/padding1015/p/8625168.html
餅圖根據單項數據大小設置文案的展示狀態（是否探出等）
效果圖：
實現：
說明：
同顏色的道理一樣，data數組里邊的每一項還有很多可以設置的屬性，包括label是否展示等。
所以在拿到數據以后，遍歷返回的data每一項的value值，如果小於自己的需求范圍，就在這一項上邊設置label不展示的代碼即可。
代碼：
data: [{
value: 35,
name: '視頻廣告',
labelLine: {
normal: {
show: false
}
},
label: {
normal: {
show: false
}
}
}, {
value: 315,
name: '郵件營銷'
}
]
餅圖展示標簽在外邊或在里邊
效果圖：
實現：
說明：
默認設置全部都不探出，只在內部顯示，而只要data某一項中value值符合條件就對此項單獨設置為label探出效果即可。
代碼：
option = {
title: {
text: '某站點用戶訪問來源',
subtext: '純屬虛構',
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%'],
label: {
show: true,
position: 'inside'
},
labelLine: {
show: false,
},
data: [{
value: 335,
name: '直接訪問'
}, {
value: 310,
name: '郵件營銷'
}, {
value: 234,
name: '聯盟廣告'
}, {
value: 135,
name: '視頻廣告視頻廣告視頻廣告',
label: {
show: true,
position: 'outside'
},
labelLine: {
show: true,
smooth: true,
lineStyle: {
// color: 'red'
}
}
}, {
value: 1548,
name: '搜索引擎搜索引擎搜索引擎搜索引擎搜索引擎',
label: {
formatter: function (params) {
if (params.data.name.length > 5) {
var labelNewText = params.data.name.substring(0, 6) + ' ...'
}
return labelNewText
}
}
}],
itemStyle: {
emphasis: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}]
};