最近ui设计了水球图,然后第一眼看着没有做过,所以感觉不好实现,但是做的时候,网上一查发现有相似案例,就找到了 专门的插件,先上最终页面图。
先安装插件(此插件也需要eachars,不过这里不做介绍)
npm install echarts npm install echarts-liquidfill
官方github:
看官方介绍需要注意:
echarts-liquidfill和eachars的不同版本兼容问题!!!!!!!!!!
引入eachars时候,官方给了两种方式
此处注意——————————————————————————> 坑
我第一次引入方式为
import * as echarts from 'echarts';
页面不报错,但是始终没有数据,所有代码检查几遍,最后尝试引入方式改成下面带有core那种,结果竟然可以了
import * as echarts from 'echarts/core';
import 'echarts-liquidfill';
HTML代码:
<template>
<div class="material-count">
<item-title :titleText="'今日料量统计'" :moreText="'单位(吨)'"></item-title>
<div class="material-count-main">
<div class="mmc-chart" ref="chart"></div>
</div>
</div>
</template>
js:
export default Vue.extend({
name: 'MaterialCount',
data() {
return {
myChart: null,
option: {},
};
},
components: { ItemTitle },
mounted() {
this.getEchartData();
},
methods: {
getEchartData() {
const { chart }: any = this.$refs;
if (chart) {
const myChart = echarts.init(chart);
const option = {
series: [
{
type: 'liquidFill',
data: [0.43],//水球的数据
radius: '95%',//水球的实际大小,如果不写会比容器小很多
name: '剩余',
backgroundStyle: {
color: '#32525C',//没有水球的背景颜色
},
label: {
normal: {
formatter() {
return '剩余86吨';//中间数据
},
color: '#FFFFFF ',
insideColor: '#fff',
textStyle: {
fontSize: 16,
fontWeight: 'bold',
fontFamily: 'SourceHanSansCN-Regular',
},
},
},
color: [
{
type: 'linear',
x: 0,
y: 1,
x2: 0,
y2: 0,
colorStops: [
{
offset: 1,
color: ['#326872'], // 0% 处的颜色
},
{
offset: 0,
color: ['#3BE7EC'], // 100% 处的颜色
},
],
global: false, // 缺省为 false
},
],
outline: {
show: true,
radius: '80%',
borderDistance: 5,
itemStyle: {
borderColor: '#4381DC',
borderWidth: 5,
},
},
},
],
};
myChart.setOption(option, true);
}
},
},
});