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: { ...
随机推荐
- Writing Surface Shaders
[Writing Surface Shaders] Writing shaders that interact with lighting is complex. There are differen ...
- make: *** No rule to make target `build', needed by `default'. Stop.
[root@xx nginx-1.8.0]# makemake: *** No rule to make target `build', needed by `default'. Stop. [ro ...
- 要生成在[min,max]之间的随机整数，
import java.util.Random; public class RandomTest { public static void main(String[] args) { int max= ...
- combotree 满足条件的节点不可选中
combotree: $("#Parent").treegrid("unselect");
- PCA 原理
PCA的数学原理(转) 1 年前 PCA(Principal Component Analysis)是一种常用的数据分析方法.PCA通过线性变换将原始数据变换为一组各维度线性无关的表示,可用于提取 ...
- Http面试题
http请求由三部分组成,分别是:请求行.消息报头.请求正文 HTTP(超文本传输协议)是一个基于请求与响应模式的.无状态的.应用层的协议,常基于TCP的连接方式,HTTP1.1版本中给出一种持续连接 ...
- Demo—标题左右两侧的对等横线
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- O_DIRECT方式读取文件示例
#include <fcntl.h> #include <stdio.h> #include <stdlib.h> #include <sys/stat.h& ...
- 第02章 查询DSL进阶
本章内容 Lucene默认评分公式是如何工作的. 什么是查询重写. 查询二次评分是如何工作的. 如何在单次请求中实现批量准实时读取操作. 如何在单次请求中发送多个查询. 如何对包括嵌套文档和多值字段的 ...
- 设计模式7---Java动态代理机制详解（JDK 和CGLIB，Javassist，ASM）
class文件简介及加载 Java编译器编译好Java文件之后,产生.class 文件在磁盘中.这种class文件是二进制文件,内容是只有JVM虚拟机能够识别的机器码.JVM虚拟机读取字节码文件,取出 ...