echarts實現(xiàn)餅圖與樣式設(shè)置

更新時間：2022年06月06日 17:08:59 作者：springsnow

這篇文章介紹了echarts實現(xiàn)餅圖與樣式設(shè)置的方法，文中通過示例代碼介紹的非常詳細(xì)。對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下

餅圖

餅圖主要是通過扇形的弧度表現(xiàn)不同類目的數(shù)據(jù)在總和中的占比，它的數(shù)據(jù)格式比柱狀圖更簡單，只有一維的數(shù)值，不需要給類目。因為不在直角坐標(biāo)系上，所以也不需要 xAxis，yAxis。

myChart.setOption({
    series : [
        {
            name: '訪問來源',
            type: 'pie',    // 設(shè)置圖表類型為餅圖
            radius: '55%',  // 餅圖的半徑，外半徑為可視區(qū)尺寸（容器高寬中較小一項）的 55% 長度。
            data:[          // 數(shù)據(jù)數(shù)組，name 為數(shù)據(jù)項名稱，value 為數(shù)據(jù)項值
                {value:235, name:'視頻廣告'},
                {value:274, name:'聯(lián)盟廣告'},
                {value:310, name:'郵件營銷'},
                {value:335, name:'直接訪問'},
                {value:400, name:'搜索引擎'}
            ]
        }
    ]
})

我們也可以通過設(shè)置參數(shù) roseType: 'angle' 把餅圖顯示成南丁格爾圖。

option = {
    series : [
        {
            name: '訪問來源',
            type: 'pie',
            radius: '55%',
            roseType: 'angle',
            data:[
                {value:235, name:'視頻廣告'},
                {value:274, name:'聯(lián)盟廣告'},
                {value:310, name:'郵件營銷'},
                {value:335, name:'直接訪問'},
                {value:400, name:'搜索引擎'}
            ]
        }
    ]
};

陰影的配置

itemStyle 參數(shù)可以設(shè)置諸如陰影、透明度、顏色、邊框顏色、邊框?qū)挾鹊龋?/p>

option = {
    series : [
        {
            name: '訪問來源',
            type: 'pie',
            radius: '55%',
            data:[
                {value:235, name:'視頻廣告'},
                {value:274, name:'聯(lián)盟廣告'},
                {value:310, name:'郵件營銷'},
                {value:335, name:'直接訪問'},
                {value:400, name:'搜索引擎'}
            ],
            roseType: 'angle',
            itemStyle: {
                normal: {
                    shadowBlur: 200,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
            }
        }
    ]
};

樣式設(shè)置

ECharts 可以通過樣式設(shè)置來改變圖形元素或者文字的顏色、明暗、大小等。

顏色主題

ECharts4 開始，除了默認(rèn)主題外，內(nèi)置了兩套主題，分別為 light 和 dark。

使用方式如下：

var chart = echarts.init(dom, 'light');
 
//或者
 
var chart = echarts.init(dom, 'dark');

另外，我們也可以在官方的主題編輯器選擇自己喜歡的主題下載。

目前主題下載提供了 JS 版本和 JSON 版本。

如果你使用 JS 版本，可以將 JS 主題代碼保存一個主題名.js 文件，然后在 HTML 中引用該文件，最后在代碼中使用該主題。

比如上圖中我們選中了提個主題，將 JS 代碼保存為 wonderland.js。

<!-- 引入主題 -->
<script src="https://www.runoob.com/static/js/wonderland.js"></script>
...

// HTML 引入 wonderland.js 文件后，在初始化的時候調(diào)用
var myChart = echarts.init(dom, 'wonderland');
// ...

如果主題保存為 JSON 文件，那么可以自行加載和注冊。

比如上圖中我們選中了提個主題，將 JSON 代碼保存為 wonderland.json。

//主題名稱是 wonderland
$.getJSON('wonderland.json', function (themeJSON) {
    echarts.registerTheme('wonderland', themeJSON)
    var myChart = echarts.init(dom, 'wonderland');
});

注意：我們使用了 $.getJSON，所以需要引入 jQuery。

調(diào)色盤

調(diào)色盤可以在 option 中設(shè)置。

調(diào)色盤給定了一組顏色，圖形、系列會自動從其中選擇顏色。

可以設(shè)置全局的調(diào)色盤，也可以設(shè)置系列自己專屬的調(diào)色盤。

option = {
    // 全局調(diào)色盤。
    color: ['#c23531','#2f4554', '#61a0a8', '#d48265', '#91c7ae','#749f83',  '#ca8622', '#bda29a','#6e7074', '#546570', '#c4ccd3'],

    series: [{
        type: 'bar',
        // 此系列自己的調(diào)色盤。
        color: ['#dd6b66','#759aa0','#e69d87','#8dc1a9','#ea7e53','#eedd78','#73a373','#73b9bc','#7289ab', '#91ca8c','#f49f42'],
        ...
    }, {
        type: 'pie',
        // 此系列自己的調(diào)色盤。
        color: ['#37A2DA', '#32C5E9', '#67E0E3', '#9FE6B8', '#FFDB5C','#ff9f7f', '#fb7293', '#E062AE', '#E690D1', '#e7bcf3', '#9d96f5', '#8378EA', '#96BFFF'],
        ...
    }]
}

全局調(diào)色盤實例：

// 全局調(diào)色盤。
color: ['#ff0000','#00ff00', '#0000ff', '#d48265', '#91c7ae','#749f83',  '#ca8622', '#bda29a','#6e7074', '#546570', '#c4ccd3'],

系列調(diào)色盤實例：

series: [{
    type: 'pie',
    // 此系列自己的調(diào)色盤。
    color: ['#ff0000','#00ff00', '#0000ff', '#9FE6B8', '#FFDB5C','#ff9f7f', '#fb7293', '#E062AE', '#E690D1', '#e7bcf3', '#9d96f5', '#8378EA', '#96BFFF'],
    ...
}]

直接的樣式設(shè)置 itemStyle, lineStyle, areaStyle, label, ...

直接的樣式設(shè)置是比較常用設(shè)置方式?？v觀 ECharts 的 option 中，很多地方可以設(shè)置 itemStyle、lineStyle、areaStyle、label 等等。這些的地方可以直接設(shè)置圖形元素的顏色、線寬、點的大小、標(biāo)簽的文字、標(biāo)簽的樣式等等。

一般來說，ECharts 的各個系列和組件，都遵從這些命名習(xí)慣，雖然不同圖表和組件中，itemStyle、label 等可能出現(xiàn)在不同的地方。

直接樣式設(shè)置的可以參考上半段 ECharts 餅圖。

高亮的樣式：emphasis

在鼠標(biāo)懸浮到圖形元素上時，一般會出現(xiàn)高亮的樣式。默認(rèn)情況下，高亮的樣式是根據(jù)普通樣式自動生成的。

如果要自定義高亮樣式可以通過 emphasis 屬性來定制：

// 高亮樣式。
emphasis: {
    itemStyle: {
        // 高亮?xí)r點的顏色
        color: 'red'
    },
    label: {
        show: true,
        // 高亮?xí)r標(biāo)簽的文字
        formatter: '高亮?xí)r顯示的標(biāo)簽內(nèi)容'
    }
},

到此這篇關(guān)于echarts餅圖與樣式設(shè)置的文章就介紹到這了。希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: