js版本

HTML

<div id="myChart"></div>

javaScript

//防止出现 echarts.js:28681 There is a chart instance already initialized on the dom. 警告
if (myEcharts != null && myEcharts != "" && myEcharts != undefined) {
  myEcharts.dispose();
};
// 初始化
let myEcharts = echarts.init(document.querySelector('#myChart'));
//显示加载动画（ 根据需求自行添加 ）
myEcharts.showLoading({
  text: '加载中...',
  color: '#c23531',
  textColor: '#fff',
  maskColor: 'transparent',
});

//装载配置项
let option = {};  // 请参考tab页的 Option配置，直接替换即可。
myEcharts.setOption(option, true);

//清除点击事件防止多次触发
myEcharts.off("click");

//图谱点击事件绑定
myEcharts.on("click", param => {
  //做一些逻辑处理事件
  console.log(param);
});

//监听浏览器窗口变化 自适应 注意：只在浏览器窗口发生改变时才会触发
window.addEventListener("resize", () => {
  myEcharts.resize();
});

//关闭加载动画（ 根据需求自行添加 ）
myEcharts.hideLoading();

vue版本

<template>
  <div class="chart" ref="chart"></div>
  <!-- <div class="chart" :style="{height:height+'px',width:'100%'}" ref="chart"></div> -->
</template>

<script>
export default {
  name: "chart",
  data: () => ({
    myEcharts: null,
    height: 520,
  }),
  // 使用 props 传参
  props: ["content"],
  watch: {
    content(val) {
      if (!this.myEcharts) {
        this.$nextTick(() => {
          this.showLoading("加载中...", true, "#2d8cf0");
          if (val && val.show) {
            this.setChart();
          } else {
            this.showLoading("暂无数据", false, "#666");
          }
        });
      }
    }
  },
  mounted() {
    // this.setHeight();
    this.$nextTick(() => {
      if (!this.myEcharts) {
        this.myEcharts = this.$echarts.init(this.$refs.chart);
        this.setChart();
        //监听窗口变化 自适应（ 根据需求自行添加 ）
        window.addEventListener("resize", this.resize, true);
      }
    });
  },
  methods: {
    showLoading(text, showSpinner, textColor) {
      //显示加载动画（ 根据需求自行添加 ）
      this.myEcharts.showLoading({
        text,
        showSpinner,
        color: "#2d8cf0",
        textColor,
        // maskColor: "#2d8cf0",
      });
    },
    setChart() {
      if (this.content) {
        let option = {};

        // 将 option 注册到 echarts 中
        this.myEcharts.setOption(option, true);

        // 添加点击事件（ 根据需求自行添加 ）
        this.myEcharts.off("click");
        this.myEcharts.on("click", (param) => {
          //根据需求做逻辑处理
          // console.log(param);
        });

        //隐藏动画效果（ 根据需求自行添加 ）
        this.myEcharts.hideLoading();
      }
    },
    // setHeight() {
    //   this.height =
    //     document.body.clientHeight || document.documentElement.clientHeight;
    // },
    resize() {
      //   this.setHeight();
      this.myEcharts.resize();
    },
  },

  beforeDestroy() {
    if (this.myEcharts) {
      window.removeEventListener("resize", this.resize, true);
      this.myEcharts.clear();
      this.myEcharts.dispose();
    }
  }
};
</script>

<style lang="scss" scoped>
.chart {
  height: 600px;
  width: 100%;
}