<!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轴换行的更多相关文章

  1. echart在X轴下方添加字

    使用Echart做统计图表,这个方便快捷还高大上 官方网址 https://www.echartsjs.com/ 按照文档,很快就做出了一个柱图表 在X轴下方,要显示出对应日期是星期几(上图最下方,用 ...

  2. Echart ，X轴显示的为tooltip内显示的一部分内容放在上面显示的一部分如下图所示

    如图所示:X轴只显示tooltip部分内容解决方案 在xAxis下面,实现方法如下 axisLabel: { interval: 0, formatter:function(value) { var ...

  3. Echart 改变X轴、Y轴、折线的颜色和数值

    在操作E-chart时需要根据需求改变颜色和属性 图1: option = { xAxis: { type: 'category', data: ['Mon', 'Tue', 'Wed', 'Thu' ...

  4. echart搭配时间轴进行展示 （本例展示的是多时间 多地区 多指标条件 ）

    1:照常先来几张图 看效果  2:首先 看官方文档 我把echart官方的例子给扒下来并整理了得出如下效果 上 案例图和代码 效果图 : 代码: <style type="text/c ...

  5. 关于echart的x轴固定为0-24小时显示一天内的数据

    需求: echart折线图横坐标x轴固定显示为0-1-2-3-...-23-24一共24小时的数据. 根据需求,我在网上以及echart官网,发现x轴无论type是类目轴还是时间,都是自动处理的,尤其 ...

  6. HighCharts、EChart图表X轴纵向显示

    HighCharts 回调javascript函数来格式化标签,值通过this.value获得,this的其他属性还包括axis, chart, isFirst and isLast. 默认为: fu ...

  7. Echart自定义y轴刻度信息2

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  8. echart的tooltip自定义换行

    自定义换行,内容很长的时候 tooltip : { trigger: 'axis', axisPointer : { // 坐标轴指示器,坐标轴触发有效 type : 'shadow' // 默认为直 ...

  9. echart的x轴或y轴区间标签如何从大到小排列

    1.有时候我们做echart时,从后台接收返回回来的数据,没有按顺序排列,这里我遇到的是区间的值,看图 我这里是处理好了的,一开始,50-100这个区间在数组的最后一列,也就是在150-200后面的这 ...

随机推荐

  1. Spring MVC 原理探秘 - 容器的创建过程

    1.简介 在上一篇文章中,我向大家介绍了 Spring MVC 是如何处理 HTTP 请求的.Spring MVC 可对外提供服务时,说明其已经处于了就绪状态.再次之前,Spring MVC 需要进行 ...

  2. Linux内核笔记：epoll实现原理（一）

    一.说明 针对的内核版本为4.4.10. 本文只是我自己看源码的简单笔记,如果想了解epoll的实现,强烈推荐下面的文章: The Implementation of epoll(1) The Imp ...

  3. 201771010126.王燕《面向对象程序设计（Java）》第六周学习总结

    实验六 继承定义与使用 实验时间 2018-9-28 1.实验目的与要求 (1) 理解继承的定义: 继承就是用已有类来构建新类的一种机制,当你继承了一个类时,就继承了这个类的方法和字段,同时你也可以在 ...

  4. (83)Wangdao.com第十七天_JavaScript 定时器

    JavaScript 提供定时执行代码的功能,叫做 定时器(timer). 主要由 setTimeout() 和 setInterval() 这两个函数来完成.它们向任务队列添加定时任务 setTim ...

  5. python to shell vimdiff

    目录 #!/bin/python3 import os import sys if(len(sys.argv) != 3): exit ("Usage: argv1:fullPath.txt ...

  6. Charles 使用

    一.设置域名焦点 View->Focused Hosts…-> 二.抓包https:配置证书 1. 电脑安装SSL证书 选择 “Help” -> “SSL Proxying” -&g ...

  7. 深度学习基础（四） Dropout_Improving neural networks by preventing co-adaptation of feature detectors

    该笔记是我快速浏览论文后的记录,部分章节并没有仔细看,所以比较粗糙. 从摘要中可以得知,论文提出在每次训练时通过随机忽略一半的feature detectors(units)可以极大地降低过拟合.该方 ...

  8. 7、Flutter banner_view 轮播图的使用

    1.前言 实现轮播图,效果如下: 2.实现 将采用 banner_view 实现:资源库地址 2.1.yaml 引入依赖 在 pubspec.yaml 声明需要引用的库,执行命令 flutter pa ...

  9. 简单的linux使用命令

    1 查看日志异常 tail -f 实时查看日志文件 tail -f 日志文件logtail - 100f 实时查看日志文件 后一百行tail -f -n 100 catalina.out linux查 ...

  10. 关于cc.easesinexxx 与 cc.easeexponentiallxxx 的几种效果简单描述

    代码样例: var biggerEase = cc.scaleBy(0.7,1.2,1.2).easing(cc.easeSineInOut()) 呈正弦变化 1)CCEaseSineIn       ...