1.Liquidfill.vue
<template>
<div class="yh-liquidfill"></div>
</template>
<script>
function _update(chart, v) {
var p = Math.max(0, Math.min(v, 1));
var second = p > 0.1 ? p : p - 0.05;
chart.setOption({
series: [
{
name: "liquidFill",
data: [p, second]
}
]
});
}
export default {
name: "YhLiquidfille",
data() {
return {
value: 0
};
},
props: ["init", "color", "size"],
watch: {
value(v) {
_update(this.$chart, v);
}
},
methods: {},
mounted() {
var chart = echarts.init(this.$el);
var wcolor = ["#663300", "#ffcc99"];
var bdcolor = "#663300";
var lcolor = "#663300";
var bgcolor = "#e3e7ff";
var c = this.color;
if (c) {
wcolor = c.wave || wcolor;
bdcolor = c.border || bdcolor;
lcolor = c.label || lcolor;
bgcolor = c.background || bgcolor;
}
var option = {
series: [
{
type: "liquidFill",
name: "liquidFill",
color: wcolor,
outline: {
show: true,
borderDistance: 8,
itemStyle: {
color: "none",
borderColor: bdcolor,
borderWidth: 8,
shadowBlur: 20,
shadowColor: "rgba(0, 0, 0, 0.25)"
}
},
backgroundStyle: {
color: bgcolor
},
label: {
color: lcolor
},
data: []
}
]
};
chart.setOption(option);
var v = this.init;
if (this.init) {
this.value = v;
}
this.$chart = chart;
}
};
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>
2.LiquidfillDemo.vue
<template>
<div class="yh-page">
<h1>水球图演示</h1>
<div class="desc">Demo源代码:
<code>/examples/components/modules/LiquidfillDemo.vue</code>
</div>
<div style="margin-top:20px;width:400px;">
<el-form label-width="80px">
<el-form-item label="百分比">
<el-input v-model="value" type="number" value="0.6" min="0" max="1" @change="onChange"></el-input>
</el-form-item>
</el-form>
</div>
<yh-liquidfill :init="0.6" ref="lf" :color="color"></yh-liquidfill>
</div>
</template>
<script>
import liquidfill from "../../components/comcompont/echarts/Liquidfill";
export default {
name: "LiquidfillDemo",
data() {
return {
value: 0.6,
color: {
wave: ["#036", "#069"],
border: "#036",
label: "#06c",
background: "#cff"
}
};
},
methods: {
onChange() {
this.$refs.lf.value = this.value;
}
},
components: {
"yh-liquidfill": liquidfill
}
};
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scope>
</style>