解决百度Echarts图表坐标轴越界的方法

最新推荐文章于 2024-01-10 10:00:39 发布
最新推荐文章于 2024-01-10 10:00:39 发布
阅读量414 收藏
点赞数
文章标签： javascript 前端 大数据 ViewUI
原文链接：http://www.cnblogs.com/veromcae/p/10012960.html
版权

Echarts是由百度提供的数据可视化解决方案, 可以让我们快速实现功能丰富的图表,官网链接 

使用方法

1.引入echarts.min.js文件

下载echarts.min.js文件,下载地址

创建一个挂载节点

 

将数据展示到挂载节点

生成数据, 并将数据导入到option配置对象中

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
// 创建数据
var base = + new Date(1968, 9, 3);
var oneDay = 24 * 3600 * 1000;
var date = [];
 
var data = [Math.random() * 300];
 
for ( var i = 1; i < 20000; i++) {
   var now = new Date(base += oneDay);
   date.push([now.getFullYear(), now.getMonth() + 1, now.getDate()].join( '/' ));
   data.push(Math.round((Math.random() - 0.5) * 20 + data[i - 1]));
}
 
// 创建对象option
option = {
   tooltip: {
     trigger: 'axis' ,
     position: function (pt) {
       return [pt[0], '10%' ];
     }
   },
   title: {
     left: 'center' ,
     text: '大数据量面积图' ,
   },
   toolbox: {
     feature: {
       dataZoom: {
         yAxisIndex: 'none'
       },
       restore: {},
       saveAsImage: {}
     }
   },
   xAxis: {
     type: 'category' ,
     boundaryGap: false ,
     data: date
   },
   yAxis: {
     type: 'value' ,
     boundaryGap: [0, '100%' ]
   },
   dataZoom: [{
     type: 'inside' ,
     start: 0,
     end: 10
   }, {
     start: 0,
     end: 10,
     handleIcon: 'M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z' ,
     handleSize: '80%' ,
     handleStyle: {
       color: '#fff' ,
       shadowBlur: 3,
       shadowColor: 'rgba(0, 0, 0, 0.6)' ,
       shadowOffsetX: 2,
       shadowOffsetY: 2
     }
   }],
   series: [
     {
       name: '模拟数据' ,
       type: 'line' ,
       smooth: true ,
       symbol: 'none' ,
       sampling: 'average' ,
       itemStyle: {
         color: 'rgb(255, 70, 131)'
       },
       areaStyle: {
         color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
           offset: 0,
           color: 'rgb(255, 158, 68)'
         }, {
           offset: 1,
           color: 'rgb(255, 70, 131)'
         }])
       },
       data: data
     }
   ]
};

将option添加到挂载节点

?
1
2
// 将option数据挂载到main节点
echarts.init(document.getElementById( 'main' )).setOption(option);

如何防止坐标轴越界

上方图表如果展示到移动版, 坐标轴可能部分无法显示

解决方法很简单,只需在option中加一个配置项即可

?
1
2
3
grid:{
     containLabel: true
    },

源码:

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
<!doctype html>
< html lang = "en" >
< head >
   < meta charset = "UTF-8" >
   < meta name = "viewport"
      content = "width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" >
   < meta http-equiv = "X-UA-Compatible" content = "ie=edge" >
   < title >Echarts-Demo</ title >
   < script src = "./echarts.min.js" ></ script >
</ head >
< body >
   < div id = "main" style = "width:100%;height:400px;" ></ div >
   < script >
     // 创建数据
     var base = +new Date(1968, 9, 3);
     var oneDay = 24 * 3600 * 1000;
     var date = [];
 
     var data = [Math.random() * 300];
 
     for (var i = 1; i < 20000 ; i++) {
       var now = new Date(base += oneDay);
       date.push([now.getFullYear(), now.getMonth() + 1, now.getDate()].join('/'));
       data.push(Math.round((Math.random() - 0.5) * 20 + data[i - 1]));
     }
 
     // 创建对象option
     option = {
       tooltip: {
         trigger: 'axis',
         position: function (pt) {
           return [pt[0], '10%'];
         }
       },
       title: {
         left: 'center',
         text: '大数据量面积图',
       },
       toolbox: {
         feature: {
           dataZoom: {
             yAxisIndex: 'none'
           },
           restore: {},
           saveAsImage: {}
         }
       },
       xAxis: {
         type: 'category',
         boundaryGap: false,
         data: date
       },
       yAxis: {
         type: 'value',
         boundaryGap: [0, '100%']
       },
       dataZoom: [{
         type: 'inside',
         start: 0,
         end: 10
       }, {
         start: 0,
         end: 10,
         handleIcon: 'M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z',
         handleSize: '80%',
         handleStyle: {
           color: '#fff',
           shadowBlur: 3,
           shadowColor: 'rgba(0, 0, 0, 0.6)',
           shadowOffsetX: 2,
           shadowOffsetY: 2
         }
       }],
       series: [
         {
           name:'模拟数据',
           type:'line',
           smooth:true,
           symbol: 'none',
           sampling: 'average',
           itemStyle: {
             color: 'rgb(255, 70, 131)'
           },
           areaStyle: {
             color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
               offset: 0,
               color: 'rgb(255, 158, 68)'
             }, {
               offset: 1,
               color: 'rgb(255, 70, 131)'
             }])
           },
           data: data
         }
       ],
       grid:{
         containLabel: true
       }
     };
     // 将option数据挂载到main节点
     echarts.init(document.getElementById('main')).setOption(option);
 
   </script>
