echarts使用记录(三):x/y轴数据和刻度显示及坐标中网格显示、格式化x/y轴数据
1、去掉坐标轴刻度线,刻度数据,坐标轴网格,以Y轴为例,同理X轴
xAxis: [{
type: 'category',
axisTick: {//决定是否显示坐标刻度
alignWithLabel: true,
show:false
},
axisLabel:{ //决定是否显示数据
show:false
}
}],
yAxis: [{
type: 'value',
axisTick: {
show: false
},
splitLine:{ //决定是否显示坐标中网格
show:true
}
}],
2、xAxis.axisLabel.formatter string, Function
刻度标签的内容格式器,支持字符串模板和回调函数两种形式。
// 使用字符串模板,模板变量为刻度默认标签 {value}
formatter: '{value} kg'
// 使用函数模板,函数参数分别为刻度数值(类目),刻度的索引
formatter: function (value, index) {
// 格式化成月/日,只在第一个刻度显示年份
var date = new Date(value);
var texts = [(date.getMonth() + ), date.getDate()];
if (index === ) {
texts.unshift(date.getYear());
}
return texts.join('/');
}
axisLabel:{
show:true,
formatter: function (value, index) {//value当前值,index当前索引
return value.split(' ')[];
}
}
3、echarts 图例显示到右边
legend: {
data:['同龄普通孩子','已具备技能','已泛化技能','已掌握技能','学习中'],
orient: 'vertical', //垂直显示
y: 'center', //延Y轴居中
x: 'right' //居右显示
},
4、折线图平滑曲线
series : [
{
symbol:'none', //去掉折线图中的节点
smooth: false //true 为平滑曲线,false为直线
}
]
echarts使用记录(三):x/y轴数据和刻度显示及坐标中网格显示、格式化x/y轴数据的更多相关文章
- Hive数据导入——数据存储在Hadoop分布式文件系统中,往Hive表里面导入数据只是简单的将数据移动到表所在的目录中!
转自:http://blog.csdn.net/lifuxiangcaohui/article/details/40588929 Hive是基于Hadoop分布式文件系统的,它的数据存储在Hadoop ...
- BI项目中的ETL设计详解(数据抽取、清洗与转换 )(转载)
原文:http://www.cnblogs.com/reportmis/p/5939732.html ETL是BI项目最重要的一个环节,通常情况下ETL会花掉整个项目的1/3的时间,ETL设计的好坏直 ...
- SQL Server 查看数据库在数据缓存(data cache)中占用的空间大小
use master go select * from sys.dm_os_buffer_descriptors go --查看数据库在数据缓存(data cache)中占用的空间大小 --由于每个数 ...
- Highcharts属性与Y轴数据值刻度显示Y轴最小最大值
Highcharts 官网:https://www.hcharts.cn/demo/highcharts Highcharts API文档:https://api.hcharts.cn/highcha ...
- Echarts学习记录——如何给x轴文字标签添加事件
Echarts学习记录——如何给x轴文字标签添加事件 关键属性 axisLabel下属性clickable:true 并给图表添加单击事件 根据返回值判断点击的是哪里 感觉自己的方法有点变扭,有更好办 ...
- ECharts学习记录
一.ECharts在GitHub的地址以及需要引入文件地址: 1.Github地址:https://github.com/ecomfe/echarts 2.官网下载文件地址:http://echart ...
- echarts使用笔记三:柱子对比
app.title = '坐标轴刻度与标签对齐'; option = { title : { //标题 x : 'center', y : 5, text : '对比图' //换行用 \n }, le ...
- {django模型层(二)多表操作}一 创建模型 二 添加表记录 三 基于对象的跨表查询 四 基于双下划线的跨表查询 五 聚合查询、分组查询、F查询和Q查询
Django基础五之django模型层(二)多表操作 本节目录 一 创建模型 二 添加表记录 三 基于对象的跨表查询 四 基于双下划线的跨表查询 五 聚合查询.分组查询.F查询和Q查询 六 xxx 七 ...
- JavaScript学习记录三
title: JavaScript学习记录三 toc: true date: 2018-09-14 23:51:22 --<JavaScript高级程序设计(第2版)>学习笔记 要多查阅M ...
随机推荐
- 【C#】编码史记
计算机中的字是如何处理的? 如果你用放大镜看一下,可以看出屏幕上的字是由一个一个的像素点组成的,每一个字符用一组像素点拼接出来,这些像素点组成一幅图像,变成了我们的文字,计算机又是如何将我们的文字保存 ...
- 牛客网 牛客练习赛43 F.Tachibana Kanade Loves Game-容斥(二进制枚举)+读入挂
链接:https://ac.nowcoder.com/acm/contest/548/F来源:牛客网 Tachibana Kanade Loves Game 时间限制:C/C++ 1秒,其他语言2秒 ...
- 洛谷P3168 [CQOI2015]任务查询系统 [主席树,差分]
题目传送门 任务查询系统 题目描述 最近实验室正在为其管理的超级计算机编制一套任务管理系统,而你被安排完成其中的查询部分.超级计算机中的任务用三元组(Si,Ei,Pi)描述,(Si,Ei,Pi)表示任 ...
- 洛谷P1403 [AHOI2005] 约数研究 [数论分块]
题目传送门 约数研究 题目描述 科学家们在Samuel星球上的探险得到了丰富的能源储备,这使得空间站中大型计算机“Samuel II”的长时间运算成为了可能.由于在去年一年的辛苦工作取得了不错的成绩, ...
- angular4 动态Form中获取表单字段并在页面中使用的方法
主要有两种方式 第一种 使用get属性 页面中使用如下: 第二种 使用普通方法事件 页面中使用如下 *转载请附出处
- 【3.16高一(第二学期)模拟测试】 T3,T4题解
看到这个标题我想你一定会想为什么小编只发T3,T4的题解,原因有很多:1)小编也不怎么会讲:2)小编搜遍各大OJ,都没有找到可以提交的地方:3)虽然给了测试数据,小编懒得一个一个试.如果你找到了测评网 ...
- PHP视频教程 字符串处理函数(二)
1.字符串输出:echo()输出一个或者多个字符串 2.截取 chunk_split(); 3.
- [BZOJ 4071] 巴邻旁之桥
Link: BZOJ 4071传送门 Solution: 首先算出能提前算的贡献 $K=1$:肯定选中间的点,小学数学 $K=2$:对于每对$(x,y)$一定选离$(x+y)/2$近的桥 也就是说将$ ...
- 【四边形不等式】HDU3506-Monkey Party
[题目大意] 香蕉森林里一群猴子(n<=1000)围成一圈开会,会长给他们互相介绍,每个猴子需要时间a[i].每次只能介绍相邻的两只猴子x和y认识,同时x所有认识的猴子和y所有认识的猴子也就相互 ...
- [CSAcademy]Exponential Game
题目大意: 有n堆石子,A和B两人轮流进行操作: 取走任意一堆石子,若这堆石子的个数是x个,那么可以放入x-1堆数量为0~x-1的石子. 不能操作者负. 思路: 将每一堆石子作为一个子游戏,将石子的数 ...