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: { ...
随机推荐
- 从零玩转JavaWeb系列7web服务器-----get与post的区别
总结get与post的区别 get参数通过url传递,post放在request body中. get请求在url中传递的参数是有长度限制的,而post没有. get比post更不安全,因为参数直接暴 ...
- built-in SpecularType of Unity
[built-in SpecularType of Unity] 1.声明变量. 注意并没有在Shader中声明_SpecColor,因为Lighting.cginc中已经帮我们声明. 2.声明使用B ...
- SMTPSenderRefused: (530, ‘5.5.1 Authentication Required. Learn more at \n5.5.1
在跟着<Flask Web开发:基于Python的Web应用开发实战>一书学习时,出现了以上错误提示. 问题出于第11章--博客文章.当运行 python manage.py runser ...
- Asp.net 使用Neatupload 第三方控件上传大文件，在IIS7上无法正常工作解决
使用环境:Window Server2008 + IIS7 更改web.config配置 1.在<configSections></configSections>节内加入: & ...
- mysql oracle计算两点之间的距离
mysql函数: SET FOREIGN_KEY_CHECKS=0; DROP FUNCTION IF EXISTS `getDistance`;DELIMITER ;;CREATE DEFINER= ...
- ORM思想
-------------------siwuxie095 什么是 ORM 思想 1.Hibernate 使用 ORM 思想对数据库进行 CRUD 操作 2.ORM:Object Relational ...
- EasyBuy项目总结_20180409
一.项目技术点 1.熟练使用jsp及el和jstl表达式 el: $() jstl: 1.导包; 2.声明<%@ taglib uri=" " preffix="c ...
- 回文链表 · Palindrome Linked List
［抄题］: 设计一种方式检查一个链表是否为回文链表.1->2->1 就是一个回文链表. [暴力解法]: 时间分析: 空间分析: ［思维问题］: 以为要从从后往前扫描,不知道调用revers ...
- code1316 文化之旅
文化之旅的本质是最短路问题,只不过添加了一个文化排斥,仅需要做最短路时判断一下是否排斥即可 因为数据较小,采用了Floyd算法,以下是代码,关键部分附注释: #include<iostream& ...
- Python爬虫实战八之利用Selenium抓取淘宝匿名旺旺
更新 其实本文的初衷是为了获取淘宝的非匿名旺旺,在淘宝详情页的最下方有相关评论,含有非匿名旺旺号,快一年了淘宝都没有修复这个. 可就在今天,淘宝把所有的账号设置成了匿名显示,SO,获取非匿名旺旺号已经 ...