饼图的常见效果

时间：2020-12-26 17:44:03 阅读：26 评论：0 收藏：0 [点我收藏+]

饼图常见效果

　　显示数值：label、formatter

　　圆环的设置：radius:[‘50%‘,‘70%‘] 设置内外半径不一样

　　南丁格尔图：roseType: ‘radius‘

　　选中效果：

　　　　选中模式：selectedMode:single\multiple

　　　　选中偏移量：selectedOffset:30

    <div id="main" style="width: 700px;height:400px;"></div>

    <script type="text/javascript">
        var myChart = echarts.init(document.getElementById(‘main‘));
        var pieArr = [{
            name: ‘淘宝‘,
            value: 11234
        }, {
            name: ‘京东‘,
            value: 2342
        }, {
            name: ‘唯品会‘,
            value: 8632
        }, {
            name: ‘聚美优品‘,
            value: 1233
        }];

　　　　　　var option = {

series: [{

type: ‘pie‘,

data: pieArr,

// 饼图文字的显示

label: {

show: true,

// 决定文字显示的内容

formatter: function (arg) {

return arg.name + ‘平台‘ + arg.value + ‘元‘ + arg.percent + ‘%‘

}

// radius:60, // 饼图半径的设置

// radius: "20%", // 取决于容器的宽度和高度中较小的部分的一半来进行百分比的设置

// 圆环

// radius:[‘50%‘,"75%"] // 第0个元素代表内圆的半径，第1个元素代表外圆的半径

roseType: ‘radius‘, // 南丁格尔图（每部分的半径取决于数值的大小）

// selectedMode:‘single‘, // 将选中的区域偏移原点一小段距离

selectedMode:‘multiple‘, // 可以选中好几个

selectedOffset:30 // 设置偏离距离

}]

};

        myChart.setOption(option);
    </script>

如图：

技术分享图片

饼图的常见效果

原文：https://www.cnblogs.com/hwy6/p/14192998.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年09月23日 (328)
2021年09月24日 (313)
2021年09月17日 (191)
2021年09月15日 (369)
2021年09月16日 (411)
2021年09月13日 (439)
2021年09月11日 (398)
2021年09月12日 (393)
2021年09月10日 (160)
2021年09月08日 (222)