本文详细介绍了如何配置各种图表，包括饼图、柱状图、环形图等，展示了如何设置标签、数值显示、颜色、布局等关键参数，适用于数据可视化需求。
饼图标签展示数值
配置项：
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]
}
]
};
运行结果：
tooltip.formatter保留默认图标
//tooltip start
option.tooltip.formatter = function(param) {
// console.log("param :>> ", param);
let str = param.length > 0 ? `${param[0].name}<br/>` : "";
param.forEach((item, idx) => {
str +=
renderSpan(item.color) +
item.seriesName +
"：" +
item.value +
units[idx] +
"<br/>";
});
return str;
};
function renderSpan(color) {
return `<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${color};"></span>`;
}
//tooltip end
.............
扫一扫
313
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
