echart的x轴换行
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ECharts</title>
<!-- 引入 echarts.js -->
<script type="text/javascript" src="../chart/dist/echarts.js"></script>
</head>
<body>
<div id="main" style="width: 500px;height:330px;"></div>
<script type="text/javascript">
var myChart = echarts.init(document.getElementById('main'));
option = {
legend: {
orient: 'vertical',
x: 'left',
data:['直接访问','邮件营销','联盟广告','视频广告','搜索引擎']
},
xAxis: {
type: 'category',
data: ['xx', 'xx', 'xxxxx', 'xxxxxx', 'xxxxxx', 'xxxxxxxxx'], //替换
axisLabel:{
interval:0,
formatter:function(value){
var ret = '';
var maxLength = 4;
var rowNum = Math.ceil(value.length/maxLength);
if(rowNum > 1) {
for(var i = 0; i < rowNum; i++) {
var temp ="";
var start = i * maxLength;
var end = start + maxLength;
temp = value.substring(start,end) + "\n";
ret += temp;
}
return ret;
}else {
return value;
}
}
}
},
yAxis: [
{
name: '关注及损失',
type: 'value',
interval:1,
position:'left'
},
{
name: '正常',
type:'value',
interval:20,
position:'right'
}, ],
series: [
{ data: [2, 3, 3, 1, 2, 4], //替换
type: 'bar'
},
{
data: [1, 2, 3, 4, 5, 6], //替换
type: 'bar'
},
{
data: [99, 97, 97, 97, 97, 97],//替换
yAxisIndex:1,
type: 'line'
} ]
};
myChart.setOption(option);
</script>
</body>
</html>
配图：
echart的x轴换行的更多相关文章
- echart在X轴下方添加字
使用Echart做统计图表,这个方便快捷还高大上 官方网址 https://www.echartsjs.com/ 按照文档,很快就做出了一个柱图表 在X轴下方,要显示出对应日期是星期几(上图最下方,用 ...
- Echart ，X轴显示的为tooltip内显示的一部分内容放在上面显示的一部分如下图所示
如图所示:X轴只显示tooltip部分内容解决方案 在xAxis下面,实现方法如下 axisLabel: { interval: 0, formatter:function(value) { var ...
- Echart 改变X轴、Y轴、折线的颜色和数值
在操作E-chart时需要根据需求改变颜色和属性 图1: option = { xAxis: { type: 'category', data: ['Mon', 'Tue', 'Wed', 'Thu' ...
- echart搭配时间轴进行展示 （本例展示的是多时间 多地区 多指标条件 ）
1:照常先来几张图 看效果 2:首先 看官方文档 我把echart官方的例子给扒下来并整理了得出如下效果 上 案例图和代码 效果图 : 代码: <style type="text/c ...
- 关于echart的x轴固定为0-24小时显示一天内的数据
需求: echart折线图横坐标x轴固定显示为0-1-2-3-...-23-24一共24小时的数据. 根据需求,我在网上以及echart官网,发现x轴无论type是类目轴还是时间,都是自动处理的,尤其 ...
- HighCharts、EChart图表X轴纵向显示
HighCharts 回调javascript函数来格式化标签,值通过this.value获得,this的其他属性还包括axis, chart, isFirst and isLast. 默认为: fu ...
- Echart自定义y轴刻度信息2
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
- echart的tooltip自定义换行
自定义换行,内容很长的时候 tooltip : { trigger: 'axis', axisPointer : { // 坐标轴指示器,坐标轴触发有效 type : 'shadow' // 默认为直 ...
- echart的x轴或y轴区间标签如何从大到小排列
1.有时候我们做echart时,从后台接收返回回来的数据,没有按顺序排列,这里我遇到的是区间的值,看图 我这里是处理好了的,一开始,50-100这个区间在数组的最后一列,也就是在150-200后面的这 ...
随机推荐
- centos6.8 安装jdk
一.卸载CentOS自带的Java 1. 查看CentOS的Java的信息 [root@bogon /]# java -version java version "1.7.0_9 ...
- 小甲鱼Python第二十三讲课后习题--025，字典
笔记: 1.字典是Python中唯一的映射类型 2.字典包含两个要素:键(key)和值(value)他们是成对出现的,用大括号括起来,多对存在时用逗号隔开. 3.可以用dict()直接创建字典,如di ...
- NOIP-无线网路发射器选址
题目描述 随着智能手机的日益普及,人们对无线网的需求日益增大.某城市决定对城市内的公共场所覆盖无线网. 假设该城市的布局为由严格平行的129条东西向街道和129条南北向街道所形成的网格状,并且相邻的平 ...
- jmeter下TPS插件的安装
1.下载插件http://pan.baidu.com/s/1mioVJni 2.解压下载的安装包: 将 jpgc-graphs-basic-2.0.zip 解压缩后只有一个 lib 目录,该目录下有一 ...
- vue_class 绑定_style 绑定
1. class 绑定 data: { myClass: "bClass", hasA: true, hasB: false } 字符串模式: 类名不确定 <p class= ...
- PDF文件怎么转换成PPT
在日常办公中大家都会发现PDF文件目前是比较常见的一种文件,有的时候大家会需要将PDF转换成PPT为了去更好的演示,毕竟PPT文件在演示方面具有着较好的特点,那如何将PDF文件转换成PPT文件呢,今天 ...
- 数据库 case when then 的用法 （举个栗子~~~）
select a.TradeType,a.TradeState,a.Pname,a.OutTradeNo,a.*, (CASE a.TradeType when '1' then '充值' when ...
- java_爬虫_从腾讯视频播放界面爬取视频真实地址
由于想在微信公众号里爬一点儿考研的视频 花了差不多一天的时间把这个爬虫做好(其实也不算爬虫吧,就算个能批量处理的地址解析器,半个爬虫) 不多说,进正题 (本文适合有java基础的同学,没基础的用客户端 ...
- 2018-2019-2 《网络对抗技术》Exp0 Kali安装 Week1 20165317
第一周作业 Kali的安装 Kali的下载 从kali官网下载kali-linux 64-bit 版本. Kali的安装 由于在娄老师的课上使用virtualbox, 所以我习惯性使用virtual ...
- JVM性能调优总结
引自其它博客 : https://www.cnblogs.com/donaldlee2008/p/5469685.html 注 : 该条同样适用于Tomcat调优 调优配置说明 堆大小设置JVM 中最 ...