安装和引入

安装：

pnpm addd echarts

引入：使用全局引入，全局引入时直接在组件页面引入即可

import * as echarts from 'echarts'

这个 echarts 就包含了我们需要的所有类型和工具。

在 setup 中使用

首先需要创建一个带 id 属性的 DOM 节点，同时指定一个高度：

<template>
    <div id="heatmap" h="500px"></div>
</template>

然后在生命周期钩子中初始化和销毁 ECharts 实例：

<script setup lang="ts">
import * as echarts from 'echarts'

// 这里貌似没有必要声明为响应式的变量
let echart: Nullable<echarts.ECharts> = null

// 在挂载 DOM 之后再渲染 ECharts 图
onMounted(() => {
    const container = document.getElementById('heatmap')
    if (!container) return

    echart = echarts.init(container, undefined, {
        renderer: 'svg',
    })

    const option: echarts.EChartsOption = {/*...*/}

    echart.setOption(option)
})

// 在卸载组建时销毁 ECharts 实例
onUnmounted(() => {
    echart?.dispose()
})
</script>

下面是一份示例数据：

const faw = ['1st', '2nd', '3rd', '4th', '5th', '6th']
const ccb = ['1st', '2nd', '3rd', '4th', '5th', '6th']

const data2 = [
    [0, 0, 0],
    [0, 1, 0],
    [0, 2, 0],
    [0, 3, 0],
    [0, 4, 0],
    [0, 5, 0],
    [1, 0, 0],
    [1, 1, 0],
    [1, 2, 0],
    [1, 3, 0],
    [1, 4, 0],
    [1, 5, 0],
    [2, 0, 22],
    [2, 1, 22],
    [2, 2, 0],
    [2, 3, 0],
    [2, 4, 0],
    [2, 5, 0],
    [3, 0, 62],
    [3, 1, 38],
    [3, 2, 22],
    [3, 3, 5],
    [3, 4, 0],
    [3, 5, 0],
    [4, 0, 73],
    [4, 1, 96],
    [4, 2, 84],
    [4, 3, 25],
    [4, 4, 37],
    [4, 5, 27],
    [5, 0, 100],
    [5, 1, 100],
    [5, 2, 93],
    [5, 3, 100],
    [5, 4, 40],
    [5, 5, 40],
]

const option: echarts.EChartsOption = {
    tooltip: {
        position: 'top',
    },
    toolbox: {
        feature: {
            dataZoom: {
                yAxisIndex: 'none',
            },
            restore: {},
            saveAsImage: {},
        },
    },
    animation: false,
    grid: {
        height: '50%',
        left: '13%',
        top: '20%',
        // backgroundColor:'white'
    },
    xAxis: {
        name: 'CCW',
        nameTextStyle: {
            padding: [0, 0, -60, -245], // 四个数字分别为上右下左与原位置距离
        },
        type: 'category',
        data: ccb,
        splitArea: {
            show: true,
        },
    },
    yAxis: {
        name: 'FAW',
        nameTextStyle: {
            padding: [0, 0, -210, -80], // 四个数字分别为上右下左与原位置距离
        },
        type: 'category',
        data: faw,
        splitArea: {
            show: true,
        },
    },
    visualMap: {
        min: 0,
        max: 100,
        // align: 'left',
        calculable: true,
        orient: 'vertical',
        left: '90%',
        top: '35%',
        // top: 'auto',
        // right: '10%',
        inRange: {
            color: ['white', 'rgb(191,68,76)'],
        },
    },
    series: [
        {
            name: 'fawVSccb',
            type: 'heatmap',
            data: data2,
            label: {
                show: true,
                color: 'white',
            },
            emphasis: {
                itemStyle: {
                    shadowBlur: 10,
                    shadowColor: 'white',
                },
            },
        },
    ],
}