Echart自定义y轴刻度信息2
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ECharts</title>
<!-- 引入 echarts.js -->
<script src="echarts.common.min.js"></script>
</head>
<body>
<div id="container" style="width: 600px;height:400px;"></div>
<script type="text/javascript">
var dom = document.getElementById("container");
var myChart = echarts.init(dom);
var app = {};
option = null;
app.title = '坐标轴刻度与标签对齐'; option = {
color: ['#e5b87f'],
tooltip : {
trigger: 'axis',
axisPointer : { // 坐标轴指示器，坐标轴触发有效
type : 'line' // 默认为直线，可选为：'line' | 'shadow'
}
},
grid: {
top: '3%',
left: '0',
right: '0',
bottom: '0',
containLabel: true
},
xAxis : [
{
type : 'category',
data : [1,2,3,4,5], //数据值
axisTick: {
alignWithLabel: true
}
}
],
// yAxis:{},//默认
yAxis: {
axisTick : {show: false},//去掉刻度
splitLine:{ //去掉背景水平网格线
show:false
},
min:0,
max:5,
axisLabel:{
// 自定义y轴刻度信息
formatter: function (value) {
var texts = [];
if(value==0){}
else if(value==1){
texts.push('凶');
}
else if (value ==2) {
texts.push('次凶');
}
else if (value == 3) {
texts.push('吉');
}
else if(value == 4){
texts.push('中吉');
}
else{
texts.push('大吉');
}
return texts;
}
}
},
series : [
{
name:'直接访问',
type:'bar',
barWidth: '45%',
data:[1,2,3,4,5,6,7,8,9,10,11,12] //x轴1到12月份
}
]
};
;
if (option && typeof option === "object") {
myChart.setOption(option, true);
}
</script>
</body>
</html>
效果图：
Echart自定义y轴刻度信息2的更多相关文章
- Echart自定义y轴刻度信息1
<!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: { ...
随机推荐
- tomcat的配置文件server.conf中的元素的理解
tomcat的配置文件server.conf中的元素的理解 tomcat作为一个servlet服务器本身的配置文件是tomcat_home/conf/server.conf,这个配置文件中有很多元素, ...
- elasticsearch 安装 head插件
head插件 切换到Elasticsearch的安装目录 cd ~/demo/elasticsearch/es1 执行安装命令 [root@localhost es1]# bin/plugin ins ...
- sh 脚本
more log.log| awk '{if($1>"15:10:54.851" && length($1)==12){print $0}}'
- Apache Spark介绍及集群搭建
简介 Spark是一个针对于大规模数据处理的统一分析引擎.其处理速度比MapReduce快很多.其特征有: 1.速度快 spark比mapreduce在内存中快100x,比mapreduce在磁盘中快 ...
- css3中的transform、transition、translate、animation（@keyframes）的区别
一.前言 在CSS中,我们经常会使用到transform.transition.translate.animation(@keyframes)这些长得相似,又不好区分的属性(值).每当需要使用它们,都 ...
- 20. Valid Parentheses检验括号字符串的有效性
［抄题］: Given a string containing just the characters '(', ')', '{', '}', '[' and ']', determine if th ...
- Python学习笔记_使用openpyxl操作Excel，在同一个文件里复制某一个sheet
应用场景:定制一个Excel模板文件,其中定义了一个模板Sheet,以此模板文件里的模板sheet为样例,制作报表,里面有不止一个模板样例Sheet 一.软件环境: 1.OS:Win10 64位 2. ...
- SpringBoot 中 使用Mybatis时 如果后端数据库为 Oracle注意事项
报错信息如下: Could not set parameters for mapping: ParameterMapping{property='age', mode=IN, javaType=cla ...
- DSA 算法
一.简介 DSA算法是Schnorr和ElGamal签名算法的变种,被美国NIST作为DSS(DigitalSignature Standard).它是一种公开密钥算法,用作数字签名. http:// ...
- linux下两台服务器文件实时同步方案实现-乾颐堂
假设有如下需求: 假设两个服务器: 192.168.0.1 源服务器 有目录 /opt/test/ 192.168.0.2 目标服务器 有目录 /opt/bak/test/ 实现的目的就是保持这两 ...