Echarts图表 相关技术点

1、调整图表大小

grid: {
// 间距是 根据x、y轴计算的;假如都是0,x、y轴的label汉字就隐藏掉了。
// left: 5, // 默认10%,给24就挺合适的。
// containLabel: true, // grid 区域是否包含坐标轴的刻度标签。(如果true的时候,上下左右可以为0了)
x: 50,
y: 50,
x2: 50,
y2: 50,
},

2、tooltip样式格式化

tooltip: {
trigger: 'axis',
formatter: function (params) {
var res = params[0].name;
for (var i = 0; i < params.length; i++) {
res += "<br>" + params[i].marker + params[i].seriesName + ":" + formatSeconds(params[i].data);
}
return res;
}
},

3、series数据格式化

series: [{
name: '开窗时长',
type: 'bar',
data: obj.listOpenDuration,
barWidth: obj.colw,//柱图宽度
itemStyle: {
normal: {
label: {
show: true, //开启显示
position: 'top', //在上方显示
textStyle: { //数值样式
color: 'white',
fontSize: 15
},
formatter: function (params) {
if (params.value > 0) {
return formatSeconds(params.value);
} else {
return "";
}
},
}
}
},
posted @   一只桔子2233  阅读(186)  评论(0编辑  收藏  举报
编辑推荐:
· AI与.NET技术实操系列:向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· Linux系列:如何用heaptrack跟踪.NET程序的非托管内存泄露
· 开发者必知的日志记录最佳实践
· SQL Server 2025 AI相关能力初探
阅读排行:
· 震惊!C++程序真的从main开始吗?99%的程序员都答错了
· 单元测试从入门到精通
· 【硬核科普】Trae如何「偷看」你的代码?零基础破解AI编程运行原理
· 上周热点回顾(3.3-3.9)
· winform 绘制太阳,地球,月球 运作规律
历史上的今天:
2018-12-02 10.3 .NET 3.5 中的扩展方法
点击右上角即可分享
微信分享提示