简单封装echarts组件

1：react项目

import React, { useRef, useEffect } from "react";

function EchartsReact(props) {
  const echarts = require("echarts");
  const myChart = useRef();
  const maindiv = useRef();
  let { option,loading } = props;
  useEffect(() => {
      maindiv.current.style.width = "400px";
	  maindiv.current.style.height = "400px";
    // 基于准备好的dom，初始化echarts实例
    myChart.current = echarts.init(maindiv.current);
    myChart.current.setOption(option);
  }, []);

useEffect(() => {
  myChart.current.setOption(option);
}, [option]);

useEffect(() => {
  if (props.loading) {
    myChart.current.showLoading();
  } else {
    myChart.current.hideLoading();
  }
}, [loading]);

return (
  <div>
    <h2>EchartsReact</h2>
    <div ref={maindiv} ></div>
  </div>
);
}
export default EchartsReact;

2：vue项目：

    <template>
        <div ref="div1"></div>//展示图表的容器
    </template>
    
    <script lang="js">
    
        const echarts = require("echarts");//引入echarts，使用import也行

	 export default {
        name:'VueEchart',
        props:["option","loading"],//接收配置option，以及是否显示loading
        mounted(){
          this.$refs.div1.style.width = '400px'
          this.$refs.div1.style.height = '400px'
          this.echart = echarts.init(this.$refs.div1)//初始化
          this.echart.setOption(this.option)
        },
        watch:{
          option(){
            this.echart.setOption(this.option)//监听数据，当数据发生变化时，图表改变
          },
          loading(){//是否显示loading
            if(this.loading){
              this.echart.showLoading()
            }else{
              this.echart.hideLoading()
            }
          }
        }
      }
    </script>