Echarts横坐标倾斜,顶部显示数字
最近项目使用到Echarts,所以学习了下
根据API,实现Echarts很简单,在这就不多说了,下面就说说项目中碰到的一些需求
1.由于横坐标很多,导致数据不能展示完整,所以需要设置横坐标样式倾斜展示
2.每个数据列(比如柱形图),顶部需要显示具体数值
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="utf-8">
- <meta http-equiv="X-UA-Compatible" content="IE=edge">
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <meta name="description" content="ECharts">
- <title>Echarts横坐标倾斜,顶部文字显示实现</title>
- <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
- </head>
- <script type="text/javascript">
- var width;
- var height;
- var myChart;
- $(function(){
- //自适应设置
- width = $(window).width();
- height = $(window).height();
- $("#mainBar").css("width",width-40);
- $("#mainBar").css("height",height-40);
- console.log(height);
- setEcharts();
- });
- $(window).resize(function() {
- width = $(window).width();
- height = $(window).height();
- $("#mainBar").css("width",width-40);
- $("#mainBar").css("height",height-40);
- });
- function setEcharts(){
- myChart = echarts.init(document.getElementById('mainBar'));
- //自适应
- window.onresize = myChart.resize;
- myChart.setOption({
- tooltip : {
- trigger: 'axis'
- },
- legend: {
- data:['蒸发量','降水量']
- },
- toolbox: {
- show : true,
- feature : {
- mark : {show: true},
- dataView : {show: true, readOnly: false},
- magicType : {show: true, type: ['line', 'bar']},
- restore : {show: true},
- saveAsImage : {show: true}
- }
- },
- calculable : true,
- xAxis : [
- {
- type : 'category',
- data : ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月'],
- //设置字体倾斜
- axisLabel:{
- interval:0,
- rotate:45,//倾斜度 -90 至 90 默认为0
- margin:2,
- textStyle:{
- fontWeight:"bolder",
- color:"#000000"
- }
- },
- }
- ],
- yAxis : [
- {
- type : 'value',
- splitArea : {show : true}
- }
- ],
- series : [
- {
- name:'蒸发量',
- type:'bar',
- data:[2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3]
- },
- {
- name:'降水量',
- type:'bar',
- data:[2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3],
- //顶部数字展示pzr
- itemStyle: {
- normal: {
- label: {
- show: true,//是否展示
- textStyle: {
- fontWeight:'bolder',
- fontSize : '12',
- fontFamily : '微软雅黑',
- }
- }
- }
- },
- }
- ]
- });
- }
- </script>
- <body>
- <div id="mainBar" style="border:1px solid #ccc;padding:10px;"></div>
- <!-- 标签式引入Eharts 如果你把引用echarts的script标签放置head内在IE8-的浏览器中会出现报错,解决的办法就是把标签移动到body内(后)。 -->
- <script type="text/javascript" src="http://apps.bdimg.com/libs/echarts/2.1.9/source/echarts-all.js"></script>
- <script>
- </script>
- </body>
- </html>
效果图如下:
还有一个地方可以看到效果图,很不错的一个网站
Echarts横坐标倾斜,顶部显示数字的更多相关文章
- [置顶]
echarts x轴文字显示不全(xAxis文字倾斜比较全面的3种做法值得推荐)
echarts x轴标签文字过多导致显示不全 如图: 解决办法1:xAxis.axisLabel 属性 axisLabel的类型是object ,主要作用是:坐标轴刻度标签的相关设置.(当然yAxis ...
- echarts x轴文字显示不全解决办法
标题:echarts x轴文字显示不全(xAxis文字倾斜比较全面的3种做法值得推荐):http://blog.csdn.net/kebi007/article/details/68488694
- [收集]在iPhone桌面的应用程序图标右上角显示数字
能够在ios桌面的程序icon右上角显示数字(badge number)的方法 在ViewController中的viewDidLoad方法中添加如下代码即可 - (void)viewDidLoad ...
- HTML5效果:Canvas 实现圆形进度条并显示数字百分比
实现效果 1.首先创建html代码 <canvas id="canvas" width="500" height="500" styl ...
- flex学习笔记 显示数字步进
<?xml version="1.0" encoding="utf-8"?> <s:Application xmlns:fx="ht ...
- echarts隐藏之后的显示问题
好久没有更新博客了,今天搞了快一天的网页自适应,头晕...因为最近开始做项目,项目中需要用到图表方面的知识,于是乎接触到了echarts,所以其实我也算是新手了.只是近几天弄了很久的关于图表隐藏之后再 ...
- 【jQuery】页面顶部显示的进度条效果
<!Doctype html> <html> <head> <title>页面顶部显示的进度条效果</title> <meta htt ...
- 快速创建显示数字数据的动画——CountUp.js
由于项目需求,需要写一个数字增/减量的动画特效,最后找到了CountUp.js CountUp.js是一个无依赖,轻量级的JavaScript“类”,可用于快速创建以更有趣的方式显示数字数据的动画. ...
- 【Excle数据透视表】如何在组的顶部显示分类汇总
调整前 调整后 例 ...
随机推荐
- 二维vector容器读取txt坐标
template <class vector> struct HeadLocation{ vector x; vector y; }; vector<HeadLocation< ...
- Android中用Java代码实现zip文件解压缩
如果需要下载的文件有很多是中文名的,解压时有中文名的文件出现乱码,试了很多方法不能解决问题.据说有一个Java插件包,用这个插件包可以解决中文名乱码的问题,但不知解压的文件是否要用它提供的类压缩后的文 ...
- ionic 打包安卓包 (debug调试版和 release发布版)
一.配置环境: 先按照之前的文章,配置好环境需要: 安装jdk,配置环境变量:( http://www.cnblogs.com/loveyaxin/p/7520618.html) 安装android- ...
- H5禁止页面滑动/滚动
禁止页面滚动--完美解决方案,滚动条显示与否,手持设备兼容与否 禁止页面滚动 有三种方法 1,依靠css 将页面 document.documentElement.style.overflow='hi ...
- Caffe & Caffe2入门博客存档
caffe2 教程入门(python版) https://www.jianshu.com/p/5c0fd1c9fef9?from=timeline caffe入门学习 https://blog.csd ...
- js数据类型检测小结
在js中,有四种用于检测数据类型的方式,分别是: typeof 用来检测数据类型的运算符 instanceof 检测一个实例是否属于某个类 constructor 构造函数 Object.protot ...
- 深入理解理解 JavaScript 的 async/await
原文地址:https://segmentfault.com/a/1190000007535316,首先感谢原文作者对该知识的总结与分享.本文是在自己理解的基础上略作修改所写,主要为了加深对该知识点的理 ...
- CSS+DIV进度条
<style type="text/css"> .Bar { position: relative; width: 200px; /* 宽度 */ border: 1p ...
- SpringSecurity 3.2入门(10)自定义权限控制认证及授权的过程
上一章的代码实现还存在一些问题,如角色表.权限表的用处没有体现出来,但是已经能完成URL拦截功能,后面将会继续完善认证及授权的过程. 认证及授权的过程如下: 1.容器启动,MyInvocationSe ...
- Path类 操作文件类
// Path类 IO命名空间 静态类 不能创建对象类名. string str =@"E:\C#程序设计基础入门教程\(第十一天)\122\22\nee.txt"; ////in ...