水波图 - 字体设置

2019/10/16 11:36
阅读数 43

效果如下: 可复制代码粘贴到 该地址里看效果: 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="width: 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' } }] }) }

 

展开阅读全文
打赏
0
0 收藏
分享
加载中
更多评论
打赏
0 评论
0 收藏
0
分享
返回顶部
顶部