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: { ...
随机推荐
- /etc/rc5.d/s991local: line25: eject:command not found错误
使用虚拟机安装centos出现错误,原因是我使用的镜像是最小级别的,没有图形化界面,只有终端窗口 有人用vmware安装minimal centos报错/etc/rc5.d/s99local : ...
- 微服务性能优化之thrift改造
在我当前所做的web项目中,采用前后端分离模式前端通过Django 提供restful接口,后端采用微服务架构,微服务之间的调用采用jsonrpc,由于微服务之间的调用很频繁,导致前端得到的响应很慢, ...
- Vertex and fragment programs
[Vertex and fragment programs] When you use vertex and fragment programs (the so called "progra ...
- Spark之 使用SparkSql操作mysql和DataFrame的Scala实现
通过读取文件转换成DataFrame数据写入到mysql中 package com.zy.sparksql import java.util.Properties import org.apache. ...
- Opencv 发现轮廓 findContours
vector<vector<Point>> vec_p; vector<Vec4i> vec_4f; findContours(img_canny1, vec_p, ...
- [C++] struct memory allocation
MAX-byte alignment (最大单位对齐) typedef struct user USER; typedef struct employee E; struct user{ ]; //t ...
- JSON Web Token（JWT）学习笔记
1.JWT 的Token 标准的Token由三个部分并以.(点号)连接方式组成,即 header.payload.signature,如下 eyJhbGciOiJIUzI1NiIsInR5cCI6Ik ...
- hdu 折线分割平面（递推）
题解: 首先我们考虑直线的情况: 当n=1时原来的1个平面被分割成了2个: 当n=2时原来的2个平面被分割成了4个: 当n=3时原来的4个平面被分割成了7个: 也就是说F(n)=F(n-1)+n且n= ...
- WCF和ASP.NET Web API在应用上的选择(转)
出处:http://www.cnblogs.com/shanyou/archive/2012/09/26/2704814.html 在最近发布的Visual Studio 2012及.NET 4.5中 ...
- HttpAnalyzerStdV7使用教程
相关链接:HttpAnalyzerStdV7安装教程 1.1.使用HttpAnalyzerStdV7监控服务器返回消息 1.运行前关闭要监控的浏览器. 2.运行软件: 3.点击"Start& ...