Echarts8-- 使用echarts达到目标柱状图
发布日期:2021-05-18 11:33:56 浏览次数:21 分类:精选文章

本文共 1680 字,大约阅读时间需要 5 分钟。

后来添加的

感觉之前写的轴线好麻烦,换这个吧

以下是优化后的代码配置:

option = {

color: ['#1890FF', '#36CBCB', '#4ECB73'],
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
crossStyle: {
color: '#999'
}
}
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
toolbox: {
feature: {
dataView: {show: true, readOnly: false},
magicType: {show: true, type: ['line', 'bar']},
restore: {show: true},
saveAsImage: {show: true}
}
},
legend: {
itemHeight: '5',
data: ['人工发送量', '准备转移预警短息', '立即转移预警短信']
},
xAxis: {
type: 'category',
data: ['2020-01', '2020-02', '2020-03', '2020-04', '2020-05', '2020-06', '2020-07', '2020-08', '2020-09', '2020-10', '2020-11', '2020-12'],
axisPointer: {
type: 'shadow'
},
axisTick: {
show: false
}
},
yAxis: [
{
type: 'value',
axisLabel: {
show: true,
textStyle: {
color: "black"
}
},
axisTick: {
show: false
},
axisLine: {
show: true,
lineStyle: {
color: "#ccc",
width: 0,
type: "solid"
}
}
}
],
series: [
{
name: '人工发送量',
type: 'bar',
data: [2.0, 4.9, 7.0, 2.2, 25.6, 6.7, 15.6, 12.2, 32.6, 20.0, 6.4, 3.3]
},
{
name: '准备转移预警短息',
type: 'bar',
data: [2.6, 5.9, 9.0, 6.4, 8.7, 7.7, 15.6, 12.2, 8.7, 18.8, 6.0, 2.3]
},
{
name: '立即转移预警短信',
type: 'bar',
data: [2.0, 2.2, 3.3, 4.5, 6.3, 12.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2]
}
]
};

结果:

图1显示了优化后的图表配置,轴线和刻度已经隐藏。

原始图:

图2展示了原始版本的图表配置,包含完整的轴线和刻度。

目标图:

图3是目标版本的图表,保留了更简洁的轴线配置。

代码:

以下是优化后的ECharts代码,您可以直接在ECharts官网运行:

option = {

// ... 其他保留不变的配置
xAxis: {
type: 'category',
data: ['2020-01', '2020-02', '2020-03', '2020-04', '2020-05', '2020-06', '2020-07', '2020-08', '2020-09', '2020-10', '2020-11', '2020-12'],
axisPointer: {
type: 'shadow'
},
axisTick: {
show: false
}
},
// ... 其他保留不变的配置
series: [
// ... 其他保留不变的配置
]
};

上一篇:Echarts9-- ECharts 的 legend 样式修改
下一篇:快速删除node-module

发表评论

最新留言

路过按个爪印,很不错,赞一个!
[***.219.124.196]2025年05月06日 03时59分07秒