zoukankan      html  css  js  c++  java
  • 水波图

    效果如下: 可复制代码粘贴到 该地址里看效果: https://gallery.echartsjs.com/editor.html?c=xQO4HL3lp2

    var arrVal = [0.26]
    option = {
        title: {
            top: '33%',
            left: 'center',
            text: '剩余未发',
            textStyle: {
                color: 'rgba(0, 0, 0, 0.45)',
                fontWeight: 'normal',
                fontSize: 14
            },
            subtext: arrVal[0],
            subtextStyle: {
                color: 'rgba(0, 0, 0, 0.85)',
                fontSize: 18,
            }
        },
        series: [{
            type: 'liquidFill',
            radius: '90px',
            data: arrVal,
            color: ['#1890FF'], // 水波颜色
            label: {
                show: false
            },
            outline: {
                show: true,
                borderDistance: 1,
                itemStyle: {
                    borderColor: '#1890FF',
                    borderWidth: 2
                }
            },
            backgroundStyle: {
                color: '#fff' // 球内背景色
            }
        }]
    };

     vue 使用方式:

    那么如何引入vue项目,博主默认查阅本文的访客已在项目中安装了Echarts:

    1)项目中作为项目依赖,安装到项目当中

    npm install echarts-liquidfill --save

    2)在需要使用水晶球的组件或页面里引入liquidFill.js

    import 'echarts-liquidfill/src/liquidFill.js'; //在这里引入

    html: 

    <!-- 剩余未发 -->
    <div id="Unissued" style=" 120px; height:130px;"></div>
      调用方法:  
      this.drawChart2('Unissued', [0.4])
    方法: 
    drawChart2 (id, data) { let _echarts
    = echarts.init(document.getElementById(id)) _echarts.setOption({ title: { top: '33%', left: 'center', text: '剩余未发', textStyle: { color: 'rgba(0, 0, 0, 0.45)', // fontWeight: 'normal', fontSize: 14 }, subtext: data[0], subtextStyle: { color: 'rgba(0, 0, 0, 0.85)', fontSize: 18 } }, series: [{ type: 'liquidFill', radius: '90px', data: data, color: ['#1890FF'], label: { show: false }, outline: { show: true, borderDistance: 1, itemStyle: { borderColor: '#1890FF', borderWidth: 2 } }, backgroundStyle: { color: '#fff' } }] }) }
  • 相关阅读:
    10-22 训练 T2 plate
    C语言I博客作业03
    c语言I博客作业02
    数学的数字
    javascript 递归
    WEB 动画的一些实现方式
    javascript 中Object一些高效的操作方法
    javascript 中Array一些高效的操作方法
    mac os 的一些命令
    javascript 继承
  • 原文地址:https://www.cnblogs.com/zhaoxiaobei/p/11684505.html
Copyright © 2011-2022 走看看