vue+echarts ② The two echarts charts are in the same row, and the echarts chart is displayed in el-dialog.

1. Two echarts charts are displayed on the same line.

① Rendering

② div style setting: Use a div to wrap the chart, and set the style to float: left; overflow: hidden;

    <div style="width: 50%; float: left; overflow: hidden">
      <div id="echart" style="width: 100%; height: 300px"></div>
    </div>
    <div style="width: 50%; float: left; overflow: hidden">
      <div id="echart1" style="width: 100%; height: 300px"></div>
    </div>

2. Display echarts chart in el-dialog

① Rendering

 ② el-dialog code settings

    <el-dialog title="弹窗展示" :visible.sync="isShow" @open="open()">
      <div id="echart" style="width: 100%; height: 300px"></div>
    </el-dialog>

③ open function settings

    open() {
      this.$nextTick(() => {
        //  执行echarts方法
        this.drawChart();
      });
    },

     drawChart() {
      const myChart = this.$echarts.init(document.getElementById("echart"));
      myChart.setOption(this.option);
    },

Writing a timer here can also achieve the same effect.

    open() {
      setTimeout(() => {
        this.drawChart();
      }, 0);
    },

④ Complete code display

<template>
  <div>
    <el-button @click="isShow = true">展示</el-button>
    <el-dialog title="弹窗展示" :visible.sync="isShow" @open="open()">
      <div id="echart" style="width: 100%; height: 300px"></div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      option: {
        title: {
          text: "测试用例",
          left: "center",
        },
        tooltip: {
          trigger: "item",
        },
        legend: {
          orient: "vertical",
          left: "left",
        },
        series: [
          {
            name: "数量",
            type: "pie",
            radius: "50%",
            data: [
              { value: 1048, name: "测试用例1" },
              { value: 735, name: "测试用例2" },
              { value: 580, name: "测试用例3" },
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
            },
          },
        ],
      },
      isShow: false,
    };
  },
  methods: {
    drawChart() {
      const myChart = this.$echarts.init(document.getElementById("echart"));
      myChart.setOption(this.option);
    },
    open() {
      this.$nextTick(() => {
        //  执行echarts方法
        this.drawChart();
      });
    },
  },
};
</script>

<style scoped lang="less">
</style>