基于Echarts實現(xiàn)餅圖效果

更新時間：2022年05月22日 10:38:13 作者：￡白晝の星☆

這篇文章主要為大家詳細介紹了基于Echarts實現(xiàn)餅圖效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了Echarts實現(xiàn)餅圖效果的具體代碼，供大家參考，具體內容如下

1 顯示數值效果 series 下的label 餅圖的文字顯示
2 半徑圓環(huán) radius
3 南丁格爾圖 roseType: 'radius' 數值越大半徑越大
4 選中效果 selectedMode

注意點:

1 不需要設置 x軸和y軸

2 餅圖的所需要的數據是個數組數組里面放對象對象則必須包含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: '伙食費',
? ? ? ? value: 11231
? ? ? },
? ? ? {
? ? ? ? name: '房貸',
? ? ? ? value: 22673
? ? ? },
? ? ? {
? ? ? ? name: '交通費',
? ? ? ? value: 6123
? ? ? },
? ? ? {
? ? ? ? name: '車輛保養(yǎng)費',
? ? ? ? value: 8989
? ? ? },
? ? ? {
? ? ? ? name: '網購',
? ? ? ? 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 + '平臺' + arg.value + '元\n' + arg.percent + '%'
? ? ? ? ? ? }
? ? ? ? ? },
? ? ? ? ??
? ? ? ? ? // radius: 20, // 餅圖的半徑
? ? ? ? ? // radius: '20%',?
? ? ? ? ? // radius: ['50%', '75%'], // 第0個元素代表的是內圓的半徑 第1個元素外圓的半徑
? ? ? ? ? radius: [60, 140],
? ? ? ? ? // roseType: 'radius',?
? ? ? ? ? // selectedMode: 'single', // 選中的效果,能夠將選中的區(qū)域偏離圓點一小段距離(單個)
? ? ? ? ? selectedMode: 'multiple', // 多個可以選中
? ? ? ? ? // selectedOffset: 0
? ? ? ? }
? ? ? ]
? ? }
? ? mCharts.setOption(option)
? </script>
</body>
?
</html>

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: