echarts图表分别在vue2和vue3中的使用示例

1、vue2中的使用：

1、下载这个版本 npm install echarts@4.9.0

//2、在main.js中全局引用：

//import echarts from "echarts"

//Vue.prototype.$echarts=echarts

一般不糊在main中引用 ，应该在当前页面 

  import echarts from 'echarts'

3、 在页面中使用
 
下面的动态宽高是适配
 

<template>
  <div class="myCharts">
    <div class="myChart" ref="myChart" id="myChart" :style="{ width: '8rem', height: '8rem' }"
      _echarts_instance_="ec_1649752202234"></div>
  </div>
</template>

<script>
export default {
  mounted() { this.setChart() },
  methods: {
    setChart() {
      this.$nextTick(()=>{
        var myChart = this.$echarts.init(this.$refs.myChart)
        var option = {
          legend: {
            data: [],
          },
          radar: {
            shape: "circle",
            splitNumber: 5,
            indicator: [
              { name: "知觉辨别", max: 12, axisLabel: { show: true } },
              { name: "想象推理", max: 12 },
              { name: "系列关系", max: 12 },

              { name: "比较推理", max: 12 },
              { name: "类同比较", max: 12 },
            ],
            radius: [5, 120],

            splitArea: {
              areaStyle: {
                color: [
                  "#fefefe",
                  "#f6f8fc",
                  "#fefefe",
                  "#f6f8fc",
                  "#fefefe",
                  "#f6f8fc",
                ],
              },
            },
          },
          series: [
            {
              name: "",
              type: "radar",
              data: [],
            },
          ],
        };
        // 设置实例参数
        myChart.setOption(option);
      })
     
     
    }
  }

};
</script>

<style scoped>
</style>

2、在vue3中的使用：

1、下载echarts 

2、在main.js中全局引入

import * as echarts from "echarts";

// 全局挂载 echarts
app.config.globalProperties.$echarts = echarts;

3、在页面中使用

<template>
  <div class="myCharts">
    <div
      class="myChart"
      ref="myChart"
      id="myChart"
      :style="{ width: '8.4rem', height: '8.4rem' }"
      _echarts_instance_="ec_1649752202234"
    ></div>
  </div>
</template>

<script>
import { getCurrentInstance, onMounted } from "vue";
export default {
  // 雷达图表
  setup() {
    // 通过 internalInstance.appContext.config.globalProperties 获取全局属性或方法
    let internalInstance = getCurrentInstance();
    let echarts = internalInstance.appContext.config.globalProperties.$echarts;

    onMounted(() => {
      const dom = document.getElementById("myChart");
      const myChart = echarts.init(dom); // 初始化echarts实例
      const option = {
        legend: {
          data: [],
        }, 
        radar: {
          shape: "circle",
          splitNumber: 5,
          indicator: [
            { name: "知觉辨别", max: 12, axisLabel: { show: true } },
            { name: "想象推理", max: 12 },
            { name: "系列关系", max: 12 },

            { name: "比较推理", max: 12 },
            { name: "类同比较", max: 12 },
          ],
          radius: [5, 120],

          splitArea: {
            areaStyle: {
              color: [
                "#fefefe",
                "#f6f8fc",
                "#fefefe",
                "#f6f8fc",
                "#fefefe",
                "#f6f8fc",
              ],
            },
          },
        },
        series: [
          {
            name: "",
            type: "radar",
            data: [],
          },
        ],
      };
      // 设置实例参数
      myChart.setOption(option);
    });
    return {};
  },
};
</script>

<style scoped>
.myCharts .myChart {
  margin-left: 0.3rem;
}
</style>