</ body >
</ html >

 

 
Web前端页面制作快速入门视频课程（京东前端页面可视化编写流程） attach_img
尚硅谷 HTML & CSS 核心基础教程（103集实战教学，从入门到精通）
HTML5新手培训视频教程 HTML5网页设计经典入门级视频教程
Node.JS Web全栈工程师系列课程  ...2
最新WEB前端从入门到资深专家课程全套
尚硅javascript视频（140集实战教学，从入门到精通）
Html从入门到精通轻松搞定网页设计html+css+js
JavaScript视频Jquery+Ajax视频教程合集  ...2
传智播客 Css+div 网页制作实例（2天完整版）全套教学视频
最新一站式 网页设计零基础HTML5网站布局实例视频教
[JavaScript] 轻松搞定网页设计javascript课程 韩顺平主讲 教学视频 百度网盘下载
[JavaScript] 网易云课堂web前端开发工程师视频教程 教学视频 百度网盘下载
[Html] html5+css3从入门到精通视频教程讲解 教学视频 百度网盘下载
[JavaScript] 妙味课堂JavaScript专题五部分全套视频教程 20G
React Native - 项目实战系列视频教程
React native应用开发框架基础到高级系列视频教程

 

转载于:https://www.cnblogs.com/veromcae/p/10012960.html

