⽔波图-字体设置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" ></div>
调⽤⽅法：
this.drawChart2('Unissued', [0.4])
⽅法：
drawChart2 (id, data) {
let _echarts = echarts.ElementById(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
},
fontweight默认值
outline: {
show: true,
borderDistance: 1,
itemStyle: {
borderColor: '#1890FF',                borderWidth: 2
}
},
backgroundStyle: {
color: '#fff'
}
}]
})
}

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。