zoukankan      html  css  js  c++  java
  • echarts使用中的那些事儿( 三)

    饼图上的那些字与下面说明性的文字有些重合,该怎么缩小圆形的大小呢,还有它的位置,怎么让它向上一些或者向下一些;

    有以下两个属性可以解决问题:

    radius : '55%', ------------这个属性设置图的大小
    center: ['50%', '60%'],-----这个属性设置图的上下左右的位置

    没应用这两个属性前图是这样的:

    应用上面两个属性后图是下面这样的:

    代码如下:

       /**
         * 显示百度pie图表
         * @param string wrap 图表容器
         * @param string title 图表名称
         * @param object data 图表数据,格式[{value: 335, name: '直接访问'},...]
         */
        showPieChart: function (wrap, title, data) {
            var myChart = echarts.init(document.getElementById(wrap));
            var legend = [];
            if (data) {
                $.each(data, function (i, n) {
                    legend.push(n.name);
                });
            }
            myChart.setOption({
                tooltip: {
                    trigger: 'item',
                    formatter: "{a} <br/>{b}: {c} ({d}%)"
                },
                legend: {
                    x: 'center',
                    y: 'bottom',
                    data: legend || []
                },
                grid: {
                    x: 0,
                    y: 0,
                     '100%',
                    height: '100%'
                },
                series: [
                    {
                        name: title || '',
                        type: 'pie',
                        radius: '65%',//['30%', '70%'],
                        center: ['50%', '40%'],
                        /*label: {
                         normal: {
                         show: false,
                         position: 'center'
                         },
                         emphasis: {
                         show: true,
                         textStyle: {
                         fontSize: '30',
                         fontWeight: 'bold'
                         }
                         }
                         },*/
                        labelLine: {
                            normal: {
                                show: true
                            }
                        },
                        data: data
                    }
                ]
            });
        }
  • 相关阅读:
    ubuntu安装软件失败
    阶乘函数 注意事项
    汇编退出
    vim比较文件
    汇编调试
    Redis
    记录一次ajax使用
    oracle11g导出dmp文件时不能导出空表,导致缺表
    将小数点后的0去掉
    redis
  • 原文地址:https://www.cnblogs.com/anns/p/5984248.html
Copyright © 2011-2022 走看看