用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>
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值