在Vue中使用echarts弹窗

前言：

需要做的效果是，点击一个事件，弹出弹窗，弹窗中显示柱状图。

问题：

我的做法是在index.vue文件中写点击事件，然后调用子组件./components/ProgressDialog.vue，并且在ProgressDialog中渲染echart。结果发现打开弹窗，图表效果并没有加载出来。

原因：

点击事件一触发，就会更改弹窗的visible状态为true，而此时弹窗里的内容还没有渲染到dom。

解决方法：

将echart内容写在一个子组件中，在ProgressDialog中调用，发现可以成功渲染图表。

index.vue

<template>
  <h-page-content>
    <el-button type="link" @click="speedQuery(scope.row)">进度查询</el-button>
    <!-- 进度查询弹窗 -->
    <ProgressDialog ref="Progress" :visible.sync="dialogVisible" />
  </h-page-content>
</template>

<script>
import ProgressDialog from './components/ProgressDialog'

export default {
  components: { ProgressDialog },
  data() {
    return {
      dialogVisible: false,
    }
  },
  methods: {
    speedQuery(row) {
      this.dialogVisible = true
      this.$refs.Progress.fetchDetail(row)
    },
  },
}
</script>

ProgressDialog.vue

<template>
  <el-dialog title="进度查询" :visible.sync="showDialog" :area="[960, 640]">
    <Echart ref="content" />
    <span slot="footer" class="dialog-footer">
      <el-button type="primary" @click="showDialog = false">确定</el-button>
      <el-button @click="showDialog = false">取消</el-button>
    </span>
  </el-dialog>
</template>

<script>
import api from '@/actions/api'
import Echart from './Echart.vue'

export default {
  name: 'ProgressDialog',
  components: {
    Echart,
  },
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      showDialog: false,
    }
  },
  watch: {
    visible(val) {
      this.showDialog = val
    },
    showDialog(val) {
      this.$emit('update:visible', val)
    },
  },
  methods: {
    fetchDetail(row) {
      api
        .getArrangeProgress({
          arrangeId: row.id,
        })
        .then(res => {
          const { code, data } = res
          if (Number(code) !== 0 || !data) {
            return
          }
          this.$refs.content && this.$refs.content.init(data)
        })
    },
  },
}
</script>

Echart.vue

<template>
  <div id="barChart" style="width: 940px; height: 420px"></div>
</template>

<script>
const option = {
  ...
}

export default {
  name: 'Echart',
  data() {
    return {
      charts: null,
    }
  },
  methods: {
    init(data) {
      this.charts = this.$echarts.init(document.getElementById('barChart'))
      // 使用指定的配置项和数据显示图表
      option.xAxis.data = data.colleges || []
      option.series[0].data = data.percentages || []
      this.charts.setOption(option)
    },
  },
}
</script>

echarts图表库https://echarts.apache.org/examples/zh/index.html