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()
                })
            },
        })
    
    }
    

      

  • 相关阅读:
    201141 live the lie until the lie becomes your life
    my php & mysql FAQ
    suger日料财务
    python 应用thrift thrift的监控fb303
    cherryPy学习
    my linux FAQ
    Javascript无阻塞加载方法
    设计模式学习笔记之组合模式模式
    【转】cookie
    C# 多线程
  • 原文地址:https://www.cnblogs.com/theblogs/p/13810017.html
Copyright © 2011-2022 走看看