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后面的这 ...
随机推荐
- vue调用Moment显示时间
1.下载 Moment 网站: http://momentjs.cn/ 2创建一个vue的文本格式 admin.vue 3.定义给值 代码如下 <template> <div ...
- 7、vue-awesome-swiper页面跳转
<template> <swiper :options='swiperOption' ref="mySwiper" class='swiper-container ...
- python语法_嵌套
列表里面每个元素可以是不同的数据类型,每一个元素也可以是一个列表或者元组等, a = [[1,2,3],"a",13,(5,7,9,"dasd")] b = a ...
- SSZipArchive解压乱码
https://www.twblogs.net/a/5b7e01e22b7177683854b7b8/zh-cn 搜索 CFStringConvertEncodingToNSStringEncod ...
- Python_tkinter（4）_上传文件
1.上传单个文件 import tkinter as tk from tkinter import filedialog def upload_file(): selectFile = tk.file ...
- LVS，Keepalived,HAproxy区别与联系
LVS,Keepalived,HAproxy区别与联系 LVS 全称Linux Virtual Server,也就是Linux虚拟服务器,由章文嵩(现就职于于淘宝,正因为如此才出现了后来的fullna ...
- Spring cloud 之Ribbon（二）负载均衡原理
ribbon实现负载均衡的原理 我们从Ribbon实现负载均衡的代码可以看到,Ribbon是通过RestTemPlate实现客户端负载均衡的,准确的说是RestTemPlate上的@LoadBalan ...
- linux查看所有用户信息
所有的用户信息在根目录/etc/中passwd文件内,而passwd的所有权限是root用户及root组用户,所有想要查看所有用户,需要root用户登录系统. root用户登录后,可以直接用查看命令c ...
- linux 对MTD分区nand flash的烧写和读取
使用mtd-utils工具实现对flash的升级分区的烧写yaffs2 yaffs2的格式是根据所使用的nandflash来制作的,不同的nandflash,得到的yaffs2是不一样的,具体可以参考 ...
- python学习笔记1-基础知识
# 0.输入输出 # print数值型直接输出计算结果 pirnt( + ) # 输出 + = # input输入(可在括号内加提示语句) name = input('please enter you ...