<template>
<div class="lineareaChat"></div>
</template>
<script>
export default {
data() {
return {};
},
methods: {
setChart() {
let option = {
title: {
text: "30",
textStyle: {
color: "#01c4a3",
fontSize: 70,
},
subtext: "入库30件",
subtextStyle: {
color: "#909090",
fontSize: 20,
},
itemGap: 2, // 主副标题距离
left: "center",
top: "38%",
},
legend: {
left: "38%",
bottom: "15%",
textStyle: {
color: "#00CCFF",
fontSize: 24,
},
},
tooltip: {
trigger: "item",
},
angleAxis: {
max: 100,
clockwise: false, // 逆时针
// 隐藏刻度线
axisLine: {
show: false,
},
axisTick: {
show: false,
},
axisLabel: {
show: false,
},
splitLine: {
show: false,
},
},
radiusAxis: {
type: "category",
axisLine: {
show: false,
},
axisTick: {
show: false,
},
axisLabel: {
show: false,
},
splitLine: {
show: false,
},
},
polar: {
center: ["50%", "48%"],
radius: "118%", //图形大小
},
series: [
{
type: "bar",
name: "管材",
data: [
{
name: "管材",
value: 60,
itemStyle: {
normal: {
color: "#33c481",
},
},
},
],
coordinateSystem: "polar",
roundCap: true,
barWidth: 21,
barGap: "-100%", // 两环重叠
z: 2,
itemStyle: {
color: "#33c481",
},
},
{
// 灰色环
type: "bar",
data: [
{
value: 100,
itemStyle: {
color: "#e2e2e2",
shadowColor: "rgba(0, 0, 0, 0.2)",
shadowBlur: 5,
shadowOffsetY: 2,
},
},
],
coordinateSystem: "polar",
roundCap: true,
barWidth: 21,
barGap: "-100%", // 两环重叠
z: 1,
},
],
};
let myChart = this.$echarts(this.$el);
myChart.clear();
myChart.resize();
myChart.setOption(option);
},
},
mounted() {
this.setChart();
},
};
</script>
<style lang="less" scoped>
.lineareaChat {
width: 100%;
height: 100%;
}
</style>