餅圖標籤展示數值
配置項：
option = { title: { text: '項目時間分佈', left: 'center' }, tooltip: { trigger: 'item', formatter: '{a} <br/>{b} : {c} ({d}%)' }, legend: { orient: 'vertical', left: 'left', data: ['智能化項目', '智能化集成', '空調控制系統'] }, series: [ { name: '訪問來源', type: 'pie', radius: '55%', center: ['50%', '60%'], label: { normal: { formatter: "{per|{d}%} \n{hr|}\n {b|{b}}", align: "right", rich: { hr: { borderColor: "#aaa", width: "100%", borderWidth: 1, height: 0 }, b: { fontSize: 14, color: "#000", lineHeight: 20 }, per: { color: "#000", fontSize: 16, lineHeight: 20 } } } }, data: [ {value: 5, name: '智能化項目'}, {value: 12, name: '智能化集成'}, {value: 169, name: '空調控制系統'}, ], emphasis: { itemStyle: { shadowBlur: 10, shadowOffsetX: 0, shadowColor: 'rgba(0, 0, 0, 0.5)' } } } ] };
運行效果：
座標軸顯示箭頭，刻度標籤超出顯示省略號
配置項：
const alarmRankOptions = { color: ['rgba(184,114,58,1)'], //['#A96932'], tooltip: { trigger: 'axis', axisPointer: { // 座標軸指示器，座標軸觸發有效 type: 'shadow' // 默認爲直線，可選爲：'line' | 'shadow' } }, grid: { left: '3%', right: '4%', bottom: '0', containLabel: true, borderColor: 'red' }, xAxis: [ { type: 'category', data: [], axisTick: { alignWithLabel: true }, // nameLocation:'end',//座標軸名稱顯示位置。 // x軸的字體樣式 axisLabel: { show: true, textStyle: { color: '#E6EFFF' }, interval: 0 //橫軸信息全部顯示 }, // x軸的顏色和寬度 axisLine: { lineStyle: { color: '#3C6581', width: 1 //這裏是座標軸的寬度,可以去掉 } } } ], yAxis: [ { minInterval: 1, type: 'value', name: '數量：個', nameTextStyle: { color: '#E6EFFF' }, axisLabel: { show: true, textStyle: { color: '#E6EFFF' } }, // y軸的顏色和寬度 axisLine: { show: true, lineStyle: { color: '#3C6581', width: 1 //這裏是座標軸的寬度 }, symbol: ['none', 'arrow'], symbolSize: [6, 10] //第一個數字表示寬度（垂直座標軸方向），第二個數字表示高度（平行座標軸方向）。 }, //背景網格線 splitLine: { show: false, lineStyle: { // 使用深淺的間隔色 color: '#ccc', type: 'dashed', shadowBlur: 10 } } } ], series: [ { name: '待解決報警數', type: 'bar', barWidth: '20', label: { normal: { show: true, position: 'top' //'inside' } }, data: [10, 52, 200, 334, 390, 330, 220, 40] } ] }; export { alarmRankOptions };
運行結果：
環形圖標籤顯示值
配置項：
export const PieOption = { grid: { left: 50, right: 0, top: 0, containLabel: true, zlevel: 99999 }, tooltip: { trigger: "item", formatter: "{b}: {c}次 ({d}%)" }, color: ["#ee6e6d", "#f19469", "#e7bf5f", "#74b8dd", "#67cb82"], title: { text: 0, textStyle: { color: "#3A3A3A", fontSize: 30, fontWeight: "normal" }, subtext: "", subtextStyle: { color: "#3A3A3A", fontSize: 14 }, x: "center", y: "49%" // y: "46%" }, series: [ { name: "", type: "pie", // minAngle: 5, //最小的扇區角度（0 ~ 360），用於防止某個值過小導致扇區太小影響交互 avoidLabelOverlap: true, //是否啓用防止標籤重疊策略 // radius: ["37%", "55%"], radius: ["32%", "46%"], center: ["50%", "54%"], // center: ["50%", "60%"], // radius: ["50%", "50%"], itemStyle: { borderColor: "rgba(255,255,255,1)", borderWidth: 8 }, label: { normal: { formatter: "{per|{d}%} \n{hr|}\n {b|{b}}", align: "right", rich: { hr: { borderColor: "#aaa", width: "100%", borderWidth: 1, height: 0 }, b: { fontSize: 14, color: "#000", lineHeight: 20 }, per: { color: "#000", fontSize: 16, lineHeight: 20 } } } }, labelLine: {}, data: [ { value: 150, name: "一級告警" // itemStyle: { // color: '#ee6e6d' // } }, { value: 50, name: "二級告警" // itemStyle: { // color: '#f19469' // } }, { value: 300, name: "三級告警" // itemStyle: { // color: '#e7bf5f' // } }, { value: 500, name: "四級告警" // itemStyle: { // color: '#74b8dd' // } }, { value: 350, name: "五級告警" // itemStyle: { // color: '#67cb82' // } } ] } ] };
運行結果：
柱狀圖水平滾動條
配置項：
export const BarOption = { color: ["#F1726b", "#f58e6b", "#e7c156", "#73b9dd", "#65ca84"], tooltip: { trigger: "axis", axisPointer: { // 座標軸指示器，座標軸觸發有效 type: "shadow" // 默認爲直線，可選爲：'line' | 'shadow' } }, dataZoom: ConstDataZoom, legend: { data: ["一級", "二級", "三級", "四級", "五級"], itemWidth: 9, itemHeight: 9, itemGap: 20, right: 45 }, grid: { left: 50, right: 0, top: 30, containLabel: true }, xAxis: [ { type: "category", silent: false, data: [ "1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月" ], axisTick: { alignWithLabel: true }, splitLine: { show: true, lineStyle: { // 網格顏色 color: ["#E5EFF5"] } }, axisLine: { lineStyle: { color: "#ccc" } }, axisLabel: { color: "#3A3A3A", interval: "auto" }, splitArea: { show: false } } ], yAxis: [ { type: "value", name: "次數", minInterval: 1, //設置成1保證座標軸分割刻度顯示成整數。 nameTextStyle: { color: "#838383" }, splitLine: { show: true, lineStyle: { // 網格顏色 color: ["#E5EFF5"] } }, axisLine: { lineStyle: { color: "#E5EFF5" } }, axisLabel: { color: "#3A3A3A", interval: 0 } } ], series: [ { name: "一級", type: "bar", data: [320, 332, 301, 334, 390, 320, 332, 301, 334, 390] }, { name: "二級", type: "bar", data: [220, 182, 191, 234, 290, 220, 182, 191, 234, 290] }, { name: "三級", type: "bar", data: [150, 232, 201, 154, 190, 150, 232, 201, 154, 190] }, { name: "四級", type: "bar", data: [220, 182, 191, 234, 290, 220, 182, 191, 234, 290] }, { name: "五級", barGap: 0, type: "bar", data: [220, 182, 191, 234, 290, 220, 182, 191, 234, 290] } ] };
運行結果：
