Echarts餅圖頁面加載后默認凸出某塊

代碼：

<script type="text/javascript">
        var myChart = echarts.init(document.getElementById("echarts_demo"));
        window.onresize = myChart.resize;

        option = {
            //backgroundColor: '#fff',
            color: ['blue','green'],
            // tooltip: {formatter: "{d}%"},
            series: [
                {
                    type: 'pie',
                    /* //用於理解
                    radius: [0, '90%'],
                    silent: true,//當有tooltip---formatter時，阻止第一個圈formatter內容的出現
                    label: {
                        normal: {show: false},
                    },
                    data: [{
                        value: 1,
                        name: '',
                        itemStyle: {color: '#ddd'},
                    }] */
                },
                {
                    type: 'pie',
                    radius: ['40%', '60%'],
                    hoverOffset: 20,
                    
                    label: {
                        normal: {
                            show: false,
                            position:'center'
                        },
                        emphasis:{
                            show:true,
                            textStyle: {
                                fontSize: '15',
                                fontWeight: 'bold'
                            }
                        }
                    },
                    data:[
                        {value:600, name:'22:00-8:00'},
                        {value:270, name:'8:00-12:30'},
                        {value:90, name:'12:30-14:00'},
                        {value:480, name:'14:00-22:00'},
                    ]
                } 
            ]
        };

        myChart.setOption(option);

        //設置默認選中高亮部分
        myChart.dispatchAction({
            type: 'highlight',
            seriesIndex: 1,
            dataIndex: 0
        });
        
        myChart.on('mouseover', function(e) {
            //當檢測到鼠標懸停事件，取消默認選中高亮
            myChart.dispatchAction({
                type: 'downplay',
                seriesIndex: 1,
                dataIndex: 0
            });
            //高亮顯示懸停的那塊
            myChart.dispatchAction({
                type: 'highlight',
                seriesIndex: 1,
                dataIndex: e.dataIndex
            });
        });
        
        //檢測鼠標移出后顯示之前默認高亮的那塊
        myChart.on('mouseout', function(e) {
            myChart.dispatchAction({
                type: 'highlight',
                seriesIndex: 1,
                dataIndex: 0
            });
        });

    </script>

 

默認顯示效果：

 

移入其他塊懸停效果：

 

想看更多Dome，請去ECharts官網：https://www.echartsjs.com/index.html

 

注：Echarts隱藏之后的顯示問題
給盛裝Echarts圖的div容器高、寬(高、寬要寫成內聯)即可！