echarts配置option(2)——条形图
基本功能概述
本配置使用 ECharts 库创建了一个包含柱状图和动态光效效果的图表。图表的数据来自于一个包含多种功能类型和对应数量的数组。数据经过排序后，用于生成柱状图的高度和类别标签。此外，图表还包含了数据缩放组件，允许用户通过滚动查看全部或部分数据。
1. 数据准备与排序
var list = [
// 数据项，包含功能类型和数量
];
var ydata = []; // 用于存储Y轴标签（功能类型）
var seriesdata = []; // 用于存储柱状图数据（数量）
// 对数据进行排序，按照数量从小到大
list.sort(function (a, b) {
return a.count - b.count;
});
// 遍历排序后的数据，填充ydata和seriesdata
list.forEach(item => {
ydata.push(item.func_type);
seriesdata.push(item.count);
});
2. 响应式设置
var end = 60; // 数据缩放组件的结束位置
let nowClientWidth = document.documentElement.clientWidth; // 当前页面宽度
// 根据页面宽度调整图表元素大小
function nowSize(val, initWidth = 1920) {
return val * (nowClientWidth / initWidth);
}
3. ECharts 配置项
var option = {
color: ["#5470C6"], // 全局颜色设置
tooltip: {
trigger: 'axis', // 触发类型为轴触发
// formatter: function (val) { return val.value + 'km'; } // 自定义提示框内容（未使用）
},
grid: {
left: '3%', right: 'auto', bottom: '4%', top: '5%', containLabel: true // 图表距离四周的距离
},
xAxis: {
type: 'value', // 数值轴
axisTick: { show: false }, // 不显示坐标轴刻度线
axisLine: { show: false }, // 不显示坐标轴线
axisLabel: { show: false }, // 不显示坐标轴上的文字
splitLine: { show: false } // 不显示网格线
},
dataZoom: [{
type: 'inside', // 内置型数据区域缩放组件
orient: 'vertical', // 垂直方向
start: 100, end: end, // 缩放范围
zoomOnMouseWheel: false, // 关闭滚轮缩放
moveOnMouseWheel: true, // 开启滚轮平移
moveOnMouseMove: true // 鼠标移动能触发数据窗口平移
}],
yAxis: [{
type: 'category', // 类目轴
data: ydata, // Y轴标签
triggerEvent: true, // 坐标轴的标签是否响应和触发鼠标事件
axisTick: { show: false }, // 不显示坐标轴刻度线
axisLine: { show: false }, // 不显示坐标轴线
splitLine: { show: false }, // 不显示网格线
axisLabel: {
show: true, color: '#fff', fontSize: nowSize(20) // 显示Y轴标签，设置颜色和字体大小
}
}, {
type: 'category', // 辅助类目轴，用于显示柱体右侧标签
axisTick: 'none', axisLine: 'none', show: true,
axisLabel: {
color: '#fff', fontSize: nowSize(20),
formatter: function (value) { return value + ' km'; } // 自定义标签内容
},
data: seriesdata // 辅助数据，用于显示标签
}],
series: [
{
type: 'bar', // 柱状图
data: seriesdata, // 柱状图数据
barWidth: nowSize(5), // 柱状图条体的粗细
itemStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 1, 1, [ // 条体渐变颜色
{ offset: 0, color: "#28CDFC" },
{ offset: 1, color: "#55E9F5" }
])
}
},
{
type: 'lines', // 动态光效效果
coordinateSystem: 'cartesian2d',
data: seriesdata.map((item, index) => ({
coords: [[0, index], [item - 50, index]] // 坐标点，用于绘制光效路径
})),
effect: {
show: true, period: 2.5, trailLength: .5, symbolSize: nowSize(5), symbol: "pin", loop: true, color: "rgba(255,255,255,1)" // 光效配置
},
lineStyle: { width: 0, opacity: 0.6, curveness: 0 }, // 线条样式
z: 99 // 图层顺序，确保光效在最上层
}
]
};
详细功能列表
- 数据排序：原始数据根据数量进行升序排序。 Y轴标签：提取排序后的功能类型作为Y轴标签。
- 柱状图数据：提取排序后的数量作为柱状图的高度。
- 响应式设计：根据页面宽度调整图表元素大小，包括字体和柱状图条体的粗细。
- 数据缩放：内置型数据区域缩放组件，允许用户滚动查看全部或部分数据。
- 柱状图：显示排序后的数据，条体具有渐变颜色。
- 动态光效：在柱状图上添加动态光效效果，增强视觉效果。
总结
这段代码定义了一个包含多种电缆设施类型及其数量的列表，对该列表进行了排序，并基于排序后的数据创建了一个ECharts图表配置对象。图表配置包括设置颜色、提示框、网格、坐标轴（其中X轴隐藏，Y轴显示设施类型及经过处理的数值标签，并添加了额外的Y轴用于显示数值及单位）、数据缩放组件以及两个系列（一个条形图系列用于显示数量，另一个线条光效系列用于增强视觉效果）。此外，图表还考虑了响应式设计，通过调整字体大小等属性以适应不同屏幕尺寸。
最后源码
var list = [
{
"count":64,
"func_type": "电缆隧道"
},
{
"count":46,
"func_type": "电缆排管"
},
{
"count":36,
"func_type": "电缆桥架"
},
{
"count":75,
"func_type": "顶管/拖拉管"
},
{
"count": 34,
"func_type": "电缆沟"
},
{
"count": 64,
"func_type": "电缆沟"
},
{
"count":35,
"func_type": "低压线柄"
},
{
"count": 85,
"func_type": "电缆隧道"
},
{
"count": 24,
"func_type": "电缆排管"
},
{
"count":85,
"func_type": "电缆桥架"
},
{
"count":35,
"func_type": "顶管/拖拉管"
},
{
"count":54,
"func_type": "电缆沟"
},
{
"count":24,
"func_type": "电缆沟"
},
{
"count": 34,
"func_type": "低压线柄"
},
]
var ydata = []
var seriesdata = []
list.sort(function (a, b) {
return a.count - b.count;
});
list.forEach(item => {
ydata.push(item.func_type)
seriesdata.push(item.count)
})
var end = 60
let nowClientWidth = document.documentElement.clientWidth;
function nowSize(val, initWidth = 1920) {
return val * (nowClientWidth / initWidth);
}
option = {
color: ["#5470C6"],
tooltip: {
trigger: 'axis',
// formatter:function (val) {
// return val.value+'km'
// }
},
grid: {
left: '3%',
// right: '4%',
bottom: '4%',
top: '5%',
containLabel: true
},//图表距离四周的距离
xAxis: {
type: 'value',
axisTick: {
show: false // 不显示坐标轴刻度线
},
axisLine: {
show: false, // 不显示坐标轴线
},
axisLabel: {
show: false, // 不显示坐标轴上的文字
},
splitLine: {
show: false // 不显示网格线
},
},
dataZoom:[{
type: 'inside',
// zoomLock: true,
orient:'vertical',
start: 100, // 表示 30% 的位置开始
end: end, // 表示 70% 的位置结束
// startValue: 0,
// endValue: 5,
zoomOnMouseWheel: false, // 关闭滚轮缩放
moveOnMouseWheel: true, // 开启滚轮平移
moveOnMouseMove: true, // 鼠标移动能触发数据窗口平移
}],//数据太多，将图表滚动
yAxis: [{
type: 'category',
data: ydata,
triggerEvent: true,//坐标轴的标签是否响应和触发鼠标事件，默认不响应。
axisTick: {
show: false // 不显示坐标轴刻度线
},
axisLine: {
show: false, // 不显示坐标轴线
},
splitLine: {
show: false // 不显示网格线
},
axisLabel: {
show: true, // 是否显示Y坐标轴上的文字
color: '#fff',//如背景为白色，设置为其他颜色
fontSize: nowSize(20),//字体大小
},
},
{
type: 'category',
// inverse: true,
axisTick: 'none',
axisLine: 'none',
show: true,
axisLabel: {
color: '#fff',//如背景为白色，设置为其他颜色
fontSize: nowSize(20),
formatter: function (value) {
return value + ' km'
},
},
data: seriesdata,
},//柱体右侧标签
],
series: [
{
type: 'bar',
// showBackground: true,
// backgroundStyle: {
// color: '#273865',
// },
data: seriesdata,
barWidth: nowSize(5),//条形图条体的粗细
// label: {
// show: true, // 显示数值
// position: 'right', // 数值显示在右侧
// // 可以通过 formatter 自定义显示格式
// distance: 15,
// formatter: '{c}', // {c} 表示数据值,
// textStyle: { // 数值样式
// color: '#fff', // 数值颜色
// fontWeight: 'bold',
// fontSize: '10'
// }
// },
itemStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 1, 1, [
{
offset: 0,
// color: '#347CDD'
// color:'rgba(27, 54, 167, 0.33)'
color: "#28CDFC"
},
{
offset: 1,
// color: '#56fb93'
// color: 'rgba(226, 87, 69, 1)'
color: '#55E9F5'
}
])
}//条体渐变颜色
},
{
type: 'lines',
coordinateSystem: 'cartesian2d',
data: seriesdata.map((item, index) => {
return {
coords: [
[0, index],
[item-50, index]
]
}
}),
effect: {
show: true,
period: 2.5,
trailLength: .5,
symbolSize: nowSize(5),
symbol: "pin",
loop: true,
color: "rgba(255,255,255,1)"
},
lineStyle: {
width: 0,
opacity: 0.6,
curveness: 0
},
z: 99
}//条体上的光效效果
]
};
扫一扫
334
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