didaimi9422
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
使用echarts获取动态数据绘图时，如何防止坐标轴标签溢出
谎言三叶草
04-25 1万+
echarts可以通过配置grid.left、grid.right、grid.top、grid.bottom这四个参数来调整图表在容器中的位置，但是当echarts是获取动态数据绘图时，就可能会出现坐标轴的label过长溢出的情况。这时可以设置grid.containLabel的值为true，这个参数的默认值是false，此时，grid.left、grid.right、grid.top、grid....
解决echarts图表柱状图超出坐标轴的问题
小太阳的博客
04-23 1万+
最近项目中遇到这样一个问题，如下图： 由于容器太宽，数据量不多，导致每一个x轴的间距都特别大，还导致了柱状图超过了坐标轴。这个轴由于使用的是类目轴，首先我想到的是用留白属性，就把 boundaryGap设置为true xAxis: { type: 'category', boundaryGap: true,//设置为true ...
echart 双坐标出现上面越界
zhu_zhen_xi的博客
03-05 118
（不是样式的问题，是坐标没对上，百度居然找不到解决方式，因此记录下） yAxisIndex: 1,//对应上述第二个，即右边的坐标轴，对不上会出现越界的
C# MsChart 类似十字光标/交叉线 跟随鼠标移动功能 的优化 [问题点数：88分]
宋同学的Solution
03-27 7212
@http://bbs.csdn.net/topics/390744105 搜索了很多，自己也尝试了很多，目前还没很好的解决方法，发帖求助。 想实现类似CAD制图那种十字光标跟随的效果，其实MsChart是带这功能的 设置ChartAre属性： _chartArea.CursorX.IsUserEnabled = true; _chartArea.CursorY.IsUserEnab
echarts柱状图 设置多个横坐标共用一个柱子
奶牛纯牛蒙的博客
05-24 2473
echarts柱状图中如何实现一个‘柱’跨过多个x轴坐标
Echart
前端要前沿
06-16 4099
效果图 代码 *.html文件<div echarts [options]="chartOption" class="demo-chart"></div>*.component.ts文件window.onresize = function () { $('.demo-chart').resize(); }; let colors = ['#df8f03', '#0371
Echarts的配置解释 直角坐标系内绘图网格组件(grid)
11-17 2009
1、show(是否显示直角坐标系网格) 用法：show： true | false2、z(相当于z-index) 用法：z: 23、left、right、top、bottom grid 组件离容器上下左右的距离 用法： left： '20'4、width(grip组件的宽度， 默认自适应) 用法： width： 12 | "50%"5、width(grip组件的高度， 默认自适应) 用法： width： 12 | "50%"
echarts Y轴文字内容太长导致显示不全
最新发布
peachban的博客
01-10 2649
如上图这样一个横向的柱状图，y坐标轴的内容太长后会导致显示不全。因为数据是由后端传过来的，有些会很长有些会比较短。这个时候就需要用一些别的属性。
echarts双Y轴和datazoom的样式
qq_44161703的博客
09-09 1286
如何写双Y轴 快来看看吧
echart图表拉杆的配置
水痕
05-02 1170
dataZoom:[ //id: 'dataZoomX', type: 'slider',//inside 滚轮触发 slider 滑动条 // xAxisIndex: [0],//控制第一个 xAxis 【这里如果有多个xAxis】 handleSize:20,//滑动条的 左右2个滑动条的大小 //left:'', handleColor:'r
echarts-for-react项目实例
小牛牛的博客
07-13 1万+
实例参考https://github.com/hustcc/echarts-for-react安装依赖npm install --save echarts-for-reactimport React from 'react'; import {connect} from 'dva' import ReactEcharts from 'echarts-for-react'; import echart
echart 大量数据面积图
秋风伴落叶
07-27 6278
var base = +new Date(1968, 9, 3); var oneDay = 24 * 3600 * 1000; var date = []; var data = [Math.random() * 300]; for (var i = 1; i < 20000; i++) { var now = new Date(base += oneDay); ...
Python爬虫股票评论，snowNLP简单分析股民用户情绪（草稿）
SeaIsGod的博客
06-04 1万+
一、背景     股民是网络用户的一大群体，他们的网络情绪在一定程度上反映了该股票的情况，也反映了股市市场的波动情况。作为一只时间充裕的研究僧，我课余时间准备写个小代码get以下股民的评论数据，分析以下用户情绪的走势。这个博客还会修改，因为结果不准确，哈哈！ 二、数据来源     本次项目不用于商用，数据来源于东方财富网，由于物理条件，我只获取了一只股票的部分评论，没有爬取官方的帖子，都是获
闭包中的内存泄漏
hello，是翠花呀
03-24 745
闭包数天前写了几个echarts图表，由于页面重复调用次数太多不想代码冗余，就把echarts图表中的公共部分提取出来：function tutu(id,tyty,data,name,name2){ dom=null;myChart=null;option=null; var dom = document.getElementById(id);
ECharts图表坐标轴数据超出显示范围，以及坐标轴刻度标签显示不全解决方法
guizai_jianchi的博客
04-03 2万+
1.在使用ECharts图表时，比较常见到坐标轴数据超出显示范围的情况，如下 解决办法：添加配置 2.坐标轴刻度标签显示不全 就简单描述一下，比如你的数据横坐标有15个，但是默认不会显示全部 解决方法：添加配置 如果标签过多显示重叠，可以设置rotate倾斜角度解决 以上问题解决X，Y轴通用，使用时注意区分 xAxis 与 yAxis即可。 ...
Echarts数据可视化grid直角坐标系（xAxis、yAxis），开发全解+完美注释
热门推荐
全栈工程师开发手册（原创）https://github.com/tencentmusic/cube-studio
08-06 7万+
mytextStyle={ color:&quot;#333&quot;,//文字颜色 fontStyle:&quot;normal&quot;,//italic斜体 oblique倾斜 fontWeight:&quot;normal&quot;, //文字粗细bold bolder lighter 100 | 200 | 300 | 400... fontFamily:&quot;sans-serif&a
echarts延长坐标轴
09-13
要延长ECharts中的坐标轴，你可以使用`boundaryGap`属性来设置坐标轴的边界间隙。默认情况下，`boundaryGap`为`true`，即坐标轴两边会留出一定的空白间距。你可以将其设置为`false`来取消边界间隙，使得坐标轴延伸到图表的边缘。以下是一个示例： ```javascript option = { xAxis: { boundaryGap: false, // 取消边界间隙 // 其他配置项... }, yAxis: { boundaryGap: false, // 取消边界间隙 // 其他配置项... }, // 其他配置项... }; ``` 通过将`boundaryGap`设置为`false`，你可以使坐标轴延伸到图表的边缘，从而实现延长坐标轴的效果。记得根据你的具体需求对x轴和y轴分别进行设置。希望这能帮到你！
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值