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后面的这 ...
随机推荐
- 前端性能优化 —— 添加Expires头
简要:添加Expires头能有效的利用浏览器的缓存能力来改善页面的性能,能在后续的页面中有效避免很多不必要的Http请求,WEB服务器使用Expires头来告诉Web客户端它可以使用一个组件的当前副本 ...
- 09-Http & Servlet
Http协议&Servlet Http协议 什么是协议 > 双方在交互.通讯的时候, 遵守的一种规范.规则. http协议 > 针对网络上的客户端 与 服务器端在执行http请求的 ...
- Installation of CarbonData 1.1.0 with Spark 1.6.2
关键词:carbondata spark thrift 数据仓库 [Install thrift 0.9.3] 注意 要装thrift-java必须先装ant . 有人说要装boost,我在cento ...
- MBA 拓展训练总结
1. 拓展训练,大家绑腿跑 沟通时间极短, 规则制定不完善, 对方'王者队'沟通很好, 女队练习的同时, 男队边观看边练习, 效率很高, 由于之前王者输的比较多, 总结很多, 所以执行力也占优了, 我 ...
- 构建Maven父子工程
IDEA构建maven父子工程: 1.打开IDEA,Create New Project 如图: 如果没有弹出新建界面,可以先 file-->Close Project 如图: 2.创建父 ...
- (80)Wangdao.com第十六天_JavaScript Object 对象的相关方法
Object 对象的相关方法 Object.getPrototypeOf() 返回参数对象的原型. 这是获取某对象的原型对象的标准方法. var F = function () {}; var f = ...
- mobile_视口
document.documentElement.clientWidth 不包含滚动条 window.innerWidth ...
- CSS 使用absolute 是<div>居中
<style> .col-center-block { position: absolute; top: 50%; ...
- Java课程寒假之《人月神话》有感之三
一.未雨绸缪 作者开始谈论实验室代码如何向开发出来的产品转变,化学工程师通过“实验性工厂”的中间步骤做测试来得到经验.而软件系统的构建人员却是按照时间进度将第一次开发的产品发布给顾客.对于我这只没有实 ...
- js中函数创建的三种方式
1.函数声明 function sum1(n1,n2){ return n1+n2; }; 2.函数表达式,又叫函数字面量 var sum2=function(n1,n2){ re ...