• echarts水球图编写


    // 前提条件 需要引入这个插件
    <script src="./echarts-liquidfill.min.js"></script>

    // 代码
    let Chart = echarts.init(document.getElementById('Chart'));
    let option = {
    title: { // 水球图标题样式
    text: '日',
    left: 'center',
    bottom: '10%',
    textStyle: {
    color: '#ffffff',
    fontSize: 14
    }
    },
    tooltip: {
    show: true
    },
    series: [
    {
    name: '日',
    type: 'liquidFill', // 水球图样式
    center: ['50%', '45%'], // 水球图位置
    amplitude: 3, // 波浪波动起伏大小
    waveLength: '100%', // 波浪长度
    color: ['#3399cc'], // 波浪颜色
    backgroundStyle: {
    color: '#ffffff', // 内部球背景颜色
    borderWidth: 2, // 内部球边框宽度
    borderColor: '#e3e3e3' // 内部球边框颜色
    },
    label:{
    normal:{
    formatter: '234', // 内部文字内容
    textStyle: {
    color: '#ffffff', // 在波浪上方时的文字颜色
    insideColor: '#ffffff', // 在波浪下方时的文字颜色
    fontSize: 10 // 文字大小
    }
    }
    },
    outline: {
    borderDistance: 0, // 外边框与内边框间的距离
    itemStyle: {
    borderWidth: 5, // 外边框的宽度
    borderColor: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ // 1代表上面 // 外边框的颜色(渐变色)
    offset: 0,
    color: '#1b6491'
    }, {
    offset: 1,
    color: '#3399cc'
    }]),
    }
    },
    data: [0.6] // 水球的注满度 60%
    }
    ]
    };
    Chart.setOption(option);


     这个水球内部的背景,没办法调成纯白色,设置成白色背景还是发灰,不知哪位会调

  • 相关阅读:
    selenium+Python(鼠标和键盘事件)
    【Selenium】Option加载用户配置,Chrom命令行参数
    内存管理
    ddt源码修改:HtmlTestRunner报告依据接口名显示用例名字
    面向对象之魔术方法
    高阶函数
    闭包&装饰器
    07课堂问题整理
    05课堂问题整理
    04课堂问题整理
  • 原文地址:https://www.cnblogs.com/zhanyuefeixian/p/11759025.html
Copyright © 2020-2023  润新知