<html> <head> <meta charset="UTF-8"> <title>單儀表盤案例</title> <!-- 引入 ECharts 文件 --> <script src="js/echarts4.0.js" type="text/javascript" charset="utf-8"></script> <body> <!-- 為 ECharts 准備一個具備大小（寬高）的 容器 --> <div id="chart1" style="width: 80%;height: 400px;top: 50px;left: 10%;border: 3px solid #000;"></div> </body> </html> <script type="text/javascript"> // 基於准備好的容器(這里的容器是id為chart1的div)，初始化echarts實例 var chart1 = echarts.init(document.getElementById("chart1")); var colorTemplate1 = [[0.2, "rgba(255,0,0,0.8)"], [0.8, "rgba(0,255,255,0.8)"], [1, "rgba(0,255,0,0.8)"]]; var data1 = [{ name: "安全度", value: 85, }]; // 指定圖表的配置項和數據 var option = { backgroundColor: "#000", tooltip: { // 本系列特定的 tooltip 設定。 show: true, formatter: "{b}：{c}%", backgroundColor: "rgba(50,50,50,0.7)", // 提示框浮層的背景顏色。注意：series.tooltip 僅在 tooltip.trigger 為 'item' 時有效。 borderColor: "#333", // 提示框浮層的邊框顏色。... borderWidth: 0, // 提示框浮層的邊框寬。... padding: 5, // 提示框浮層內邊距，單位px，默認各方向內邊距為5，接受數組分別設定上右下左邊距。... textStyle: { // 提示框浮層的文本樣式。... // color ,fontStyle ,fontWeight ,fontFamily ,fontSize ,lineHeight ,....... }, }, series: [ { name: "單儀表盤示例", // 系列名稱,用於tooltip的顯示，legend 的圖例篩選，在 setOption 更新數據和配置項時用於指定對應的系列。 type: "gauge", // 系列類型 radius: "80%", // 參數:number, string。 儀表盤半徑,默認 75% ，可以是相對於容器高寬中較小的一項的一半的百分比，也可以是絕對的數值。 center: ["50%", "55%"], // 儀表盤位置(圓心坐標) startAngle: 225, // 儀表盤起始角度,默認 225。圓心 正右手側為0度，正上方為90度，正左手側為180度。 endAngle: -45, // 儀表盤結束角度,默認 -45 clockwise: true, // 儀表盤刻度是否是順時針增長,默認 true。 min: 0, // 最小的數據值,默認 0 。映射到 minAngle。 max: 100, // 最大的數據值,默認 100 。映射到 maxAngle。 splitNumber: 10, // 儀表盤刻度的分割段數,默認 10。 axisLine: { // 儀表盤軸線(輪廓線)相關配置。 show: true, // 是否顯示儀表盤軸線(輪廓線),默認 true。 lineStyle: { // 儀表盤軸線樣式。 color: colorTemplate1, //儀表盤的軸線可以被分成不同顏色的多段。每段的 結束位置(范圍是[0,1]) 和 顏色 可以通過一個數組來表示。默認取值：[[0.2, '#91c7ae'], [0.8, '#63869e'], [1, '#c23531']] opacity: 1, //圖形透明度。支持從 0 到 1 的數字，為 0 時不繪制該圖形。 width: 30, //軸線寬度,默認 30。 shadowBlur: 20, //(發光效果)圖形陰影的模糊大小。該屬性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起設置圖形的陰影效果。 shadowColor: "#fff", //陰影顏色。支持的格式同color。 } }, splitLine: { // 分隔線樣式。 show: true, // 是否顯示分隔線,默認 true。 length: 30, // 分隔線線長。支持相對半徑的百分比,默認 30。 lineStyle: { // 分隔線樣式。 color: "#eee", //線的顏色,默認 #eee。 opacity: 1, //圖形透明度。支持從 0 到 1 的數字，為 0 時不繪制該圖形。 width: 2, //線度,默認 2。 type: "solid", //線的類型,默認 solid。 此外還有 dashed,dotted shadowBlur: 10, //(發光效果)圖形陰影的模糊大小。該屬性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起設置圖形的陰影效果。 shadowColor: "#fff", //陰影顏色。支持的格式同color。 } }, axisTick: { // 刻度(線)樣式。 show: true, // 是否顯示刻度(線),默認 true。 splitNumber: 5, // 分隔線之間分割的刻度數,默認 5。 length: 8, // 刻度線長。支持相對半徑的百分比,默認 8。 lineStyle: { // 刻度線樣式。 color: "#eee", //線的顏色,默認 #eee。 opacity: 1, //圖形透明度。支持從 0 到 1 的數字，為 0 時不繪制該圖形。 width: 1, //線度,默認 1。 type: "solid", //線的類型,默認 solid。 此外還有 dashed,dotted shadowBlur: 10, //(發光效果)圖形陰影的模糊大小。該屬性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起設置圖形的陰影效果。 shadowColor: "#fff", //陰影顏色。支持的格式同color。 }, }, axisLabel: { // 刻度標簽。 show: true, // 是否顯示標簽,默認 true。 distance: 5, // 標簽與刻度線的距離,默認 5。 color: "#fff", // 文字的顏色,默認 #fff。 fontSize: 12, // 文字的字體大小,默認 5。 formatter: "{value}", // 刻度標簽的內容格式器，支持字符串模板和回調函數兩種形式。 示例:// 使用字符串模板，模板變量為刻度默認標簽 {value},如:formatter: '{value} kg'; // 使用函數模板，函數參數分別為刻度數值,如formatter: function (value) {return value + 'km/h';} }, pointer: { // 儀表盤指針。 show: true, // 是否顯示指針,默認 true。 length: "70%", // 指針長度，可以是絕對數值，也可以是相對於半徑的百分比,默認 80%。 width: 5, // 指針寬度,默認 8。 }, itemStyle: { // 儀表盤指針樣式。 color: "auto", // 指針顏色，默認(auto)取數值所在的區間的顏色 opacity: 1, // 圖形透明度。支持從 0 到 1 的數字，為 0 時不繪制該圖形。 borderWidth: 0, // 描邊線寬,默認 0。為 0 時無描邊。 borderType: "solid", // 柱條的描邊類型，默認為實線，支持 'solid', 'dashed', 'dotted'。 borderColor: "#000", // 圖形的描邊顏色,默認 "#000"。支持的顏色格式同 color，不支持回調函數。 shadowBlur: 10, // (發光效果)圖形陰影的模糊大小。該屬性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起設置圖形的陰影效果。 shadowColor: "#fff", // 陰影顏色。支持的格式同color。 }, emphasis: { // 高亮的 儀表盤指針樣式 itemStyle: { //高亮 和正常 兩者具有同樣的配置項,只是在不同狀態下配置項的值不同。 } }, title: { // 儀表盤標題。 show: true, // 是否顯示標題,默認 true。 offsetCenter: [0,"20%"],//相對於儀表盤中心的偏移位置，數組第一項是水平方向的偏移，第二項是垂直方向的偏移。可以是絕對的數值，也可以是相對於儀表盤半徑的百分比。 color: "#fff", // 文字的顏色,默認 #333。 fontSize: 20, // 文字的字體大小,默認 15。 }, detail: { // 儀表盤詳情，用於顯示數據。 show: true, // 是否顯示詳情,默認 true。 offsetCenter: [0,"50%"],// 相對於儀表盤中心的偏移位置，數組第一項是水平方向的偏移，第二項是垂直方向的偏移。可以是絕對的數值，也可以是相對於儀表盤半徑的百分比。 color: "auto", // 文字的顏色,默認 auto。 fontSize: 30, // 文字的字體大小,默認 15。 formatter: "{value}%", // 格式化函數或者字符串 }, data: data1 } ] }; // 使用剛指定的配置項和數據顯示圖表 chart1.setOption(option) </script>
參考自：https://www.jianshu.com/p/73d4fe79ec8a
關於ECharts儀表盤的全部相關配置
免責聲明！
本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。