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: { ...
随机推荐
- 转载--js对象无法当成参数传递
今天我碰到了这个问题一头雾水,明明记得对象是可以传参的啊.我使用了一款基于bootstrap的表格插件DataTables,想把行信息直接传给操作函数,方便编辑(此行信息是一个对象,按道理可以的啊), ...
- redis在linux下的安装和配置
1 Installation Download, extract and compile Redis with: $ wget http://download.redis.io/releases/re ...
- centos7 yum 安装 mysql
CentOS7默认数据库是mariadb,配置等用着不习惯,因此决定改成mysql,但是CentOS7的yum源中默认好像是没有mysql的.为了解决这个问题,我们要先下载mysql的repo源. 1 ...
- 如何降低Unity程序的Drawcall
[如何降低Unity程序的Drawcall] Unity can combine a number of objects at runtime and draws them together with ...
- 使用CMD命令行来对MySQL数据库执行迁移、备份、恢复
1. 导出数据库数据 "C:\Program Files\MySQL\MySQL Server 5.6\bin\mysqldump.exe" -u root -p123abc ...
- [hdu4347]The Closest M Points(平衡树式kdtree)
解题关键:模板题(结合起来了) #include<iostream> #include<cstdio> #include<cstring> #include< ...
- android-tip-SocketException之ETIMEDOUT
异常出现时间 如果我们有一个长连接,此时网络被关闭,或者暂时失去信号, 此时就会出现此异常. 如果出现此异常,则不得不重连.
- Appium+python自动化-Remote远程控制
前言 在第三篇启动app的时候有这样一行代码driver = webdriver.Remote('http://192.168.1.1:4723/wd/hub', desired_caps),很多小伙 ...
- Java-Excel文件读取
import java.io.File; import java.io.IOException; import org.testng.annotations.DataProvider; import ...
- redis 面试题1 有用
1.什么是redis? Redis 是一个基于内存的高性能key-value数据库. 2.Reids的特点 Redis本质上是一个Key-Value类型的内存数据库,很像memcached,整个数据库 ...