echarts 水球图
下面介绍为vue-cli开发环境下
npm下载
npm install echarts --save
npm install echarts-liquidfill --save
按需加载,在所需的组件内引入
import echarts from "echarts";
import "echarts-liquidfill"; //在这里引入
组件代码如下(此处为8个水球图并存的页面)
<template>
<el-row>
<el-col>
<div
:class="className"
:style="{ height: height, width: width }"
ref="water"
/>
</el-col>
</el-row>
</template>
<script>
import echarts from "echarts";
import "echarts-liquidfill"; //在这里引入
export default {
props: {
className: {
type: String,
default: "chart",
},
width: {
type: String,
default: "100%",
},
height: {
type: String,
default: "300px",
},
waterData: {
type: Array,
},
waterDataColor: {
type: Array,
},
},
data() {
return {
chart: null,
data: [],
};
},
beforeDestroy() {
if (!this.chart) {
return;
}
this.chart.dispose();
this.chart = null;
},
// 写watch监听父页面向本组件传递过来的值,改动之后
// 重新调用this.initWater()渲染视图数据
watch: {
waterData(curVal, oldVal) {
if (curVal) {
this.waterData = curVal;
this.waterData.forEach((item) => {
return this.data.push(item.inRate);
});
this.$nextTick(() => {
this.initWater();
});
}
},
},
created() {
},
methods: {
initWater() {
this.chart = echarts.init(this.$refs.water);
this.chart.setOption({
title: [
{
text: "1号仓库",
x: "20%",
y: 120,
textAlign: "center",
textStyle: {
fontSize: "13",
fontWeight: "100",
color: "#b6b5b5",
textAlign: "center",
},
},
{
text: "2号仓库",
x: "40%",
y: 120,
textAlign: "center",
textStyle: {
fontSize: "13",
fontWeight: "100",
color: "#b6b5b5",
textAlign: "center",
},
},
{
text: "3号仓库",
x: "60%",
y: 120,
textAlign: "center",
textStyle: {
fontSize: "13",
fontWeight: "100",
color: "#b6b5b5",
textAlign: "center",
},
},
{
text: "4号仓库",
x: "80%",
y: 120,
textAlign: "center",
textStyle: {
fontSize: "13",
fontWeight: "100",
color: "#b6b5b5",
textAlign: "center",
},
},
{
text: "5号仓库",
x: "20%",
y: 270,
textAlign: "center",
textStyle: {
fontSize: "13",
fontWeight: "100",
color: "#b6b5b5",
textAlign: "center",
},
},
{
text: "6号仓库",
x: "40%",
y: 270,
textAlign: "center",
textStyle: {
fontSize: "13",
fontWeight: "100",
color: "#b6b5b5",
textAlign: "center",
},
},
{
text: "7号仓库",
x: "60%",
y: 270,
textAlign: "center",
textStyle: {
fontSize: "13",
fontWeight: "100",
color: "#b6b5b5",
textAlign: "center",
},
},
{
text: "8号仓库",
x: "80%",
y: 270,
textAlign: "center",
textStyle: {
fontSize: "13",
fontWeight: "100",
color: "#b6b5b5",
textAlign: "center",
},
},
],
// 鼠标滑入提示
tooltip: {
show: true,
},
series: [
{
type: "liquidFill",
radius: "37%",
z: 6,
center: ["20%", "20%"], //此处为图形X轴相距数据
color: this.waterDataColor,
data: [this.data[0], {
value: this.data[0], direction: "right" }], //第一个参数控制容器内满溢程度(最大为1)
backgroundStyle: {
borderWidth: 1 },
label: {
fontSize: 18 }, //图内百分比值文本大小
name: "1号仓库", //鼠标滑入提示文本
outline: {
show: true,
itemStyle: {
borderWidth: 1, borderColor: this.waterDataColor[1] },
borderDistance: 0,
},
waveAnimation: true, // 禁止左右波动
},
{
type: "liquidFill",
radius: "37%",
z: 6,
center: ["40%", "20%"],
color: this.waterDataColor,
data: [this.data[1], {
value: this.data[1], direction: "left" }],
backgroundStyle: {
borderWidth: 1 },
label: {
fontSize: 18 },
name: "2号仓库",
outline: {
show: true,
itemStyle: {
borderWidth: 1, borderColor: this.waterDataColor[1] },
borderDistance: 0,
},
},
{
type: "liquidFill",
radius: "37%",
z: 6,
center: ["60%", "20%"],
color: this.waterDataColor,
data: [this.data[2], {
value: this.data[2], direction: "right" }],
backgroundStyle: {
borderWidth: 1 },
label: {
fontSize: 18 },
name: "3号仓库",
outline: {
show: true,
itemStyle: {
borderWidth: 1, borderColor: this.waterDataColor[1] },
borderDistance: 0,
},
},
{
type: "liquidFill",
radius: "37%",
z: 6,
center: ["80%", "20%"],
color: this.waterDataColor,
data: [this.data[3], {
value: this.data[3], direction: "left" }],
backgroundStyle: {
borderWidth: 1 },
label: {
fontSize: 18 },
name: "4号仓库",
outline: {
show: true,
itemStyle: {
borderWidth: 1, borderColor: this.waterDataColor[1] },
borderDistance: 0,
},
},
{
type: "liquidFill",
radius: "37%",
z: 6,
center: ["20%", "70%"],
color: this.waterDataColor,
data: [this.data[4], {
value: this.data[4], direction: "right" }],
backgroundStyle: {
borderWidth: 1 },
label: {
fontSize: 18 },
name: "5号仓库",
outline: {
show: true,
itemStyle: {
borderWidth: 1, borderColor: this.waterDataColor[1] },
borderDistance: 0,
},
},
{
type: "liquidFill",
radius: "37%",
z: 6,
center: ["40%", "70%"],
color: this.waterDataColor,
data: [this.data[5], {
value: this.data[5], direction: "left" }],
backgroundStyle: {
borderWidth: 1 },
label: {
fontSize: 18 },
name: "6号仓库",
outline: {
show: true,
itemStyle: {
borderWidth: 1, borderColor: this.waterDataColor[1] },
borderDistance: 0,
},
},
{
type: "liquidFill",
radius: "37%",
z: 6,
center: ["60%", "70%"],
color: this.waterDataColor,
data: [this.data[6], {
value: this.data[6], direction: "left" }],
backgroundStyle: {
borderWidth: 1 },
label: {
fontSize: 18 },
name: "7号仓库",
outline: {
show: true,
itemStyle: {
borderWidth: 1, borderColor: this.waterDataColor[1] },
borderDistance: 0,
},
},
{
type: "liquidFill",
radius: "37%",
z: 6,
center: ["80%", "70%"],
color: this.waterDataColor,
data: [this.data[7], {
value: this.data[7], direction: "right" }],
backgroundStyle: {
borderWidth: 1 },
label: {
fontSize: 18 },
name: "8号仓库",
outline: {
show: true,
itemStyle: {
borderWidth: 1, borderColor: this.waterDataColor[1] },
borderDistance: 0,
},
},
],
});
},
},
};
</script>