做一个 使用element 导入json文件生成echarts 关系图 的例子

以下是一个使用element和echarts库创建关系图的例子：

HTML代码：

<template>
  <div>
    <el-upload
      action=""
      :show-file-list="false"
      :before-upload="beforeUpload"
      :on-success="onSuccess"
    >
      <el-button slot="trigger" size="small" type="primary">导入JSON文件</el-button>
    </el-upload>
    <div id="chart" style="height: 500px;"></div>
  </div>
</template>

JS代码：

<script>
import * as echarts from 'echarts';
import { parse } from 'echarts/extension/dataTool';
import { Upload, Button } from 'element-ui';

export default {
  components: {
    'el-upload': Upload,
    'el-button': Button,
  },
  data() {
    return {
      chartData: null,
    };
  },
  methods: {
    beforeUpload(file) {
      const isJson = file.type === 'application/json';
      if (!isJson) {
        this.$message.error('只能上传JSON文件');
        return false;
      }
      return true;
    },
    onSuccess(response) {
      this.chartData = parse(response);
      this.renderChart(this.chartData);
    },
    renderChart(data) {
      const chart = echarts.init(document.getElementById('chart'));

      const options = {
        tooltip: {},
        series: [
          {
            type: 'graph',
            layout: 'force',
            data: data.nodes,
            links: data.links,
            roam: true,
            label: {
              show: true,
              position: 'inside',
            },
            force: {
              repulsion: 100,
              edgeLength: 100,
            },
          },
        ],
      };

      chart.setOption(options);
    },
  },
};
</script>

上述代码中，我们使用了element的上传组件来导入JSON文件，并使用echarts库来创建关系图。beforeUpload方法用于验证上传的文件类型，onSuccess方法在上传成功后将JSON数据解析为echarts需要的格式，并调用renderChart方法来创建关系图。renderChart方法使用echarts的setOption方法来设置图表的选项并绘制图表。