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: { ...
随机推荐
- 如何查看Mysql服务器上的版本
select version(); 1,mysql 的守护进程是mysqld [root@localhost ~]# service mysqld start 启动 MySQL: [确定] 你可以看看 ...
- Bresenham画线算法
[Bresenham画线算法] Bresenham是一种光栅化算法.不仅可以用于画线,也可以用用画圆及其它曲线. 通过lower与upper的差,可以知道哪一个点更接近线段: 参考:<计算机图形 ...
- Apache Hive （三）Hive元数据信息对应MySQL数据库表
转自:https://www.cnblogs.com/qingyunzong/p/8710356.html 概述 Hive 的元数据信息通常存储在关系型数据库中,常用MySQL数据库作为元数据库管理. ...
- 一张图记住TCP/IP通讯中的IP地址配置
TCP/IP通讯情景: 用网线将计算机A(服务器Server)和计算机B(Client)连接起来.程序代码在计算机A中,计算机B中安装有TCP/IP通讯助手. (图中屏幕大的是计算机A,屏幕小的笔记本 ...
- nltk 之 snowball 提取词干-乾颐堂
机器学习中很重要的应用场景就是机器自动分类,而分类的关键是词干提取.所以我们要用到snowball.下面说一下snowball 提取词干的两种方法. 两种方法: 方法一: >>> f ...
- [Fiddler] 在 Composer 中对HTTP报文进行编辑，重新执行
如果想要对某个HTTP请求进行编辑,然后重新执行观察结果,可以将这个报文从左侧拖放到右侧的Composer里面 这样就可以很方便的修改HTTP请求的方法,报文头,报文体 在用 SoapUI 做 API ...
- Part2_lesson2---ARM处理器工作模式
arm公司发布的学习手册:ARM Architecture Reference Manual. 打开之: 找到Programmers' Model->A2.2 Processor modes. ...
- Go 笔记和疑问?
前言: 本文是学习<<go语言程序设计>> -- 清华大学出版社(王鹏 编著) 的2014年1月第一版 做的一些笔记 , 如有侵权, 请告知笔者, 将在24小时内删除, 转载请 ...
- Pandas -- Merge,join and concatenate
Merge, join, and concatenate pandas provides various facilities for easily combining together Series ...
- C#6.0特性（快来围观）(转)
出处:http://www.cnblogs.com/HJL-Blog/p/4457632.html 说明一下,很多博友一进来就认为仅仅是语法糖,C#语法的更新,代表着它的进步,语法糖是为了让我们更好的 ...