引入'echarts'和ref

import { reactive, onMounted, ref, watch, nextTick, onActivated, markRaw } from 'vue';

import * as echarts from 'echarts';

设置ref

const heatMapRef = ref();

页面设置div

<div style="height: 300px;" ref="heatMapRef">

</div>

需要设置高度，高度自由调整适应

热力图方法

const initHeatmap = () => {

if (!state.global.dispose.some((b: any) => b === state.global.homeCharThree)) state.global.homeCharThree.dispose();

state.global.homeCharThree = markRaw(echarts.init(heatMapRef.value, state.charts.theme));

const option = {

grid: {

height: '60%',

top: '8%'

},

title: {

text: '热力图', // 主标题文本

//subtext: '副标题', // 副标题文本

left: 'center' // 标题水平位置

},

xAxis: {

type: 'category',

data: state.departmentName,

splitArea: {

show: true

},

axisLabel: {

rotate: 300

}

},

yAxis: {

type: 'category',

data: state.levelType,

splitArea: {

show: true

}

},

visualMap: { // 图例属性

orient: 'horizontal',

//left: 'center',

left: 'right',//右侧

dimension: 2, // 选择的是数据的哪个维度

//bottom: '1%',// 下部

top:'1%', // 上部

pieces: [

{ gt: 0, lte: 25, color: 'blue' }, // 大于0 小于等于25 的区间

{ gt: 25, lte: 50, color: 'yellow' }, // 大于25 小于等于50 的区间

{ gt: 50, lte: 75, color: 'orange' }, // 大于50 小于等于75 的区间

{ gt: 75, color: 'red' } // 大于75 的区间

]

},

tooltip: {

position: 'top',

axisPointer: {

type: 'cross'

},// 标示线

// trigger:'axis',

trigger: 'item',// 表示当鼠标悬停在图表的数据项(如点、柱、线等)上时,会触发显示提示框

// formatter: '{b}<br/>{c}' // 提示框文本格式器，{b}表示系列名，{c}表示数据值

formatter: function (params) {

// params 是一个包含当前数据信息的对象

var data = params.data;

// 假设 data 是一个四维数组 [value, dim1, dim2, dim3]

return (

//params.seriesName + '' + params.name + ' 严重程度: ' + data[3]

params.name + ' 严重程度: ' + data[3]

);

}

/*

formatter:function(params){

var result = '';

for(var i = 0;i<params.length;i++){

result += params[i].name +'<br/>';

result += params[i].seriesName +':'+params[i].value + '<br/>';

}

return result;

}*/

},

series: [

{

name: 'Punch Card',

type: 'heatmap',

data: state.data,

label: {

show: true

},

emphasis: {

itemStyle: {

shadowBlur: 10,

shadowColor: 'rgba(0, 0, 0, 0.8)'

}

}

}

]

};

state.global.homeCharThree.setOption(option);

state.myCharts.push(state.global.homeCharThree);

};

数据部分

const state = reactive({

global: {

homeChartOne: null,

homeChartTwo: null,

homeCharThree: null,

dispose: [null, '', undefined],

} as any,

myCharts: [] as EmptyArrayType,

charts: {

theme: '',

bgColor: '',

color: '#303133',

},

departmentName : [

'1', '2', '3', '4',

'5', '6', '7', '8',

'9', '10', '11', '12',

'13', '14', '15', '16',

'17', '18', '19', '20',

'21', '22', '23',

'24', '25', '26', '27'

],

levelType : [

'low', 'middle', 'center',

'height'

],

data : [

[0, 0, 20,'low'] , [0, 1, 0,'low'] , [0, 2, 0,'low'] , [0, 3, 0,'low'] , [0, 4, 0,'low'] , [0, 5, 0,'low'],

[0, 6, 10,'low'] , [0, 7, 0,'low'] , [0, 8, 0,'low'] , [0, 9, 0,'low'] , [0, 10, 0,'low'] , [0, 11, 0,'low'],

[0, 12, 15,'low'] , [0, 13, 0,'low'] , [0, 14, 0,'low'] , [0, 15, 0,'low'] , [0, 16, 0,'low'] , [0, 17, 0,'low'],

[0, 18, 20,'low'] , [0, 19, 0,'low'] , [0, 20, 0,'low'] , [0, 21, 0,'low'] , [0, 22, 0,'low'] , [0, 23, 0,'low'],

[0, 24, 8,'low'] , [0, 25, 0,'low'] , [0, 26, 0,'low'],

[1, 0, 0,'middle'] , [1, 1, 30,'middle'] , [1, 2, 0,'middle'] , [1, 3, 0,'middle'] , [1, 4, 0,'middle'] , [1, 5, 0,'middle'],

[1, 6, 0,'middle'] , [1, 7, 35,'middle'] , [1, 8, 0,'middle'] , [1, 9, 0,'middle'] , [1, 10, 0,'middle'] , [1, 11, 0,'middle'],

[1, 12, 0,'middle'] , [1, 13, 40,'middle'] , [1, 14, 0,'middle'] , [1, 15, 0,'middle'] , [1, 16, 0,'middle'] , [1, 17, 0,'middle'],

[1, 18, 0,'middle'] , [1, 19, 41,'middle'] , [1, 20, 0,'middle'] , [1, 21, 0,'middle'] , [1, 22, 0,'middle'] , [1, 23, 0,'middle'],

[1, 24, 0,'middle'] , [1, 25, 35,'middle'] , [1, 26, 0,'middle'],

[2, 0, 0,'center'] , [2, 1, 0,'center'] , [2, 2, 56,'center'] , [2, 3, 0,'center'] , [2, 4, 0,'center'] , [2, 5, 0,'center'],

[2, 6, 0,'center'] , [2, 7, 0,'center'] , [2, 8, 60,'center'] , [2, 9, 0,'center'] , [2, 10, 0,'center'] , [2, 11, 0,'center'],

[2, 12, 0,'center'] , [2, 13, 0,'center'] , [2, 14, 70,'center'] , [2, 15, 0,'center'] , [2, 16, 0,'center'] , [2, 17, 0,'center'],

[2, 18, 0,'center'] , [2, 19, 0,'center'] , [2, 20, 68,'center'] , [2, 21, 0,'center'] , [2, 22, 0,'center'] , [2, 23, 0,'center'],

[2, 24, 0,'center'] , [2, 25, 0,'center'] , [2, 26, 72,'center'],

[3, 0, 0,'height'] , [3, 1, 0,'height'] , [3, 2, 0,'height'] , [3, 3, 80,'height'] , [3, 4, 80,'height'] , [3, 5, 90,'height'],

[3, 6, 0,'height'] , [3, 7, 0,'height'] , [3, 8, 0,'height'] , [3, 9, 90,'height'] , [3, 10, 86,'height'] , [3, 11, 92,'height'],

[3, 12, 0,'height'] , [3, 13, 0,'height'] , [3, 14, 0,'height'] , [3, 15, 100,'height'] , [3, 16, 81,'height'] , [3, 17, 90,'height'],

[3, 18, 0,'height'] , [3, 19, 0,'height'] , [3, 20, 0,'height'] , [3, 21, 98,'height'] , [3, 22, 88,'height'] , [3, 23, 90,'height'],

[3, 24, 0,'height'] , [3, 25, 0,'height'] , [3, 26, 0,'height']

]

.map(function (item) {

return [item[1], item[0], item[2] || '-',item[3]]; // x轴值，y轴值，数据值，数据值

}),

})

方法调用

onMounted(async () => {

setTimeout(() => {

initHeatmap();

}, 500);

});