Echart自定义y轴刻度信息1
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ECharts</title>
<!-- 引入 echarts.js -->
<script src="echarts.common.min.js"></script>
</head>
<body>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="container" style="width: 600px;height:400px;"></div>
<script type="text/javascript">
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('container')); // 指定图表的配置项和数据
var option = {
title: {
text: 'ECharts 入门示例'
},
tooltip: {},
legend: {
data:['销量1']
},
xAxis: {
data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
},
yAxis: {
min:0,
max:4,
axisLabel:{
formatter: function (value) {
var texts = [];
if(value==0){
texts.push('woo');
}
else if (value <=1) {
texts.push('好');
}
else if (value<= 2) {
texts.push('很好');
}
else if(value<= 3){
texts.push('非常好');
}
else{
texts.push('完美');
}
return texts;
}
}
},
series: [{
name: '销量1',
type: 'bar',
data: [1,4,2,3,2,0]
}
]
}; // 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
</script>
</body>
</html>
效果图：
关键是定义一个在 yAxis - axisLabel 中重写formatter 的方法，设置index的取值范围，对应到一个固定的刻度值。特殊情况：如果series中只有一个值，图中会封顶展示；此时需要设置max的值，才能让这个单个柱子也能出现在预期的刻度高度。
原链接：https://www.cnblogs.com/conserdao/p/6911048.html
Echart自定义y轴刻度信息1的更多相关文章
- Echart自定义y轴刻度信息2
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
- Winform中自定义添加ZedGraph右键实现设置所有Y轴刻度的上下限
场景 Winforn中实现ZedGraph自定义添加右键菜单项(附源码下载): https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/10 ...
- Winform中实现ZedGraph新增自定义Y轴上下限、颜色、标题功能
场景 Winform中实现ZedGraph的多条Y轴(附源码下载): https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/1001322 ...
- 坐标轴刻度取值算法-基于魔数数组-源于echarts的y轴刻度计算需求
本文链接:https://blog.csdn.net/qq_26909801/article/details/96966372数值型坐标轴刻度计算算法前言算法描述上代码代码运行效果结语前言因实习的公司 ...
- highcharts 不显示X轴 Y轴 刻度
xAxis: { tickWidth:0, //设置刻度标签宽度 lineColor:'#ffffff',//设置坐标颜色 lineWidth:0, //设置坐标宽度 la ...
- 实用小工具不定期合集(textarea 高度自适应、自动计算Y轴刻度、json转table)
1.textarea高度自适应 这个非常有用,但是网上的解决方案都不尽人意,话不多说,上代码. function auto (elem) { var minHeight = 30 var change ...
- Winform中设置多条Y轴时新增的Y轴刻度不显示问题解决
场景 Winform中实现ZedGraph的多条Y轴(附源码下载): https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/1001322 ...
- echarts 修改y轴刻度间隔问题
其中min.max可以自定义可以动态获取数据 yAxis : [ { type : 'value', axi ...
- echarts Y轴刻度保留几位小数
yAxis: [ { type: 'value', name: '雨量(mm)', nameLocation: 'start', inverse: true, axisLabel: { ...
随机推荐
- 微信小程序相关一、模仿京东静态登录页面
一.培训的第一天,基本上没有什么最新的东西,但是看到老师的代码收获的确实是不少. 1.1.首页代码很简洁,将共有的样式都提取的很好. 1.2.其次是每一个小块写样式的时候用到了好多子代选择器和后代选择 ...
- Spring注解配置Aop
之前学习了SpringAop的基本原理.http://www.cnblogs.com/expiator/p/7977975.html 现在尝试使用注解来配置SpringAop. Aop,面向切面编程. ...
- 410. Split Array Largest Sum 把数组划分为m组，怎样使最大和最小
［抄题］: Given an array which consists of non-negative integers and an integer m, you can split the arr ...
- IIS7日志中时间与系统时间不一致的原因
最近在分析web日志,发现IIS7日志中时间与系统时间不一致,即本该上班时间才产生的产并发访问日志,全部发生在凌晨至上班前. 本以为是系统时间设置错误,检查后一切正常.后查询资料,原来是这个原因: 日 ...
- 一个新手后端需要了解的前端核心知识点之position（一）
以下内容是基于观看慕课网视频教程总结的知识点,边打代码边总结,符合自己的思维习惯.不是针对新手入门 我做程序的初衷是想做一个网站出来.HTML语言当然重要啊,缺什么就百度什么,很浪费时间,还是好好的打 ...
- ubuntu启动流程和要读取相关文件
当前系统环境为:linux mint mate 17.1(基于ubuntu14.04的衍生版) 查阅资料后总结如下: 首先: /etc/rc.d链接目标为:/etc /etc/rc*.d文件夹中的脚本 ...
- CSS选择器种类及介绍
首先说主都有哪些先择器 1.标签选择器(如:body,div,p,ul,li) 2.类选择器(如:class="head",class="head_logo") ...
- java.lang.ClassCastException: com.liuyang.annocation.UserAction cannot be cast to com.liuyang.annocation2.UserAction at com.liuyang.annocation2.App.test
java.lang.ClassCastException: com.liuyang.annocation.UserAction cannot be cast to com.liuyang.annoca ...
- CGLIB介绍与原理（通过继承的动态代理）
一.什么是CGLIB? CGLIB是一个功能强大,高性能的代码生成包.它为没有实现接口的类提供代理,为JDK的动态代理提供了很好的补充.通常可以使用Java的动态代理创建代理,但当要代理的类没有实现接 ...
- freePCRF免费版体验
[摘要]遍寻网络数昼夜,未得开源PCRF,亦未得有参考价值的PCRF相关文档.所幸觅得免费体验版freePCRF软件.可窥见PCRF设计思路.方法:PCC规则定义.管理策略:遂记录安装.体验心得. f ...