vue3中使用echarts，动态更新X、Y轴数据

最新推荐文章于 2024-06-11 15:55:14 发布

Cupid510

最新推荐文章于 2024-06-11 15:55:14 发布

阅读量2.7k

点赞数 1

分类专栏： vue 文章标签： echarts javascript vue.js

本文链接：https://blog.csdn.net/weixin_44283432/article/details/127076337

版权

vue 专栏收录该内容

76 篇文章 3 订阅

订阅专栏

在这里插入图片描述

<!--
 * @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>