vue3封装可以直接调用的echarts

<template>
    	<div
		:id="randomNumber"
		:style="myStyle">  
		 </div>
</template>
<script setup >
import * as echarts from 'echarts';
import {  ref, onMounted, onBeforeMount} from 'vue';
import { chartLineData, } from './charts.js';
const  randomNumber =ref(null)
  onBeforeMount(()=>{
    randomNumber.value = Math.floor(Math.random() * 100000) 
  })
onMounted(() => {
	let myChart = echarts.init(document.getElementById(randomNumber.value));
     //如果传值了 myOption 则用myOption，没有的话就使用chartLineData里面的数据，默认是线性图
	if (JSON.stringify(props.myOption) !== '{}') {
		myChart.setOption(props.myOption);
	}else{
		const myOptions1 = chartLineData
		myOptions1.series[0].data = props.xOption
		myChart.setOption(myOptions1);
	}
	window.addEventListener("resize", function () {
		myChart.resize();
	});
});

const props = defineProps({
	myStyle: {
		default: () => ({
			width: '100%', 
			height: '100%',
		}),
	},
	echartId: {
		default: 'echart',
		type: String
	},
	myOption: {
		default: () => ({}),
		required: true,
	},
	xOption: {
		default: () => ([]),
	},
	insectTitle:{
		default:''
	}
});
</script>

//chartLineData.js 
export const chartLineData = {
  tooltip: {
    trigger: "axis",
    formatter:  function (params) {
      return [
        "时间：" + params[0].name ,
        "产量：" + [params[0].value ? params[0].value +'KG' : "0KG"],
      ].join("<br/>");
    },
  },
  grid: {
    left: '7%',
    right: '5%',
    bottom: '10%',
    top: '10%',
    // grid 区域是否包含坐标轴的刻度标签
    containLabel: false
  },
  title: 
    {
      left: 'center',
      text: ''
    },
  xAxis: { 
    show: true,
    type: 'category',
    data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月','9月','10月','11月','12月',],
    axisTick: {
      show: false
    },
    axisLine: {
      show: true,
    },
    z: 10,
    axisLabel: { // 设置x轴的字
      show: true,
      interval: 0, // 使x轴横坐标全部显示
    },
  },
  yAxis: {

    show: true,
    type: 'value',
    name: '',
    axisLine: {
      show: false
    },
    axisTick: {
      show: false
    },
    splitLine: { // 网格线
      lineStyle: {
        type: 'dotted' // 设置网格线类型 dotted：虚线 solid:实线
      },
      show: false // 隐藏或显示
    },
    axisLabel: {
      // formatter: '{value}级'
    }
  },
  series: [
    {
      data: [140, 232, 101, 264, 90, 340, 250,61,50,41,80,100],
      type: 'line',
      symbol: "none",
      smooth: true,
      itemStyle: {
        color: '#88CFB9' // 修改线条颜色为红色（十六进制）
    },
      areaStyle: {
        // 区域背景色
        color: {
          type: 'linear',
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [
            {
              offset: 0,
              color: "#fff",
            },
            // {
            //   offset: 0.18,
            //   color: "#1792BB",
            // },
            // {
            //   offset: 0,
            //   color: "#27A8CD",
            // },
            {
              offset: 1,
              color: '#88CFB9',
            },
          ],
          global: false,
        },
      },
    },
  ]
};

      //页面使用 默认线性 
 <div class="lcsonecharts1">
              <lineEchart
              //  v-if="xOption.length != 0" //请求数据的话可以开启
                :myOption="{}"
                :xOption="[140, 232, 101, 264, 90, 340, 250,61,50,41,80,100]"
                :myStyle="{ width: '100%', height: '100%' }"
              >
              </lineEchart>
            </div>