饼图的常见效果

饼图常见效果

  显示数值: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>

如图:

                                                         饼图的常见效果

上一篇:CountDownLatch与AQS共享模式


下一篇:Java高并发21-AQS在共享,独占场景下的源码介绍