
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: [ // ... 其他保留不变的配置 ] };发表评论
最新留言
路过按个爪印,很不错,赞一个!
[***.219.124.196]2025年05月06日 03时59分07秒
关于作者

喝酒易醉,品茶养心,人生如梦,品茶悟道,何以解忧?唯有杜康!
-- 愿君每日到此一游!
推荐文章
【Stimulsoft Reports.Net教程】使用DesignerFx
2019-03-15
攻防世界 Pwn 新手
2019-03-15
mybtis-plus 出现 Wrong namespace
2019-03-15
用户登陆的验证码的制作
2019-03-16
升级java11后,maven命令打包报错
2019-03-16
springboot redis key乱码
2019-03-16
Win10禁用自带的笔记本键盘
2019-03-16
insmod模块的几种常见错误
2019-03-16
写时复制集合 —— CopyOnWriteArrayList
2019-03-16
什么是redis的缓存雪崩, 穿透, 击穿?
2019-03-16
【转载】DSP基础--定点小数运算
2019-03-16
idea thymeleaf页面变量报错解决
2019-03-16
云游戏,打响5G第一战
2019-03-16
Docker 拉取镜像速度太慢
2019-03-16
HUAWEI防火墙通过IKE方式协商IPSec隧道(采用预共享密钥认证)
2019-03-16
计网复习3
2019-03-16
JDK动态代理的实现原理
2019-03-16
Spring Security 架构与源码分析
2019-03-16
教程丨使用MeterSphere做Dubbo接口测试
2019-03-16
【毕设-STM32f103寄存器版本】智能防盗系统
2019-03-16