107 lines
2.1 KiB
Vue
107 lines
2.1 KiB
Vue
|
<template>
|
||
|
|
<div
|
||
|
|
class="charts"
|
||
|
|
ref="chartRef"
|
||
|
|
style="height: 300px; width: 1000px; display: block"
|
||
|
|
></div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script lang="ts" setup>
|
||
|
|
import { ref, onMounted, defineProps, watch } from "vue";
|
||
|
|
import { useStore } from "vuex";
|
||
|
|
import * as echarts from "echarts";
|
||
|
|
import { useRoute, useRouter } from "vue-router";
|
||
|
|
|
||
|
|
const chartRef = ref();
|
||
|
|
let chart = ref(null);
|
||
|
|
const props = defineProps<{
|
||
|
|
chartsData?: any;
|
||
|
|
data?: string;
|
||
|
|
}>();
|
||
|
|
|
||
|
|
const initChart = () => {
|
||
|
|
if (chartRef.value) {
|
||
|
|
chart = echarts.init(chartRef.value);
|
||
|
|
const option = {
|
||
|
|
title: {
|
||
|
|
text: props.chartsData.title,
|
||
|
|
textStyle: {
|
||
|
|
fontSize: 16,
|
||
|
|
color: "rgba(0,0,0,0.9)",
|
||
|
|
lineHeight: 10,
|
||
|
|
},
|
||
|
|
},
|
||
|
|
tooltip: {
|
||
|
|
trigger: "axis",
|
||
|
|
},
|
||
|
|
toolbox: {
|
||
|
|
feature: {
|
||
|
|
dataZoom: {
|
||
|
|
yAxisIndex: "none",
|
||
|
|
title: {
|
||
|
|
zoom: "区域缩放",
|
||
|
|
back: "区域缩放还原",
|
||
|
|
},
|
||
|
|
},
|
||
|
|
},
|
||
|
|
},
|
||
|
|
legend: {
|
||
|
|
data: props.chartsData.legendData,
|
||
|
|
|
||
|
|
padding: 5,
|
||
|
|
},
|
||
|
|
grid: {
|
||
|
|
left: "3%",
|
||
|
|
right: "4%",
|
||
|
|
bottom: "3%",
|
||
|
|
containLabel: true,
|
||
|
|
},
|
||
|
|
|
||
|
|
xAxis: {
|
||
|
|
type: "category",
|
||
|
|
boundaryGap: false,
|
||
|
|
data: props.chartsData.xaxisData,
|
||
|
|
axisLabel: {
|
||
|
|
align: "left",
|
||
|
|
},
|
||
|
|
// nameLocation: "middle",
|
||
|
|
},
|
||
|
|
yAxis: {
|
||
|
|
type: "value",
|
||
|
|
name: props.data,
|
||
|
|
nameLocation: "end",
|
||
|
|
nameTextStyle: {
|
||
|
|
fontSize: 12,
|
||
|
|
color: "rgba(0, 0, 0, 0.40)",
|
||
|
|
align: "right",
|
||
|
|
padding: [10, 6, 7, 10],
|
||
|
|
},
|
||
|
|
},
|
||
|
|
series: props.chartsData.series || [],
|
||
|
|
};
|
||
|
|
// 使用刚指定的配置项和数据显示图表。
|
||
|
|
|
||
|
|
chart.setOption(option);
|
||
|
|
window.addEventListener("resize", () => {
|
||
|
|
chart.resize();
|
||
|
|
});
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
//dom 渲染后钩子
|
||
|
|
// onMounted(() => {
|
||
|
|
// initChart();
|
||
|
|
// });
|
||
|
|
watch(
|
||
|
|
() => props.chartsData,
|
||
|
|
() => {
|
||
|
|
initChart();
|
||
|
|
},
|
||
|
|
{
|
||
|
|
immediate: true,
|
||
|
|
}
|
||
|
|
);
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style lang="scss" scoped></style>
|