zoukankan      html  css  js  c++  java
  • echarts饼图标题居中以及调整主副标题的间距

    text:主标题

    subtext:副标题

    itemGap:主副标题之间的间距

    textAlign:整体(包括 text 和 subtext)的水平对齐

    项目个数是后台返回的,直接渲染

    function initThisMonthProjectsParticipate() {
        $.ajax({
            url: urlpic + "currentMonthParticipateProject",
            type: 'get',
            data: {
                deptId: '4676',
            },
            success: function (data) {
                console.log(data.participateProjectTotal, 'data');
                let total = data.participateProjectTotal;
                let dataOption = data.eChartResponseModel;
                let styleOption = {
                    title: {
                        show: true,
                        text: '本月参评项目',
                        subtext: total + '个',
                        itemGap: 8,
                        left: '48%',
                        top: '45%',
                        textStyle: {
                            color: '#B4E4FF',
                            fontSize: 8 * sceenRate,
                        },
                        subtextStyle: {
                            color: '#B4E4FF',
                            fontSize: 8 * sceenRate,
                        },
                        textAlign:'center'
                    },
                    tooltip: {
                        trigger: 'item',
                        formatter: '{a} <br/>{b}: {c} ({d}%)'//a 系列名称,b 数据项名称,c 数值,d 百分比
                    },
                    series: [{
                        name: '本月参评项目',
                        type: 'pie',
                        label: {
                            show: true,
                            alignTo: 'labelLine',
                            position: 'outside',
                            formatter: '{c}个{b}项目',
                            fontSize: 6 * sceenRate,
                            alignTo: 'edge'
                        },                 
                    }]
                }
                let id = 'participateChart'
                let chart = initCharts(id, dataOption, styleOption)
                chart.on('click', function () {
                    initSecondLevelPage()
                })
            },
        })
    
    }
    

      

  • 相关阅读:
    Google的Protobuf安装及使用笔记一
    std::list与std::map的排序比较
    svn库镜像
    daemontools中supervise系统进程监控
    memcached的客户端
    Memcached安装及使用
    eclipse下maven配置
    栈溢出
    堆排序
    redis使用笔记
  • 原文地址:https://www.cnblogs.com/theblogs/p/13810017.html
Copyright © 2011-2022 走看看