Echart自定义y轴刻度信息2
信息 自定义 刻度 Echart
2023-09-14 08:58:23 时间
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>ECharts</title> <!-- 引入 echarts.js --> <script src="echarts.common.min.js"></script> </head> <body> <div id="container" style="width: 600px;height:400px;"></div> <script type="text/javascript"> var dom = document.getElementById("container"); var myChart = echarts.init(dom); var app = {}; option = null; app.title = '坐标轴刻度与标签对齐'; option = { color: ['#e5b87f'], tooltip : { trigger: 'axis', axisPointer : { // 坐标轴指示器,坐标轴触发有效 type : 'line' // 默认为直线,可选为:'line' | 'shadow' } }, grid: { top: '3%', left: '0', right: '0', bottom: '0', containLabel: true }, xAxis : [ { type : 'category', data : [1,2,3,4,5], //数据值 axisTick: { alignWithLabel: true } } ], // yAxis:{},//默认 yAxis: { axisTick : {show: false},//去掉刻度 splitLine:{ //去掉背景水平网格线 show:false }, min:0, max:5, axisLabel:{ // 自定义y轴刻度信息 formatter: function (value) { var texts = []; if(value==0){} else if(value==1){ texts.push('凶'); } else if (value ==2) { texts.push('次凶'); } else if (value == 3) { texts.push('吉'); } else if(value == 4){ texts.push('中吉'); } else{ texts.push('大吉'); } return texts; } } }, series : [ { name:'直接访问', type:'bar', barWidth: '45%', data:[1,2,3,4,5,6,7,8,9,10,11,12] //x轴1到12月份 } ] }; ; if (option && typeof option === "object") { myChart.setOption(option, true); } </script> </body> </html>
效果图:
相关文章
- 【愚公系列】2022年09月 微信小程序-获取WIFI信息
- 招聘|悠桦林信息科技(上海)有限公司,欢迎志同道合的你!
- C#通过接口获取税控盘基本信息「建议收藏」
- R优雅的进行统计分析(2)自定义添加统计信息
- 2023电子科技大学计算机考研信息汇总及答案_计算机考研难度排行榜
- C# 在自定义的控制台输出重定向类中整合调用方信息
- 【Groovy】自定义 Xml 生成器 BuilderSupport ( 创建 XmlNode 节点 | 管理 XmlNode 节点并将根节点转为 Xml 信息 | 完整代码示例 )
- 【Android Gradle 插件】自定义 Gradle 插件优化图片 ③ ( 识别 png 图片中的 alpha 通道信息 | png 图片的 IHDR 类型数据块 )
- 警惕!Emotet新变体正从Google Chrome中窃取你的信用卡信息
- 自定义Spring Cloud Sleuth的跟踪信息
- .NET Core反射获取带有自定义特性的类,通过依赖注入根据Attribute元数据信息调用对应的方法
- 提取文本Linux脚本:从文本中提取信息(linux脚本中)
- Tomcat信息泄露与远程代码执行漏洞
- 信息MySQL: 探索账号信息的奥秘(mysql查询账号)
- Oracle可视化查看链接信息(oracle查看链接)
- 【SQL Server自我查询:如何轻松获取你所需要的信息】(自查询sqlserver)
- 构建SQL Server平台 实现企业信息可持续管理(sqlserver平台)
- 使用Redis轻松存储时间信息(如何用redis存储时间)
- 把握机遇,迈向Oracle信息节点之路(Oracle信息节点)
- 用ASP实现对MP3曲目信息的操作