echarts自定義餅圖

本文轉載自查看原文 2019-01-17 15:29 2025 插件

在網上看到一張圖，便想要用echarts實現：

　　　　　　　　　　原網圖

現圖　　　　　

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>普通餅圖</title>
</head>
<script src="echarts.common.min.js"></script>
<style>
    body{
        background-color: pink;
    }
    .app{
        height: 400px;
        width: 400px;
        background-color: pink;
        margin: auto;
        border: 1px solid #fff;
    }
</style>
<body>
<div class="app" id="app"></div>

</body>
<script>
    var app =echarts.init(document.getElementById('app'));
    option = {
        tooltip: {
            trigger: 'item',
            formatter: "{a}:{b}:({d}%)"
        },
        legend: {
            orient: 'vertical',
            x: '20%',
            y: '90%',
            data:['語言','美國科學&社會科學','美國數學']
        },
        series: [
            {
                name:'訪問來源',
                type:'pie',
                selectedMode: 'single',
                radius: [0, '70%'],

                label: {
                    normal: {
                        formatter: '{d}%',
                        position: 'inner'
                    }
                },
                data:[
                    {
                        value:70,
                        name:'語言',
                        itemStyle:{
                            normal:{
                                color:'rgb(255,192,0)',
                                shadowBlur:'90',
                                shadowColor:'rgba(0,0,0,0.8)',
                                shadowOffsetY:'30'
                            }
                        }
                    },
                    {
                        value:10,
                        name:'美國科學&社會科學',
                        itemStyle:{
                            normal:{
                                color:'rgb(1,175,80)'
                            }
                        }
                    },
                    {
                        value:20,
                        name:'美國數學',
                        itemStyle:{
                            normal:{
                                color:'rgb(122,48,158)'
                            }
                        }
                    }
                ]
            }

        ]
    };
    app.setOption(option);
</script>
<html>

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 echarts 餅圖 pie label 顏色自定義 echarts大屏實現餅圖圖例自定義展示 Android 自定義餅狀圖 vue2.0 自定義餅狀圖（Echarts）組件 Echarts自定義瀑布圖開發 Qt編寫自定義控件20-自定義餅圖如何自定義echarts 線性圖的選擇事件 echarts地圖擴展___自定義的svg圖 Android之自定義控件實現天氣溫度折線圖和餅狀圖 echarts多圓環餅圖