前端在图表展示的时候,使用较多的是Echart库,正好这几天在做相关的项目,简单记录一下涉及到的几个简单需求实现。
标题前面加图形
效果类似于这样:
我的实现方案是使用 rich 来生成对应的图形,具体配置如下:
javascript
/** @format */
option = {
title: {
text: "{rectangle|} 示例图",
textStyle: {
fontSize: 18,
rich: {
// 这个地方的key要和上面text后大括号中的名称保持一致!!!
rectangle: {
width: 40,
height: 18,
backgroundColor: "#7C260B"
}
}
}
}
};
上面配置需要注意的是 text 中的类似于模板字符串的写法,里面的竖线(|)不能少,如果少了它,那 rectangle 就被解析成一个字符串了。
配置显示的最大个数
假如我们的数据比较多,一次性全部展示出来的话会密密麻麻,用户体验不好,那我们就需要根据需要展示的总条数,计算出需要给用户展示出来的视图百分比范围。
需求:X 轴最多展示的数据不能超过 50 个。
方案:Echarts 的滚动是通过 dataZoom 属性来控制的,每次拿到数据后进行计算,以 50 为判断依据,看是否需要分部展示。
JavaScript
// total:总条数
// batch 允许最大显示的条数
function getDataZoomEndValue(total, batch) {
return IControl.x.length > batch ? Math.ceil(batch * 100 / IControl.x.length) : 100;
}
/** @format */
option = {
dataZoom: {
type: "inside",
start: 0,
end: getDataZoomEndValue(totalData.length, 50),
zoomLock: true
}
};
end 属性确定的就是视图最大百分比。
设置异常点
需求效果如下:
要将一些超出范围的点用不同的颜色标志出来。
方案:使用markPoint属性实现,即在需要标志出来的点上再加一层特殊颜色的点,展示出来的是特殊颜色。
javascript
/** @format */
markPointData = [
{
name: "order_6",
xAxis: "6",
yAxis: 1.812
},
{
name: "order_9",
xAxis: "9",
yAxis: 1.2
}
];
option = {
series: [
{
name: "test",
type: "line",
symbol: "circle",
symbolSize: 8,
data: data,
z: 4,
itemStyle: {
borderWidth: 2,
borderColor: "#014D64",
color: "#014D64"
},
lineStyle: {
width: 2
},
markPoint: {
symbol: "circle",
label: {
show: false
},
itemStyle: {
color: "#7C260B",
borderColor: "#7C260B",
borderWidth: 2
},
symbolSize: 8,
data: markPointData
}
}
]
};
需要注意的是,markPoint.itemStyle.borderWidth 和 markPoint.symbolSize 相加必须要大于 symbolSize 与 itemStyle.
borderWidth 之和,否则标出的特殊颜色覆盖不全正常的颜色。
总结
以上就是几个关于 Echart 图形的简单配置方法,希望对大家有所帮助,大家如果有更好的实现方案,欢迎在评论区留言交流!