echart-X轴标签文字方向
1. rotate斜体:
axisLabel:{
interval:0,
rotate:45,
margin:2,
textStyle:{
color:"#222"
}
2.
formatter:function(val){
return val.split("").join("\n");
}
3.
/**
* <li>Echarts 中axisLabel中值太长自动换行处理;经测试:360、IE7-IE11、google、火狐 * 均能正常换行显示</li>
* <li>处理echarts 柱状图 x 轴数据显示根据柱子间隔距离自动换行显示</li>
* @param title 将要换行处理x轴值
* @param data
* @param fontSize x轴数据字体大小,根据图片字体大小设置而定,此处内部默认为12
* @param barContainerWidth 柱状图初始化所在的外层容器的宽度
* @param xWidth 柱状图x轴左边的空白间隙 x 的值,详见echarts文档中grid属性,默认80
* @param x2Width 柱状图x轴邮编的空白间隙 x2 的值,详见echarts文档中grid属性,默认80
* @param insertContent 每次截取后要拼接插入的内容, 不传则默认为换行符:\n
* @returns titleStr 截取拼接指定内容后的完整字符串
* @author lixin
*/
function getEchartBarXAxisTitle(title, datas, fontSize, barContainerWidth, xWidth, x2Width, insertContent){ if(!title || title.length == 0) {
alert("截取拼接的参数值不能为空!");return false;
}
if(!datas || datas.length == 0) {
alert("用于计算柱状图柱子个数的参数datas不合法!"); return false;
}
if(isNaN(barContainerWidth)) {
alert("柱状图初始化所在的容器的宽度不是一个数字");return false;
}
if(!fontSize){
fontSize = 12;
}
if(isNaN(xWidth)) {
xWidth = 80;//默认与echarts的默认值一致
}
if(isNaN(x2Width)) {
xWidth = 80;//默认与echarts的默认值一致
}
if(!insertContent) {
insertContent = "\n";
} var xAxisWidth = parseInt(barContainerWidth) - (parseInt(xWidth) + parseInt(x2Width));//柱状图x轴宽度=统计页面宽度-柱状图x轴的空白间隙(x + x2)
var barCount = datas.length; //x轴单元格的个数(即为获取x轴的数据的条数)
var preBarWidth = Math.floor(xAxisWidth / barCount); //统计x轴每个单元格的间隔
var preBarFontCount = Math.floor(preBarWidth / fontSize) ; //柱状图每个柱所在x轴间隔能容纳的字数 = 每个柱子 x 轴间隔宽度 / 每个字的宽度(12px)
if(preBarFontCount > 3) { //为了x轴标题显示美观,每个标题显示留两个字的间隙,如:原本一个格能一样显示5个字,处理后一行就只显示3个字
preBarFontCount -= 2;
} else if(preBarFontCount <= 3 && preBarFontCount >= 2) {//若每个间隔距离刚好能放两个或者字符时,则让其只放一个字符
preBarFontCount -= 1;
} var newTitle = ""; //拼接每次截取的内容,直到最后为完整的值
var titleSuf = ""; //用于存放每次截取后剩下的部分
var rowCount = Math.ceil(title.length / preBarFontCount); //标题显示需要换行的次数
if(rowCount > 1) { //标题字数大于柱状图每个柱子x轴间隔所能容纳的字数,则将标题换行
for(var j = 1; j <= rowCount; j++) {
if(j == 1) { newTitle += title.substring(0, preBarFontCount) + insertContent;
titleSuf = title.substring(preBarFontCount); //存放将截取后剩下的部分,便于下次循环从这剩下的部分中又从头截取固定长度
} else { var startIndex = 0;
var endIndex = preBarFontCount;
if(titleSuf.length > preBarFontCount) { //检查截取后剩下的部分的长度是否大于柱状图单个柱子间隔所容纳的字数 newTitle += titleSuf.substring(startIndex, endIndex) + insertContent;
titleSuf = titleSuf.substring(endIndex); //更新截取后剩下的部分,便于下次继续从这剩下的部分中截取固定长度
} else if(titleSuf.length > 0){
newTitle += titleSuf.substring(startIndex);
}
}
}
} else {
newTitle = title;
}
return newTitle;
} /**
* 滚动瀑布加载函数
* @param opts{selector: "#id"(需要滚动瀑布加载的元素选择器), fn: getUserInfo(瀑布加载时的回调函数方法名), fnParams: param(参数)}
*/
function scrollLoad(opts){ var options = {
selector: null,
fn: null,
fnParams: null
}; options =$.extend(true, options, opts); var selector = options.selector;
var callbackFn = options.fn;
var fnParams = options.fnParams; if(selector == null || selector == "" || selector == "undefined") {
console.info("瀑布加载元素选择器不能为空!");return false;
}
if(callbackFn == null || callbackFn == "" || callbackFn == "undefined") {
console.info("瀑布加载回调函数不能为空!");return false;
} var loadCompleted = true; //当前元素是否已经加载完成,true:未完成,false:完成
$(top.window).scroll(function(){ var winheight = $(top.window).height();
var scheight = $(top.window).scrollTop(); if ($(selector).offset().top <= (winheight + scheight) && loadCompleted) {
// console.info($(selector).offset().top+"===winH="+(winheight + scheight)+"====t="+new Date().getTime()); loadCompleted = false;
if(typeof(callbackFn) == "function") {
// console.info("load " + callbackFn.name + "!!!");//~ if(fnParams) {
callbackFn(fnParams);
} else {
callbackFn();
}
} else if(callbackFn instanceof Array) { //若回调函数指定了多个方法
for(var i = 0; i< callbackFn.length; i++) {
// console.info("load " + callbackFn[i].name + "!!!");//~ if(fnParams) {
callbackFn[i](fnParams);
} else {
callbackFn[i]();
}
}
}
}
});
}
echart-X轴标签文字方向的更多相关文章
- echarts x轴标签文字过多导致显示不全
原文电梯:https://blog.csdn.net/kebi007/article/details/68488694 echarts x轴标签文字过多导致显示不全 如图: 解决办法1:xAxis.a ...
- par函数的las参数-控制x轴和y轴标签的方向
las 参数控制x轴和y轴的刻度线上的标签与两条轴的防线,可选值为0,1,2,3 0为默认值,代表始终与刻度线平行,代码示例: par(las = 0) plot(1:5, 1:5, main = & ...
- 使用echart的雷达图的时候,如果文字越界的解决办法记录,标签文字自动换行
使用echart的雷达图的时候,如果文字越界的解决办法记录,标签文字自动换行 前几天项目中有一个图表的是用echart生成的,遇到一个问题,就是在手机端显示的售时候,如果文字太长就会超出div,之前的 ...
- vue中使用v-chart改变柱状图颜色以及X轴Y轴的文字颜色和大小以及标题
1.html部分 <ve-histogram :tooltip-visible="true" :x-axis="xAxis" :y-axis=" ...
- 2018.04.02 matplotlib 图名,图例,轴标签,轴边界,轴刻度,轴刻度标签
import numpy as np import pandas as pd import matplotlib.pyplot as plt df = pd.DataFrame(np.random.r ...
- excel 作图中次横坐标及次纵坐标的调试,以及excel自定义轴标签的步骤方法
在工作中除了要做一些常用的图表之外,不时还会有一切奇怪图表的制作需求. 今天的内容主要记录的是如何对excle图表的次横坐标及次纵坐标进行调试,以及如何自定义调整轴标签 首先看下如何做次纵坐标,工作中 ...
- android中自定义view---实现竖直方向的文字功能,文字方向朝上,同时提供接口,判断当前touch的是哪个字符,并改变颜色
android自定义view,实现竖直方向的文字功能,文字方向朝上,同时提供接口,判断当前touch的是哪个字符,并改变颜色. 由于时间比较仓促,因此没有对代码进行过多的优化,功能远远不如androi ...
- chart控件怎么使x轴标签全部显示出来
在vs2012中使用chart控件事,x轴的标签过多,致使默认只能显示其中的一部分,如图 当然,我们可以通过设置,使得x轴标签全部显示. 首先,通过chart控件属性,找到 “ChartAreas ...
- echarts2 饼图处理标签文字过长使之达到指定字数换行的目的
在使用echarts2的过程中,有时会遇到标签文字过长导致显示不完整的问题.例如: 这时候就需要用到 标签里的formatter 回调函数来处理这种情况了. 方式一: formatter : ' { ...
随机推荐
- 关于kafka的新的group无法订阅到topic中历史消息的问题
今天在写kafka的java api例子时候,遇到一个问题,比如我创建了一个test主题,往里面写了1,2,3,4,5条消息,在这个时候,我用一个新的group启动了一个消费者,发现该消费者只能读到5 ...
- Distributed Phoenix Chat using Redis PubSub
转自:https://www.poeticoding.com/distributed-phoenix-chat-using-redis-pubsub/ In the previous articl ...
- 编写一个函数 reverse_string(char * string)实现:将参数字符串中的字符反向排列 。(递归实现)
要求:不能使用C函数库中的字符串操作函数. 思路:在递归函数的调用时,先应该定义一个指针型char字符串.函数内部应先调用自己,在打印,这样才能保证字符串是从最后一个开始输出. #include< ...
- kafka 的经典教程
一.基本概念 介绍 Kafka是一个分布式的.可分区的.可复制的消息系统.它提供了普通消息系统的功能,但具有自己独特的设计. 这个独特的设计是什么样的呢? 首先让我们看几个基本的消息系统术语:Kafk ...
- C#中四种常用集合的运用(非常重要)【转】
1.ArrayList ArrayList类似于数组,有人也称它为数组列表.ArrayList可以动态维护,而数组的容量是固定的. 它的索引会根据程序的扩展而重新进行分配和调整.和数组类似,它所存储的 ...
- Idea 无法显示mybatis-generator插件
Idea在pom.xml中添加了mybatis-generator插件后,右侧的maven projects中并未显示这个插件? 解决方法: 新建一个plugins标签和pluginManager同级 ...
- Digispark红外接收器
一.红外协议之NEC协议原理 NEC协议格式: 首次发送的是9ms的高电平脉冲,其后是4.5ms的低电平,接下来就是8bit的地址码(从低有效位开始发),而后是8bit的地址码的反码(主要是用于校验是 ...
- 弄清AXI总线上每一个信号的含义
弄清AXI总线上每一个信号的含义 1.信息来源 2.AXI总线的端口描述 时钟与复位端口 AXI M总线--写操作--地址通道的相关信号 AXI M总线--读操作--地址通道的相关信号 AXI M总线 ...
- IIS webService 并发 性能
IIS webService 并发 性能 做的WebService,客户压力测试500并发(随机步长60s-90s),响应速度不理想. 1,优化程序,压缩执行时间2,提高IIS“最大工作进程数 ...
- C++和extern C
http://blog.csdn.net/gongmin856/article/details/44228453 C语言中的可变参数:va_list ,va_start,va_arg,va_end h ...