Echarts餅形圖圖例

本文轉載自查看原文 2020-08-26 11:34 2877

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./echarts.min.js"></script>
</head>
<body>
    <div id="a" style="width: 500px; height: 500px;"></div>
</body>
<script>

    var myChart = echarts.init(document.getElementById('a'))
  
        option = {
            tooltip: {
                trigger: 'item',
                formatter: '{a} <br/>{b}: {c} ({d}%)'
            },
            //餅圖中間顯示文字
            graphic:{
                type:'text',
                left:'center',
                top:'center',
                style:{
                    text:"重點警情 \n 1,963",// \n是換行
                    textAlign:'center', //字體居中
                    fill:'#000',    //字體顏色
                    fontSize:15     //字體大小
                }

            },
            legend: {
                orient: 'vertical',
                left: 10,
                show:false
            },
            grid:{
                show:false,
                // 距離頭部的距離
                top:'10%',
                left:'10%',
                // x2:'90%',
                // 距離底部的距離
                bottom:'15%',
                // 修改y軸文字樣式
                textStyle:{
                    fontSize: 12,//字體大小
                    color: '#fff'//字體顏色
                },

            } ,      
            series: [
                {
                    name: '警情統計',
                    type: 'pie',
                    radius: ['50%', '80%'],
                    avoidLabelOverlap: false,
                    label: {
                        show: false,
                        position: 'center'
                    },
                    emphasis: {
                        label: {
                            show: true,
                            fontSize: '30',
                            fontWeight: 'bold'
                        }
                    },
                    labelLine: {
                        show: true
                    },
                    // 圖外樣式
                    itemStyle: {
                
                        emphasis: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        },
                        // 這里做改變
                       normal:{   //正常樣式
                        //    標簽
                            label:{  
                                show: true, 
                                // 顯示數據名稱以及具體的數據
                                // formatter: '{b} : {c} ({d}%)' ,
                                // 只顯示數據名稱
                                formatter: '{b}',
                                fontSize: '14',
                                color:'red',
                            }, 
                            labelLine :{
                                show:false
                            } 
                        }
                    },
                     color:['#E74A3B','#889B98','#3395D9'],
                    data: [
                        {value: 400, name: '詐騙 '},
                        {value: 400, name:'兩搶'},
                        {value: 500, name: '盜搶'},
                      
                    ]
                }
            ]
        }

myChart.setOption(option)
window.onresize=function(){
    myChart.resize()
}
</script>
</html>

免責聲明！

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

猜您在找 echarts-------餅形圖 echarts 圖例樣式 Echarts 圖例交互事件 echarts改變圖例位置 echarts圖例分頁展示 echarts 圖例顯示到右邊設置Echarts圖例位置基於ECharts 的地圖例子 ECharts常用圖例 echarts圖例（legend）

Echarts餅形圖 圖例

免責聲明！

Echarts餅形圖圖例