用Echarts2畫餅圖配置 itemStyle

首先去百度下載Echarts2,然後引入。
默認的案例夠畫餅圖了,但是我爲了去除餅圖的指示線和指示名稱,所以用了itemStyle。


<script type="text/javascript">
    require.config({
        paths : {
            'echarts' : 'js/echarts',
            'echarts/chart/pie' : 'js/echarts'
        }
    });

    // 使用
    require(
            [ 
              'echarts', 'echarts/chart/pie' // 按需加載
            ],
            function(ec) {
                var myChart = ec.init(document.getElementById('main2'));
                var option = {
                        tooltip: {
                            trigger: 'item',
                            formatter: "{a} <br/>{b}: {c} ({d}%)"
                        },
                        color:['#AD3733', '#CD5C5C'], 

                        series: [
                            {
                                type:'pie',
                                radius: ['20%', '60%'],
                                avoidLabelOverlap: false,
                                itemStyle: {
                                            normal: {
                                                label: {
                                                    show: true,
                                                    //formatter: '{d}%'
                                                },
                                                labelLine: {
                                                    show: true
                                                }
                                            },
                                            emphasis: {
                                                label: {
                                                    show: true
                                                },
                                                labelLine: {
                                                    show: true
                                                }
                                            }
                                        },
                                data:[
                                     {value:1200, name:'未超時',selected:true},
                                     {value:315, name:'超時'}
                                ]
                            }
                        ]
                    };

        myChart.setOption(option);
    });
</script>
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章