Vue3自定义Echars组件附带全局配置

最新推荐文章于 2024-03-21 11:16:36 发布

Circle_Key

最新推荐文章于 2024-03-21 11:16:36 发布

阅读量659

点赞数 6

文章标签：前端 vue.js javascript

本文链接：https://blog.csdn.net/Circle_Key/article/details/136538512

版权

<template>
  <div ref="chart"  :id="id"  :class="className" :style="{ height: height, width: width }"></div>
</template>

<script setup>
import { ref, reactive, toRefs, onMounted, onBeforeUnmount,watch } from 'vue'
import * as echarts from 'echarts';

// 传递参数
const props = defineProps({
  className: {
      type: String,
      default: 'chart'
    },
    id: {
      type: String,
      default: 'chart'
    },
    width: {
      type: String,
      default: '100%'
    },
    height: {
      type: String,
      default: '280px'
    },
    options: {
      type: Object,
      default: () => { }
    }
})
const chart = ref(null);


const createChart = () => {
  const myChart = echarts.init(chart.value);
  
   chart.value = echarts.init(chart.value, 'tdTheme')
  myChart.setOption(props.options,true);
    //  chart.value.setOption(props.options, true)
    window.addEventListener("resize",  () => {
        chart.value.resize()
      })
};

watch(() => props.options, (options) => {
  if (chart.value) {
    // 设置true清空echart缓存
    chart.value.setOption(options, true)
  }
}, { deep: true })
onMounted(() => {
  createChart();
});
onBeforeUnmount(() => {
  window.removeEventListener("resize", () => {
        chart.value.resize()
      })
  chart.value.dispose()
  chart.value = null
})
</script>

import Echart from './components/echart/index.vue'
import echarts from 'echarts'
const app = createApp(App)

// 将echarts挂载到全局对象上
app.config.globalProperties.$echarts = echarts

// 注册全局组件
app.component('Echart', Echart)

案列

<template>
  <div ref="chart" style="width: 600px; height: 400px;"></div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import * as echarts from 'echarts';

const chart = ref(null);

const createChart = () => {
  const myChart = echarts.init(chart.value);
  myChart.setOption({
    xAxis: {
      type: 'category',
      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {
      type: 'value'
    },
    series: [{
      data: [120, 200, 150, 80, 70, 110, 130],
      type: 'bar'
    }]
  });
};

onMounted(() => {
  createChart();
});
</script>