vue3.x学习笔记之项目实战 -- 使用echarts

• vue3使用Echarts

‍• 安装Echarts最新版本
• 使用方式一
• 使用方式二，推荐使用

• Vue Echarts 地图使用

• 引入echarts和相关地图文件
• 异步组件的数据加载

• 一个页面多个echarts时自适应失效
• echart 如何重绘

‍

vue3使用Echarts

安装Echarts最新版本

pnpm install -S echarts

yarn add 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>

Vue Echarts 地图使用

引入echarts和相关地图文件

引入echarts和相关地图文件(json或者geojson)，下载地址：json文件地址下载（https://datav.aliyun.com/portal/school/atlas/area_selector）

<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>

一个页面多个echarts时自适应失效

一是当前页面有多个echarts，resize失效，将上面的代码替换成下面的就可以了：

myChart.setOption(option);
window.onresize = myChart.resize;

// 替换如下
myChart.setOption(option);
window.addEventListener("resize",function(){
    myChart.resize();
 });

二是，引了echarts组件，循环展示了多个echarts，子组件中的window.onresize只获取到了最后一个echarts，需要在父页面引用的子组件上加上ref，然后在父页面操作就可以了

<EchartList :id ='"myEchart_"+index' :key='index' :list='list' ref='echartsName'></EchartList>
//vue页面  在mounted()里写
window.addEventListener('resize',()=>{
    if(this.$refs && this.$refs.echartsName != undefined){
        this.$refs.echartsName.map(v =>{
            v.charts.resize();
        })
    }
})

echart 如何重绘

在ECharts中，要重绘图表，你可以使用setOption方法来更新图表的配置。这样可以实现动态更新数据或者配置选项后重新绘制图表。

假设你已经有一个ECharts实例 chartInstance，你可以通过以下方式重绘图表：

// 假设你有一个名为option的新配置选项
const newOption = {
  // 新的配置选项
};

// 使用setOption方法来更新图表的配置
chartInstance.setOption(newOption);

在Vue组件中，你可以将这个逻辑应用到适当的生命周期钩子或者响应式函数中，以便根据需要更新图表的配置并触发重绘。

import { onMounted, ref } from 'vue'
import * as echarts from 'echarts'

export default {
  setup() {
    const chartRef = ref(null)
    let chartInstance = null

    onMounted(() => {
      chartInstance = echarts.init(chartRef.value)
      // 初始化图表

      // ...其他初始化操作

      // 随后可以使用setOption来更新图表
      const newOption = {
        // 新的配置选项
      }
      chartInstance.setOption(newOption)
    })

    return {
      chartRef
    }
  }
}