Vue3中使用Echarts

安装Echarts最新版本
pnpm install -S echarts

使用方式一
<script lang="ts" setup>
import { ref, onMounted } from "vue";
//  按需引入 echarts
import * as echarts from "echarts";
onMounted(
  () => {
    init()
  }
)
function init() {
  // 基于准备好的dom，初始化echarts实例
  var myChart = echarts.init(document.getElementById('main'));
  // 指定图表的配置项和数据
  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>

 

<template>
  <div id="main" style="width: 100%; height: 400px"></div>
</template>

<style scoped>
</style>


使用方式二，推荐使用
<script lang="ts" setup>
import { ref, onMounted } from "vue";
//  按需引入 echarts
import * as echarts from "echarts";
const main = ref() // 使用ref创建虚拟DOM引用，使用时用main.value
onMounted(
  () => {
    init()
  }
)
function init() {
  // 基于准备好的dom，初始化echarts实例
  var myChart = echarts.init(main.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>

<template>
  <div ref="main" style="width: 100%; height: 400px"></div>
</template>

<style scoped>
</style>

二、defineProps 和 defineEmits
注意：defineProps 和 defineEmits 都是只在 <script setup> 中才能使用的编译器宏

js 为了声明 props 和 emits 选项且具备完整的类型推断，可以使用 defineProps 和 defineEmits API，它们在 <script setup> 中都是自动可用的：

defineProps 和 defineEmits 都是只在 <script setup> 中才能使用的****编译器宏。他们不需要导入，且会在处理 <script setup> 的时候被编译处理掉。
defineProps 接收与 props 选项相同的值，defineEmits 也接收 emits 选项相同的值。
defineProps 和 defineEmits 在选项传入后，会提供恰当的类型推断。
传入到 defineProps 和 defineEmits 的选项会从 setup 中提升到模块的范围。因此，传入的选项不能引用在 setup 范围中声明的局部变量。这样做会引起编译错误。但是，它可以引用导入的绑定，因为它们也在模块范围内。
2.1 子组件
<template>
    <p>{{props.msg}}</p>
    <button @click="handleClick">点击我调用父组件方法</button>
</template>
<script setup lang="ts">
    const props = defineProps({
         msg:{
            type: String,
            default: () => '默认值'
         }
    })
    const  emit = defineEmits(['on-change', 'update'])
    const handleClick = () =>{
        emit('on-change', '父组件方法被调用了')
    }
</script>

2.2 父组件
<script setup lang="ts">
    import TestPropsPmit from './components/test-props-emit/index.vue';
    import { ref } from 'vue';
    // 定义字符串变量
    const msg = ref('欢迎使用vite！')
    // 调用事件
    const handleChange = (params:string) =>{
        console.log(params);
    }
</script>
<template>
    <TestPropsPmit :msg="msg" @on-change="handleChange"></TestPropsPmit>
</template>

三、Vue Echarts 地图使用
引入echarts和相关地图文件(json或者geojson)，下载地址：json文件地址下载

<script lang="ts" setup>
import { ref, onMounted } from "vue";
//  按需引入 echarts
import * as echarts from "echarts";
// 引入地图文件
import chinaJson from '../assets/mapsJson/china.json'
const main = ref()
onMounted(
  () => {
    init()
  }
)
function init() {
  // 基于准备好的dom，初始化echarts实例
  var myChart = echarts.init(main.value);
  // 注册可用的地图
  echarts.registerMap('china', chinaJson);
  // 指定图表的配置项和数据
  var option = {
    title: {
      text: '中国地图'
    },
    series: [
      {
        type: 'map',
        map: 'china',
        // 显示标签样式
        label: {
          show: true,
          fontSize: 10,
          color: 'white',
        },
        // 图形样式
        itemStyle: {
          areaColor: 'blue',
          borderColor: 'white',
          borderWidth: '1',
        },
        zoom: 1.2,
        // 添加数据，注意应与显示的标签名一致
        data: [
          { name: '重庆市', value: 2005 },
          { name: '天津市', value: 1547 },
          { name: '上海市', value: 3168 },
          { name: '北京市', value: 6992 },
          { name: '四川省', value: 4200 },
          { name: '湖北省', value: 9500 },
        ],
      }
    ],
    visualMap: {
      min: 1000,
      max: 10000,
      text: ['High', 'Low'],
      realtime: false,
      calculable: true,
      inRange: {
        color: ['lightskyblue', 'yellow', 'orangered']
      }
    },
  };
  // 使用刚指定的配置项和数据显示图表。
  myChart.setOption(option);
}
</script>

<template>
  <div ref="main" style="width: 100%; height: 800px"></div>
</template>

<style scoped>
</style>


异步组件的数据加载
// mapShow.vue文件中
// 添加请求方法
import {getMapData} from '../utils/api'
// 获取数据
const mapData = await getMapData().then(res=>res.data.result);
function init() {
 series: [
data:mapData,//这样就把数据传进来了
]
}
// 使用地图组件，加载异步组件
 <suspense>
    <template #default>
      <Map />
    </template>
    <template #fallback>
      <div>Loading...</div>// 加载未成功显示
    </template>
  </suspense>