vue3+TS echarts分装

<!--echarts图-->
<template>
  <div style="width:100%;height:100%;margin-top:10px" class="container" :id="container" :ref="container"></div>
</template>

<script lang="ts" setup>
import { reactive, watch, nextTick, markRaw, } from "vue";
import * as charts from "echarts";

const props = defineProps({
  options: {
    type: Object,
    require: true,
  },
  isFirst: {
    type: Boolean,
    default: false,
  },
  container: {
    type: String,
    default: "container",
  },
  isClick: {
    type: Boolean,
    default: false,
  },
  clickOb:{
    type:Function,
    default:null
  }
});
const Aecharts: any = reactive({ value: "" });
let eConsole = (params: any) => {
  props.clickOb&&props.clickOb(true,params)
}
let zConsole = (params: any) => {
  props.clickOb&&props.clickOb(false,params)
}
watch(
  () => props.options,
  (newval) => {
    changeEcharts(props.options);
  },
  {
    deep: true,
  }
);

//鼠标移入显示隐藏的文字
const extension = (myChart:any) => {
  var elementDiv = document.getElementById('extension')
  if (!elementDiv) {
    var div = document.createElement('div')
    div.setAttribute('id', 'extension')
    div.style.display = 'block'
    let e:any = document.querySelector('html')
    e.appendChild(div)
  }
  myChart.on("mouseover", function(params) {
    if (params.componentType == "yAxis") {
      var elementDiv:any = document.querySelector("#extension");
      //设置悬浮文本的位置以及样式
      var elementStyle = 'position: absolute;z-index: 99999;color: #666;' +
        'font-size: 13px;padding: 0.5%;display: inline;border-radius: 4px;' +
        'background-color: #fff;box-shadow: rgba(0, 0, 0, 0.3) 2px 2px 8px'
      elementDiv.style.cssText = elementStyle
      elementDiv.innerHTML = params.value
      let e:any = document.querySelector('html')
      e.onmousemove = function (event) {
        var elementDiv:any = document.querySelector('#extension')
        var xx = event.pageX + 10
        var yy = event.pageY - 30
        elementDiv.style.top = yy + 'px'
        elementDiv.style.left = xx + 'px'
      }
    }
  });
  myChart.on("mouseout", function(params) {
    //注意这里，我是以X轴显示内容过长为例，如果是y轴的话，需要改为yAxis
    if (params.componentType == "yAxis") {
      var elementDiv:any = document.querySelector("#extension");
      elementDiv.style.cssText = "display:none";
    }
  });
}

const changeEcharts = (options: any) => {
  Aecharts.value.setOption(options);
  window.addEventListener("resize", function () {
    Aecharts.value.resize(); //图表自适应的一个方法
  });
  extension(Aecharts.value);


  if (props.isFirst) {
    let index = 0;
    Aecharts.value.dispatchAction({
      type: "highlight",
      seriesIndex: 0,
      dataIndex: 0,
    });
    Aecharts.value.on("mouseover", (e: any) => {
      if (e.dataIndex !== index) {
        Aecharts.value.dispatchAction({
          type: "downplay",
          seriesIndex: 0,
          dataIndex: index,
        });
      }
    });
    Aecharts.value.on("mouseout", (e: any) => {
      index = e.dataIndex;
      Aecharts.value.dispatchAction({
        type: "highlight",
        seriesIndex: 0,
        dataIndex: e.dataIndex,
      });
    });
  }
  if (props.isClick) {
    Aecharts.value.on("click", eConsole);//鼠标移入
    Aecharts.value.on("dblclick", zConsole);//鼠标移出
  }
};
watch(
  () => props.container,
  (newval) => {
    nextTick(() => {
      let op = reactive({ value: document.getElementById(newval) });
      if (op.value) {
        Aecharts.value = markRaw(charts.init(op.value));//初始化图表
      }
      changeEcharts(props.options);
    });
  },
  {
    // deep: true,
    immediate: true,
  }
);
</script>

调用

<div style="width: 33%;height: 76vh;float: left;padding: 0 0.5%;">
      <div style="height: 75vh;width: 100%;border: 1px solid rgba(0, 0, 0, 0.3);">
        <myEcharts container="allContainer" :options="allOption"></myEcharts>
      </div>
    </div>



let yName = ref<any>([])
let allData = ref<any>([])
let allOption = ref({
  title: {
    text: '医院手术占比排名'
  },
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'shadow'
    },
    // formatter: "{a} <br/>{b} : {c}%"
  },
  toolbox: {
    feature: {
      dataView: { show: true, readOnly: false },
      magicType: { show: true, type: ['line', 'bar'] },
      saveAsImage: { show: true }
    }
  },
  legend: {},
  grid: {
    left: '1%',
    right: '8%',
    bottom: '8%',
    containLabel: true
  },
  xAxis: {
    type: 'value',
    // boundaryGap: [0, 0.01]
  },
  yAxis: {
    type: 'category',
    data: yName,
    // inverse:true//设置从上往下还是从下网上

    //设置坐标名超过10个字符隐藏，鼠标放入显示
    triggerEvent: true,
    axisLabel: {
      interval: 0,
      // rotate: 40,
      formatter: function (value) {
        if (value.length > 10) {
          return `${value.slice(0, 10)}...`;
        }
        return value;
      }
    }

  },
  series: [
    {
      name: '手术占比',
      type: 'bar',
      data: allData,
    },
  ]
})