Echarts是一款免費(fèi)的圖表組件，由百度推出。它不僅支持多種設(shè)備，還提供了豐富的圖表種類(lèi)，可以滿足各種數(shù)據(jù)可視化需求。本文將介紹如何通過(guò)Echarts為餅圖設(shè)置顏色。下載Echarts組件庫(kù)文件要使

Echarts是一款免費(fèi)的圖表組件，由百度推出。它不僅支持多種設(shè)備，還提供了豐富的圖表種類(lèi)，可以滿足各種數(shù)據(jù)可視化需求。本文將介紹如何通過(guò)Echarts為餅圖設(shè)置顏色。

下載Echarts組件庫(kù)文件

要使用Echarts，首先需要從百度Echarts官網(wǎng)（）下載組件庫(kù)文件。在下載頁(yè)面上，有四種選擇：常用、精簡(jiǎn)、完整和源代碼。每種選擇都有詳細(xì)的說(shuō)明，我們選擇常用即可。

引入Echarts組件js文件

在頁(yè)面代碼中引入Echarts組件js文件，以便使用Echarts的相關(guān)功能。具體方法是在head標(biāo)簽中添加以下代碼：

```

```

其中，""是Echarts組件庫(kù)文件的名稱(chēng)。

創(chuàng)建顯示圖表的div

在HTML文件中創(chuàng)建用于顯示餅圖的div。為了方便，我們給該div起一個(gè)ID，例如"main"。這樣，在調(diào)用Echarts時(shí)就可以告知它將圖表渲染到該div中。

```

```

注意，需要指定該div的寬度和高度，否則Echarts無(wú)法正確渲染圖表。

指定餅圖扇形的顏色

接下來(lái)，我們需要指定餅圖扇形的顏色。具體方法是修改每個(gè)data的ItemStyle對(duì)象的color屬性。例如，下面的代碼中將“買(mǎi)衣服”這個(gè)扇形的顏色設(shè)置為藍(lán)色。

```

series : [

{

name: '訪問(wèn)來(lái)源',

type: 'pie',

radius: '55%',

center: ['50%', '60%'],

data:[

{value:335, name:'直接訪問(wèn)',itemStyle: {color: 'ff9900'}},

{value:310, name:'郵件營(yíng)銷(xiāo)',itemStyle: {color: '66cc33'}},

{value:234, name:'聯(lián)盟廣告',itemStyle: {color: '993366'}},

{value:135, name:'視頻廣告',itemStyle: {color: 'cc3399'}},

{value:1548, name:'搜索引擎',itemStyle: {color: '0099cc'}},

{value:235, name:'買(mǎi)衣服',itemStyle: {color: '0000ff'}}

]

}

]

```

在上述代碼中，我們將“買(mǎi)衣服”這個(gè)扇形的顏色設(shè)置為藍(lán)色（0000ff）。其他扇形的顏色也可以按照此方式進(jìn)行修改。

完整代碼和效果演示

最后，我們來(lái)看一下完整的代碼和效果演示。在實(shí)際開(kāi)發(fā)中，可以根據(jù)自己的需求進(jìn)行修改。

```

```

效果演示如下所示：

![Echarts餅圖設(shè)置顏色效果演示]()