<!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. JS对象2

    1.Date对象 创建对象 //方法1:不指定参数 var nowd1=new Date(); alert(nowd1.toLocaleString( )); //方法2:参数为日期字符串 var n ...

  2. asp.net MVC jsonp跨域获取数据

    public class JsonpResult : JsonResult { object _data = null; public JsonpResult() { } public JsonpRe ...

  3. Java当中的IO一

    1.IO操作的目标 什么是IO操作的目标? 输入: 从数据源当中读取数据 输出: 将数据写入到数据目的地当中 有数据进入到程序当中,这个过程就可以被叫做输入 流:即在数据源与程序之间建立的传输通道 2 ...

  4. MyISAM和Innodb区别，为什么？

    事务支持 MyISAM不支持事务,而InnoDB支持. InnoDB的AUTOCOMMIT默认是打开的,即每条SQL语句会默认被封装成一个事务,自动提交,这样会影响速度, 所以最好是把多条SQL语句显 ...

  5. laravel之模型操作

    首先在App下创建模型,一个模型对应着一个表: 2.创建好模型之后,使用控制器来操作模型 先使用模型 创建方法来使用模型(记得要添加路由)

  6. mvc文件下载

    public ActionResult xiazai(int id) { DataTable dt = bll.chaxun(id); //获取文件名字 var filename = dt.Rows[ ...

  7. 24 GISer必备知识（一） 坐标系

    对于经常使用ArcMap的童鞋,肯定用过属性表中的计算几何的功能,但是有时候会提示面积计算与长度计算禁用 但是选择的明明是 Xian 1980坐标系,这是为什么呢?下面就来讲一讲这些个经常让人“头大” ...

  8. Havel-Hakimi定理的方法来构图

    给定一组非负数字,(数字为节点的度),判断该组数字能不能构成图. Havel-Hakimi定理: 将序列按照从大到小排序之后,从第二个数开始到第一个数的长度+1为止,依次减1.每操作一次,删掉第一个数 ...

  9. Unity进阶----AssetBundle_01(2018/10/30)

    AssetBundle作用和定义 1).AssetBundle是一个压缩包包含模型.贴图.预制体.声音.甚至整个场景,可以在游戏运行的时候被加载: 2).AssetBundle自身保存着互相的依赖关系 ...

  10. python基础1 print（）函数

    一切程序的开始都是由print('hello world') 了解print()函数 输出python之歌 print(''' 优美胜于丑陋明了胜于晦涩简洁胜于复杂复杂胜于凌乱扁平胜于嵌套间隔胜于紧凑 ...