147 lines
3.5 KiB
Vue
147 lines
3.5 KiB
Vue
<template>
|
|
<div class="chart-wrap">
|
|
<Spin size="large" fix :show="loading">
|
|
<slot>
|
|
<SvgIcon name="loading" size="50" color="6280eb" />
|
|
<div class="table-spin-load">加载中</div>
|
|
</slot>
|
|
</Spin>
|
|
<div class="chart-box" v-show="!loading">
|
|
<Tabs type="card" v-model="tabActive" :animated="false" v-if="chartList.length > 0">
|
|
<TabPane v-for="item in chartList" :label="item.title">
|
|
<div class="chart-item" :id="item.id">123</div>
|
|
</TabPane>
|
|
</Tabs>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="ts" setup>
|
|
import { ref, onMounted, watch, nextTick } from "vue";
|
|
import SvgIcon from "@/components/SvgIcon.vue";
|
|
import useCurrentInstance from "@/utils/hook/useCurrentInstance";
|
|
|
|
interface Props {
|
|
chartList: Array<any>;
|
|
loading: boolean;
|
|
}
|
|
|
|
const props = withDefaults(defineProps<Props>(), {
|
|
loading: false,
|
|
});
|
|
|
|
const { $echarts: echarts } = useCurrentInstance();
|
|
const tabActive = ref(0);
|
|
const pieChartColors = ref([
|
|
"#b2aefa",
|
|
"#21b664",
|
|
"#eeb329",
|
|
"#eae213",
|
|
"#20b6ab",
|
|
"#f79854",
|
|
"#ea5e45",
|
|
"#0978c9",
|
|
"#118eea",
|
|
"#68b9f1",
|
|
]);
|
|
|
|
watch(
|
|
() => props.loading,
|
|
(val: boolean) => {
|
|
if (!val) initChart(props.chartList[tabActive.value]);
|
|
},
|
|
{ immediate: true }
|
|
);
|
|
|
|
watch(
|
|
() => tabActive.value,
|
|
(val: number) => {
|
|
initChart(props.chartList[val]);
|
|
}
|
|
);
|
|
|
|
async function initChart(data: any) {
|
|
await nextTick();
|
|
console.log(data);
|
|
var chartDom = document.getElementById(data.id);
|
|
var myChart = echarts.init(chartDom);
|
|
|
|
var titles = data.list.map((x: any) => x.k);
|
|
|
|
var data = data.list.map((x: any) => {
|
|
return {
|
|
value: x.v,
|
|
name: x.k,
|
|
};
|
|
});
|
|
|
|
var option = {
|
|
title: {
|
|
text: data.title,
|
|
x: "center",
|
|
y: "center",
|
|
itemGap: 50,
|
|
textStyle: {
|
|
color: "#666",
|
|
fontSize: 12,
|
|
fontWeight: "normal",
|
|
},
|
|
subtextStyle: {
|
|
color: "#de4751",
|
|
fontSize: 12,
|
|
},
|
|
},
|
|
series: [
|
|
{
|
|
name: "数据来源",
|
|
type: "pie",
|
|
radius: ["50%", "70%"],
|
|
hoverAnimation: false,
|
|
data: data,
|
|
minAngle: 15,
|
|
avoidLabelOverlap: true,
|
|
itemStyle: {
|
|
normal: {
|
|
label: {
|
|
show: true,
|
|
formatter: "{b} \t{c}",
|
|
//formatter: '{b}'
|
|
},
|
|
labelLine: {
|
|
show: true,
|
|
},
|
|
},
|
|
emphasis: {
|
|
shadowBlur: 10,
|
|
shadowOffsetX: 0,
|
|
shadowColor: "rgba(0, 0, 0, 0.5)",
|
|
},
|
|
},
|
|
},
|
|
],
|
|
color: pieChartColors.value,
|
|
};
|
|
// 使用刚指定的配置项和数据显示图表。
|
|
myChart.setOption(option);
|
|
|
|
// option && myChart.setOption(option);
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.chart-wrap {
|
|
// border: solid 1px green;
|
|
position: relative;
|
|
.chart-box {
|
|
height: 100%;
|
|
}
|
|
.chart-item {
|
|
margin-top: 40px;
|
|
height: 300px;
|
|
}
|
|
}
|
|
::v-deep .table-spin-load {
|
|
color: #577afb;
|
|
}
|
|
</style>
|