• 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
                    }
                ]
            });
        }
  • 相关阅读:
    postman中 form-data、x-www-form-urlencoded、raw、binary的区别
    常见的http response
    ==容易错误的例子
    点击panel滚动条滚动到底部
    fabric实现文本聚焦、可编辑
    JSON.parse()和JSON.stringify()的使用
    centos7安装mysql
    阿里云第一次访问tomcat非常慢的解决办法
    java中的语法糖
    jvm | 基于栈的解释器执行过程
  • 原文地址:https://www.cnblogs.com/anns/p/5984248.html
Copyright © 2020-2023  润新知