基于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: '車輛保養(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í)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

js實(shí)現(xiàn)顯示當(dāng)前狀態(tài)的導(dǎo)航效果代碼
這篇文章主要介紹了js實(shí)現(xiàn)顯示當(dāng)前狀態(tài)的導(dǎo)航效果代碼,涉及javascript通過(guò)鼠標(biāo)點(diǎn)擊事件動(dòng)態(tài)改變頁(yè)面元素屬性的相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下
2015-08-08
typescript中type和interface的區(qū)別有哪些
大家使用typescript總會(huì)使用到interface和type,所以下面這篇文章主要給大家介紹了關(guān)于typescript中type和interface區(qū)別的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下
2022-02-02
一步一步的了解webpack4的splitChunk插件(小結(jié))
這篇文章主要介紹了一步一步的了解webpack4的splitChunk插件(小結(jié))，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2018-09-09
js實(shí)現(xiàn)簡(jiǎn)單的倒計(jì)時(shí)
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)簡(jiǎn)單的倒計(jì)時(shí)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2021-01-01
論Bootstrap3和Foundation5網(wǎng)格系統(tǒng)的異同
這篇文章主要介紹了Bootstrap3和Foundation5網(wǎng)格系統(tǒng)，網(wǎng)格的基本構(gòu)造，如何構(gòu)建的，描述它們的主要部件，以及它們對(duì)不同屏幕的大小表現(xiàn)出的差異，感興趣的小伙伴們可以參考一下
2016-05-05
分享JS表單驗(yàn)證源碼（帶錯(cuò)誤提示及密碼等級(jí)）
這篇文章主要介紹了JS表單驗(yàn)證源碼（帶錯(cuò)誤提示及密碼等級(jí)）,代碼簡(jiǎn)單易懂，非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2020-01-01
three.js實(shí)現(xiàn)圍繞某物體旋轉(zhuǎn)
本篇文章主要介紹了three.js實(shí)現(xiàn)圍繞某物體旋轉(zhuǎn)的示例代碼。具有很好的參考價(jià)值，下面跟著小編一起來(lái)看下吧
2017-01-01
使用Modello編寫JavaScript類
使用Modello編寫JavaScript類...
2006-12-12
JavaScript時(shí)間對(duì)象Date內(nèi)置構(gòu)造函數(shù)操作實(shí)例
這篇文章主要為大家介紹了JavaScript時(shí)間對(duì)象Date內(nèi)置構(gòu)造函數(shù)操作實(shí)例，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2023-05-05
javascript垃圾收集機(jī)制的原理分析
javascript具有自動(dòng)垃圾收集機(jī)制，執(zhí)行環(huán)境會(huì)負(fù)責(zé)管理代碼執(zhí)行過(guò)程中使用的內(nèi)存。在編寫javascript程序時(shí)，開發(fā)人員不用再關(guān)心內(nèi)存使用問(wèn)題，所需內(nèi)存的分配以及無(wú)用內(nèi)存的回收完全實(shí)現(xiàn)了自動(dòng)管理。本文將詳細(xì)介紹javascript的垃圾收集機(jī)制
2016-12-12