<!--
* @Description:
* @Version: 1.0
* @Author:
* @Date: 2022-09-15 14:56:15
-->
<template>
<div :id="chartRef" :style="{ width: '100%', height: '100%' }"></div>
</template>
<script lang="ts" setup>
import { ref, reactive, onMounted, watch, computed, toRefs } from "vue";
import * as echarts from "echarts";
import { uuid } from "vue-uuid";
const props = defineProps({
xaxisData: {
type: Array,
},
yaxisData: {
type: Array,
},
});
const chartRef = ref<any>(1);
chartRef.value = uuid.v1().replace(/-/g, "");
const setOptions = computed(() => {
let option = {
tooltip: {
trigger: "axis",
},
yAxis: {
type: "value",
},
xAxis: {
type: "category",
data: props.xaxisData,
},
series: props.yaxisData,
};
return option;
});
var BarChart: echarts.ECharts;
function initChart() {
BarChart.dispose();
BarChart = echarts.init(
document.getElementById(chartRef.value) as HTMLElement
);
BarChart.setOption(setOptions.value);
document.getElementById(chartRef.value).onresize = function () {
BarChart.resize();
};
}
onMounted(() => {
BarChart = echarts.init(
document.getElementById(chartRef.value) as HTMLElement
);
initChart();
});
watch([props], () => {
initChart();
});
</script>
<style scoped></style>
vue3中使用echarts,动态更新X、Y轴数据
最新推荐文章于 2024-06-11 15:55:14 发布