基于Echarts實(shí)現(xiàn)餅圖效果
更新時(shí)間：2022年05月22日 10:38:13 作者：￡白晝の星☆
這篇文章主要為大家詳細(xì)介紹了基于Echarts實(shí)現(xiàn)餅圖效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
本文實(shí)例為大家分享了Echarts實(shí)現(xiàn)餅圖效果的具體代碼，供大家參考，具體內(nèi)容如下
1 顯示數(shù)值效果 series 下的label 餅圖的文字顯示
2 半徑 圓環(huán) radius
3 南丁格爾圖 roseType: 'radius' 數(shù)值越大半徑越大
4 選中效果 selectedMode
注意點(diǎn):
1 不需要設(shè)置 x軸和y軸
2 餅圖的所需要的數(shù)據(jù) 是個(gè)數(shù)組 數(shù)組里面放對(duì)象 對(duì)象則必須包含name和value，
<!DOCTYPE html>
<html lang="en">
?
<head>
? <meta charset="UTF-8">
? <meta name="viewport" content="width=device-width, initial-scale=1.0">
? <meta http-equiv="X-UA-Compatible" content="ie=edge">
? <title>Document</title>
? <script src="lib/echarts.min.js"></script>
</head>
?
<body>
? <div style="width: 600px;height:400px"></div>
? <script>
? ? var mCharts = echarts.init(document.querySelector("div"))
? ? var pieData = [
? ? ? {
? ? ? ? name: '伙食費(fèi)',
? ? ? ? value: 11231
? ? ? },
? ? ? {
? ? ? ? name: '房貸',
? ? ? ? value: 22673
? ? ? },
? ? ? {
? ? ? ? name: '交通費(fèi)',
? ? ? ? value: 6123
? ? ? },
? ? ? {
? ? ? ? name: '車(chē)輛保養(yǎng)費(fèi)',
? ? ? ? value: 8989
? ? ? },
? ? ? {
? ? ? ? name: '網(wǎng)購(gòu)',
? ? ? ? value: 6700
? ? ? }
? ? ]
? ? var option = {
? ? ? legend:{
? ? ? ? show: true,
? ? ? ? icon:'circle',
? ? ? },
? ? ? color: [
? ? ? '#5470c6',
? ? ? '#91cc75',
? ? ? '#fac858',
? ? ? '#ee6666',
? ? ? '#73c0de',
? ? ? '#3ba272',
? ? ? '#fc8452',
? ? ? '#9a60b4',
? ? ? '#ea7ccc',
? ? ],
? ? ? series: [
? ? ? ? {
? ? ? ? ? type: 'pie',
? ? ? ? ? data: pieData,
? ? ? ? ? label: {?
? ? ? ? ? ? show: true,?
? ? ? ? ? ? // formatter: 'test'?
? ? ? ? ? ? formatter: function(arg){
? ? ? ? ? ? ? console.log(arg)
? ? ? ? ? ? ? return arg.name + '平臺(tái)' + arg.value + '元\n' + arg.percent + '%'
? ? ? ? ? ? }
? ? ? ? ? },
? ? ? ? ??
? ? ? ? ? // radius: 20, // 餅圖的半徑
? ? ? ? ? // radius: '20%',?
? ? ? ? ? // radius: ['50%', '75%'], // 第0個(gè)元素代表的是內(nèi)圓的半徑 第1個(gè)元素外圓的半徑
? ? ? ? ? radius: [60, 140],
? ? ? ? ? // roseType: 'radius',?
? ? ? ? ? // selectedMode: 'single', // 選中的效果,能夠?qū)⑦x中的區(qū)域偏離圓點(diǎn)一小段距離(單個(gè))
? ? ? ? ? selectedMode: 'multiple', // 多個(gè)可以選中
? ? ? ? ? // selectedOffset: 0
? ? ? ? }
? ? ? ]
? ? }
? ? mCharts.setOption(option)
? </script>
</body>
?
</html>以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
您可能感興趣的文章:
- React項(xiàng)目搭建與Echarts工具使用詳解
- vue+echarts封裝氣泡圖的方法
- echarts 3D地圖為區(qū)域自定義顏色的解決方法
- 在vue中使用echarts實(shí)現(xiàn)上浮與下鉆效果
- 使用GetInvalidFileNameCharts生成文件名
- 解決echarts中餅圖標(biāo)簽重疊的問(wèn)題
- echarts餅圖扇區(qū)添加點(diǎn)擊事件的實(shí)例
- echarts餅圖指示器文字顏色設(shè)置不同實(shí)例詳解
- echarts餅圖各個(gè)板塊之間的空隙如何實(shí)現(xiàn)
- echarts實(shí)現(xiàn)餅圖與樣式設(shè)置
- echarts餅圖標(biāo)簽formatter使用及餅圖自定義標(biāo)簽
- Vue ECharts餅圖實(shí)現(xiàn)方法詳解
- Echarts實(shí)現(xiàn)點(diǎn)擊列表聯(lián)動(dòng)餅圖的示例代碼
相關(guān)文章
重寫(xiě)document.write實(shí)現(xiàn)無(wú)阻塞加載js廣告(補(bǔ)充)
這篇文章主要介紹了重寫(xiě)document.write實(shí)現(xiàn)無(wú)阻塞加載js廣告,需要的朋友可以參考下2014-12-12
JS禁用右鍵、禁用Ctrl+u、禁用Ctrl+s、禁用F12的實(shí)現(xiàn)代碼
最近項(xiàng)目需要屏蔽客戶端的一些操作，加大查看源碼等難度，特整理一下這個(gè)js，也防止客戶端用戶誤操作，破解方放也很簡(jiǎn)單這里就不多說(shuō)了2020-10-10
由于鼠標(biāo)滾輪事件在 IE 和 FF 的實(shí)現(xiàn)有點(diǎn)不一樣，所以有需要把這個(gè)寫(xiě)成一個(gè)統(tǒng)一可用的事件。2009-04-04
隨著以Firefox為代表的第三方瀏覽器的興起，我們做的網(wǎng)站也不能再JUST IE了，如果把原來(lái)的一些javascript代碼放到IE以外的瀏覽器的話，往往都不能正常運(yùn)行或出錯(cuò)，所以這里介紹一下怎么改進(jìn)我們的JS，讓它能更加規(guī)范，更加具有兼容性。2008-09-09
這篇文章主要介紹了JS HTML Web端使用MQTT通訊測(cè)試,本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2023-04-04
javascript時(shí)間函數(shù)基礎(chǔ)介紹
這篇文章主要介紹了javascript中提供了Date對(duì)象來(lái)進(jìn)行時(shí)間和日期的計(jì)算，這里簡(jiǎn)單的介紹下， 方便需要的朋友2013-03-03
JavaScript+canvas實(shí)現(xiàn)七色板效果實(shí)例
這篇文章主要介紹了JavaScript+canvas實(shí)現(xiàn)七色板效果的方法,結(jié)合實(shí)例形式詳細(xì)分析了JavaScript結(jié)合html5的canvas技術(shù)實(shí)現(xiàn)繪制七色板效果的相關(guān)技巧,需要的朋友可以參考下2016-02-02
最好用的Bootstrap fileinput.js文件上傳組件
這篇文章主要為大家詳細(xì)介紹了最好用的Bootstrap fileinput.js文件上傳組件的使用方法,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-12-12
這篇文章主要介紹了JS中的const命令你真懂它嗎，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-03-03
Bootstrap實(shí)現(xiàn)提示框和彈出框效果
這篇文章主要為大家詳細(xì)介紹了Bootstrap實(shí)現(xiàn)彈出框和提示框效果，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-01-01