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)‘
                }
            }
        }]
};
 

echarts - 特殊需求實現代碼匯總之【餅圖】篇