Vue3添加ECharts5

1 （推荐）添加ECharts5代码利用Vue3.2版本之后提供的<script setup>语法

单文件组件<script setup>语法参考

（1）第一种写法

<template>
  <div class="bar">
    <h1>bar</h1>
    <div ref="chart" style="height: 500px; width: 500px"></div>
    <div>这是一个图表</div>
  </div>
</template>

<script setup>
import {
    
     ref, onMounted } from "vue";
import * as echarts from "echarts";

const chart = ref();
onMounted(() => {
    
    
  // 基于准备好的dom，初始化echarts实例
  var myChart = echarts.init(chart.value);

  // 指定图表的配置项和数据
  var option = {
    
    
    title: {
    
    
      text: "ECharts 入门示例",
    },
    tooltip: {
    
    },
    legend: {
    
    
      data: ["销量"],
    },
    xAxis: {
    
    
      data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"],
    },
    yAxis: {
    
    },
    series: [
      {
    
    
        name: "销量",
        type: "bar",
        data: [5, 20, 36, 10, 10, 20],
      },
    ],
  };

  // 使用刚指定的配置项和数据显示图表。
  myChart.setOption(option);
});
</script>

<style>
</style>;

（2）第二种写法

<template>
  <div class="bar">
    <h1>bar</h1>
    <div ref="chart" style="height: 500px; width: 500px"></div>
    <div>这是一个图表</div>
  </div>
</template>

<script setup>
import {
    
     ref, onMounted } from "vue";
import * as echarts from "echarts";

const chart = ref();
// 指定图表的配置项和数据
var option = {
    
    
  title: {
    
    
    text: "ECharts 入门示例",
  },
  tooltip: {
    
    },
  legend: {
    
    
    data: ["销量"],
  },
  xAxis: {
    
    
    data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"],
  },
  yAxis: {
    
    },
  series: [
    {
    
    
      name: "销量",
      type: "bar",
      data: [5, 20, 36, 10, 10, 20],
    },
  ],
};
onMounted(() => {
    
    
  // 基于准备好的dom，初始化echarts实例
  var myChart = echarts.init(chart.value);
  // 使用刚指定的配置项和数据显示图表。
  myChart.setOption(option);
});
</script>

<style>
</style>;

2 添加ECharts5代码利用Vue3版本提供的setup语法（defineComponent语法）

（1）第一种写法

<template>
  <div ref="chart" :style="{ width: '500px', height: '500px' }"></div>
</template>

<script >
import {
    
     onMounted, ref, defineComponent } from "vue";
import * as echarts from "echarts";
export default defineComponent({
    
    
  name: "Map",
  setup() {
    
    
    const chart = ref();
    onMounted(() => {
    
    
      // 基于准备好的dom，初始化echarts实例
      const mychart = echarts.init(chart.value);
      // 指定图表的配置项和数据
      var option = {
    
    
        title: {
    
    
          text: "ECharts 入门示例",
        },
        tooltip: {
    
    },
        legend: {
    
    
          data: ["销量"],
        },
        xAxis: {
    
    
          data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"],
        },
        yAxis: {
    
    },
        series: [
          {
    
    
            name: "销量",
            type: "bar",
            data: [5, 20, 36, 10, 10, 20],
          },
        ],
      };
      mychart.setOption(option);
    });
    return {
    
     chart };
  },
});
</script>

（2）第2种写法

<template>
  <div ref="chart" :style="{ width: '500px', height: '500px' }"></div>
</template>

<script >
import {
    
     onMounted, ref, defineComponent } from "vue";
import * as echarts from "echarts";
export default defineComponent({
    
    
  name: "Map",
  setup() {
    
    
    const chart = ref();

    // 指定图表的配置项和数据
    var option = {
    
    
      title: {
    
    
        text: "ECharts 入门示例",
      },
      tooltip: {
    
    },
      legend: {
    
    
        data: ["销量"],
      },
      xAxis: {
    
    
        data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"],
      },
      yAxis: {
    
    },
      series: [
        {
    
    
          name: "销量",
          type: "bar",
          data: [5, 20, 36, 10, 10, 20],
        },
      ],
    };
    onMounted(() => {
    
    
      // 基于准备好的dom，初始化echarts实例
      const mychart = echarts.init(chart.value);
      mychart.setOption(option);
    });
    return {
    
     chart };
  },
});
</script>

3 添加ECharts5代码利用Vue3版本提供的setup语法(javascript原生选择器)

<template>
  <div id="chart" :style="{ width: '500px', height: '500px' }"></div>
</template>

<script >
import {
    
     onMounted } from "vue";
import * as echarts from "echarts";
export default {
    
    
  name: "Map",
  setup() {
    
    
    onMounted(() => {
    
    
      // 基于准备好的dom，初始化echarts实例
      var mychart = echarts.init(document.getElementById("chart"));

      // 指定图表的配置项和数据
      var option = {
    
    
        title: {
    
    
          text: "ECharts 入门示例",
        },
        tooltip: {
    
    },
        legend: {
    
    
          data: ["销量"],
        },
        xAxis: {
    
    
          data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"],
        },
        yAxis: {
    
    },
        series: [
          {
    
    
            name: "销量",
            type: "bar",
            data: [5, 20, 36, 10, 10, 20],
          },
        ],
      };
      mychart.setOption(option);
    });
  },
};
</script>