熱力圖 (Heatmap)
Echarts的熱力圖用于展示兩個維度數據矩陣中的值分布情況。它通過在平面上劃分成多個矩形區域，并用不同的顏色填充這些區域來表示數據的大小或強度。顏色漸變從淺到深通常映射著數值從小到大，從而直觀展示數據的集中程度和分布模式。熱力圖常應用于分析時間序列、地理位置、交叉分類數據的相關性和密度，比如人口密度分布、時間-溫度變化等場景。
漏斗圖 (Funnel)
漏斗圖在Echarts中用來表現一系列流程中各階段數據的轉化情況，形態上像是一個倒置的漏斗，上部寬而下部窄。每個階段用一個梯形表示，梯形的寬度代表該階段的數量或比例，相鄰梯形間的差距直觀展示了轉化過程中數據的流失或縮減。漏斗圖適用于分析銷售漏斗、用戶轉化路徑、網頁瀏覽流程等場景，幫助用戶快速理解整個流程的效率和瓶頸所在。通過調整配置，還可以創建多系列的漏斗圖，用于對比不同條件下的轉化情況。
這里來簡單記錄一下
一. 熱力圖
1. 實現的圖表效果
2. 函數代碼
drawAcdtEcharts() {// 初始化 ECharts 實例，指定要渲染圖表的 DOM 容器var myChart = this.$echarts.init(document.querySelector(".btm_twoEcs"));// 定義小時數據const hours = ['12a', '1a', '2a', '3a', '4a', '5a', '6a', // 凌晨12點到早上6點'7a', '8a', '9a', '10a', '11a', // 早上7點到中午11點'12p', '1p', '2p', '3p', '4p', '5p', // 中午12點到下午5點'6p', '7p', '8p', '9p', '10p', '11p' // 晚上6點到晚上11點];// 定義星期數據const days = ['星期一', '星期二', '星期三', // 星期一到星期三'星期四', '星期五', '星期六', '星期日' // 星期四到星期日];// 定義熱力圖數據，并轉換數據格式const data = [[0, 0, 5], [0, 1, 1], [0, 2, 0], [0, 3, 0], [0, 4, 0], [0, 5, 0], [0, 6, 0], [0, 7, 0], [0, 8, 0], [0, 9, 0], [0, 10, 0], [0, 11, 2], [0, 12, 4], [0, 13, 1], [0, 14, 1], [0, 15, 3], [0, 16, 4], [0, 17, 6], [0, 18, 4], [0, 19, 4], [0, 20, 3], [0, 21, 3], [0, 22, 2], [0, 23, 5], [1, 0, 7], [1, 1, 0], [1, 2, 0], [1, 3, 0], [1, 4, 0], [1, 5, 0], [1, 6, 0], [1, 7, 0], [1, 8, 0], [1, 9, 0], [1, 10, 5], [1, 11, 2], [1, 12, 2], [1, 13, 6], [1, 14, 9], [1, 15, 11], [1, 16, 6], [1, 17, 7], [1, 18, 8], [1, 19, 12], [1, 20, 5], [1, 21, 5], [1, 22, 7], [1, 23, 2], [2, 0, 1], [2, 1, 1], [2, 2, 0], [2, 3, 0], [2, 4, 0], [2, 5, 0], [2, 6, 0], [2, 7, 0], [2, 8, 0], [2, 9, 0], [2, 10, 3], [2, 11, 2], [2, 12, 1], [2, 13, 9], [2, 14, 8], [2, 15, 10], [2, 16, 6], [2, 17, 5], [2, 18, 5], [2, 19, 5], [2, 20, 7], [2, 21, 4], [2, 22, 2], [2, 23, 4], [3, 0, 7], [3, 1, 3], [3, 2, 0], [3, 3, 0], [3, 4, 0], [3, 5, 0], [3, 6, 0], [3, 7, 0], [3, 8, 1], [3, 9, 0], [3, 10, 5], [3, 11, 4], [3, 12, 7], [3, 13, 14], [3, 14, 13], [3, 15, 12], [3, 16, 9], [3, 17, 5], [3, 18, 5], [3, 19, 10], [3, 20, 6], [3, 21, 4], [3, 22, 4], [3, 23, 1], [4, 0, 1], [4, 1, 3], [4, 2, 0], [4, 3, 0], [4, 4, 0], [4, 5, 1], [4, 6, 0], [4, 7, 0], [4, 8, 0], [4, 9, 2], [4, 10, 4], [4, 11, 4], [4, 12, 2], [4, 13, 4], [4, 14, 4], [4, 15, 14], [4, 16, 12], [4, 17, 1], [4, 18, 8], [4, 19, 5], [4, 20, 3], [4, 21, 7], [4, 22, 3], [4, 23, 0], [5, 0, 2], [5, 1, 1], [5, 2, 0], [5, 3, 3], [5, 4, 0], [5, 5, 0], [5, 6, 0], [5, 7, 0], [5, 8, 2], [5, 9, 0], [5, 10, 4], [5, 11, 1], [5, 12, 5], [5, 13, 10], [5, 14, 5], [5, 15, 7], [5, 16, 11], [5, 17, 6], [5, 18, 0], [5, 19, 5], [5, 20, 3], [5, 21, 4], [5, 22, 2], [5, 23, 0], [6, 0, 1], [6, 1, 0], [6, 2, 0], [6, 3, 0], [6, 4, 0], [6, 5, 0], [6, 6, 0], [6, 7, 0], [6, 8, 0], [6, 9, 0], [6, 10, 1], [6, 11, 0], [6, 12, 2], [6, 13, 1], [6, 14, 3], [6, 15, 4], [6, 16, 0], [6, 17, 0], [6, 18, 0], [6, 19, 0], [6, 20, 1], [6, 21, 2], [6, 22, 2], [6, 23, 6]].map(function (item) {// 交換數據的前兩項，用于適應 ECharts 的數據格式return [item[1], item[0], item[2] || '-']; });// 定義顏色const colors = ["#d07071"]; // 定義熱力圖的顏色// 配置 ECharts 選項var option = {// 提示框tooltip: {position: "top", // 提示框顯示在頂部},// 網格配置grid: {height: "50%", // 網格高度為容器高度的50%top: "10%", // 網格距離頂部的距離},// X軸配置xAxis: {type: "category", // X軸為類目軸data: hours, // X軸的數據為小時數據splitArea: {show: true, // 顯示網格區域},},// Y軸配置yAxis: {type: "category", // Y軸為類目軸data: days, // Y軸的數據為星期數據splitArea: {show: true, // 顯示網格區域},},// 視覺映射配置visualMap: {min: 0, // 視覺映射的最小值max: 10, // 視覺映射的最大值calculable: true, // 允許視覺映射組件可以交互orient: "horizontal", // 水平放置視覺映射組件left: "center", // 視覺映射組件居中bottom: "15%", // 視覺映射組件距離底部15%},// 系列配置series: [{name: "Punch Card", // 系列名稱type: "heatmap", // 系列類型為熱力圖data: data, // 系列的數據label: {show: true, // 顯示標簽},emphasis: {itemStyle: {shadowBlur: 10, // 陰影模糊度shadowColor: "rgba(0, 0, 0, 0.5)", // 陰影顏色},},},],};// 使用配置項設置 ECharts 實例option && myChart.setOption(option);// 添加窗口大小改變時的重繪監聽器window.addEventListener("resize", () => {myChart.resize(); // 重新調整圖表大小});},},3.?初始化渲染Echarts
// 組件掛載之后，才可以獲取到元素
mounted() {// 在組件掛載后調用繪制函數this.drawAcdtEcharts();// 添加窗口大小改變時的重繪監聽器，防止報錯window.addEventListener("resize", () => {if (document.querySelector(".acdt_Ecs")) { // 檢查DOM元素是否存在this.drawAcdtEcharts();}});},},
二. 漏斗圖
1. 實現的圖表效果
2. 函數代碼
drawRiskEcharts() {// 初始化 ECharts 實例var myChart = this.$echarts.init(document.querySelector(".two_riskEcs"));// 定義漏斗圖的顏色const colors = ["#ff7965", "#ffa635", "#7ecd8d"];// 配置 ECharts 選項var option = {color: colors, // 應用顏色配置// backgroundColor: "#2c343c", // 設置背景顏色tooltip: {trigger: "item", // 鼠標懸停時顯示提示框formatter: "{a} <br/>{b} : {c}", // 提示框的格式},series: [{name: "漏斗圖", // 系列名稱type: "funnel", // 漏斗圖類型left: "10%", // 圖表左側位置top: 60, // 圖表上方位置bottom: 60, // 圖表下方位置width: "80%", // 圖表寬度min: 0, // 數據最小值max: 100, // 數據最大值minSize: "20%", // 漏斗圖最小部分的寬度maxSize: "100%", // 漏斗圖最大部分的寬度sort: "descending", // 按值降序排序gap: 2, // 各部分之間的間隔funnelAlign: "center", // 設置漏斗圖對齊方式label: {show: true, // 顯示標簽position: "right", // 標簽位置// formatter: "{b}: {c}", // 標簽內容格式，顯示名稱和數值},labelLine: {length: 10, // 標簽線長度lineStyle: {width: 1, // 標簽線寬度type: "solid", // 標簽線樣式},},itemStyle: {borderColor: "#fff", // 項目的邊框顏色borderWidth: 1, // 項目的邊框寬度},emphasis: {label: {fontSize: 20, // 高亮標簽的字體大小},},data: [{ value: 60, name: "高風險" }, // 高風險數據{ value: 40, name: "中等風險" }, // 中等風險數據{ value: 20, name: "低風險" }, // 低風險數據],},],};// 使用配置項設置 ECharts 實例option && myChart.setOption(option);// 添加窗口大小改變時的重繪監聽器window.addEventListener("resize", () => {myChart.resize(); // 在窗口調整時重置圖表大小});},},?3.?初始化渲染Echarts
// 組件掛載之后，才可以獲取到元素
mounted() {// 在組件掛載時調用繪制函數this.drawRiskEcharts();// 添加窗口大小改變時的重繪監聽器，防止報錯window.addEventListener("resize", () => {if (document.querySelector(".risk_Ecs")) {this.drawRiskEcharts();}});},},
三. 因為這里使用的是全局注冊，在main.js中寫入如下，所以可以使用 this.$echarts
import * as echarts from 'echarts'
Vue.prototype.$echarts = echarts;四. Echarts，更多操作
Echarts官網
https://echarts.apache.org/zh/index.html
