• echarts白色实心环形图(空心饼图)的编写


    // 数据接入机构统计
    let myDom = document.getElementById('myChart');
    let myWidth = myDom.offsetWidth - 5; // 获取容器宽度
    let myHeight = myDom.offsetHeight - 5; // 获取容器高度
    let myRadius = myHeight * 0.44 / 2; // 根据环形图内圈百分比获取内圆半径
    let myPX = (0.3 - (myRadius / myWidth)) * 100 + '%'; // 获取白色填充圆在容器中的x轴位置百分比,以便与环形图贴合
    let myChart = echarts.init(document.getElementById('myChart'));
    let option = {
    title: { // 标题样式
    text: '数据接入机构统计',
    textStyle: {
    color: '#cccccc',
    fontSize: 14
    }
    },
    tooltip: { // 悬浮提示
    trigger: 'item',
    formatter: "{a} <br/>{b}: {c} ({d}%)"
    },
    legend: {
    orient: 'vertical',
    top: '20%',
    right: 20, // 与容器距离调节
    icon: 'circle', // 样式调节 'circle''rect''roundRect''triangle''diamond''pin''arrow''none'等
    itemWidth: 7,
    textStyle: {
    color: '#ffffff',
    fontSize: 10,
    padding: [0, 0, 0, 5] //字与图形间的边距
    },
    data:['111','222','333']
    },
    graphic: {
    elements: [
    {
    type: 'group',
    left: myPX, // 横坐标位置
    top: '33%', // 纵坐标位置 55% - (44% / 2)
    children: [
    {
    type: 'circle',
    shape: {
    r: myRadius // 白色圆半径
    },
    style: {
    fill: '#fff' // 背景颜色
    }
    },
    {
    type: 'text', // 覆盖在圆上的文字位置和样式
    style: {
    text: 12345,
    y: -10,
    textAlign: 'center',
    fontSize: 12,
    fill: '#494949'
    }
    },
    {
    type: 'text',
    style: {
    text: '条',
    y: 10,
    textAlign: 'center',
    fontSize: 13,
    fill: '#494949'
    }
    }
    ]
    }
    ]
    },
    series: [
    {
    name:'机构统计',
    type:'pie',
    radius: ['44%', '70%'], // 环形图大小和粗细
    avoidLabelOverlap: false,
    center: ['30%', '55%'], // 环形图位置
    label: {
    normal: {
    show: false, // 设置不显示
    position: 'center' // hover时提示在圆环内
    }
    },
    data:[
    {value:335, name:'111'},
    {value:310, name:'222'},
    {value:234, name:'333'}
    ]
    }
    ]
    };
    myChart.setOption(option);
  • 相关阅读:
    selenium 滑动页面至元素可见
    APP接口测试和功能测试点
    单元测试总结
    python-selenium -- 弹出框处理
    集成测试
    白盒、黑盒、灰盒、动(静)态分析、人工(自动化)测试、覆盖率
    css3 页面退出和进入的动画
    CSS样式中,background-image 背景图片居中显示并且在不同屏幕分辨率下始终居中
    CSS选择器4是下一代CSS选择器规范
    setInterval()-----------js 函数总结
  • 原文地址:https://www.cnblogs.com/zhanyuefeixian/p/11758827.html
Copyright © 2020-2023  润新知