<!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-boot-maven-plugin 安装本地jar 包

    本地使用nexus 进行maven仓库管理.项目deploy 引入之后,总是找不到jar中定义的class或者配置文件等. 从截图上可以看到虽然class文件是有的,但是引用的时候却是找不到的. Sp ...

  2. 201771010118马昕璐《面向对象程序设计java》第八周学习总结

    第一部分:理论知识学习部分 1.接口 在Java程序设计语言中,接口不是类,而是对类的一组需求描述,由常量和一组抽象方法组成.Java为了克服单继承的缺点,Java使用了接口,一个类可以实现一个或多个 ...

  3. Android总结之json解析（FastJson Gson 对比）[申明：来源于网络]

    Android总结之json解析(FastJson Gson 对比)[申明:来源于网络] 地址:http://blog.csdn.net/u014031072/article/details/5392 ...

  4. style样式不换行

    style="white-space:nowrap;"不自动换行<font color="" size=""></font ...

  5. Web API Request Content多次读取

    使用自宿主OWIN 项目中要做日志过滤器 新建类ApiLogAttribute 继承ActionFilterAttribute ApiLogAttribute :  ActionFilterAttri ...

  6. 遍历二叉树 traversing binary tree 线索二叉树 threaded binary tree 线索链表 线索化

    遍历二叉树   traversing binary tree 线索二叉树 threaded binary tree 线索链表 线索化 1. 二叉树3个基本单元组成:根节点.左子树.右子树 以L.D.R ...

  7. [math] 我对对数的最新理解

    前言 作为资深学渣,每次遇到对数就极度恐慌.恐慌不是因为要考试---.而是因为不理解,只能靠死记硬背运算规则.不能进行有效的推理,这让我极度不爽,因为会忘记.故惶恐. 所以总是耿耿于怀,想要试图理解对 ...

  8. C++11 新特性之operator "" xxx

    从C++11开始,我们可以使用以下形式通过常量字符串构造自定义类型, 比如: class Person { public: Person(const std::string& name): _ ...

  9. python摸爬滚打之----tcp协议的三次握手四次挥手

    TCP协议的三次握手, 四次挥手 三次握手过程 1, 服务器时刻准备接受客户端进程的连接请求, 此时服务器就进入了LISTEN(监听)状态; 2, 客户端进程然后向服务器发出连接请求报文, 之后客户端 ...

  10. web中spring框架启动流程第一发

    web.xml中springmvc相关配置如下:<servlet> <servlet-name>springmvc</servlet-name> <servl ...