如何调整excel图表x坐标横轴刻度间距？_百度知道
如何调整excel图表x坐标横轴刻度间距？
就是如何将横轴上数据的差值反映在刻度间距上，比如横轴数据是0、1、3、6、10、20、22。怎么让这些数据在横轴上不是等间距的分布，而是随着相邻数据差值大小变化而分散的？
答题抽奖
首次认真答题后
即可获得3次抽奖机会，100%中奖。
采纳率：68%
选择X轴 点击右键 选择坐标轴格式
去掉 数值（Y）轴置与分类之间 前面的勾 就OK了
1条折叠回答
为您推荐：
其他类似问题
excel图表的相关知识
换一换
回答问题，赢新手礼包
个人、企业类
违法有害信息,请在下方选择后提交
色情、暴力
我们会通过消息、邮箱等方式尽快将举报结果通知您。博客分类：
Echarts调整图表上下左右的间距，Echarts调整柱状图左右的间距
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&
(C)Copyright 蕃薯耀 日
http://fanshuyao.iteye.com/
做了个柱状图的报表，如下：
但是图和下面的表格没有对齐，需要做边距的调整。
在option内增加Grid属性控制上下左右的间距，如下：
left: '8%',
right: '0',
bottom: '1%',
containLabel: true
直角坐标系内绘图网格，单个 grid 内最多可以放置上下两个 X 轴，左右两个 Y 轴。可以在网格上绘制，，。
文档见：http://echarts.baidu.com/option.html#grid
最后效果如下：
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&
(C)Copyright 蕃薯耀 日
http://fanshuyao.iteye.com/
浏览: 1011767 次
来自: 深圳
jstl-1.2.jar下载地址，standard-1.1.2 ...
Java poi Excel导出文件，Java poi 导出E ...
json-lib JsonUtils 工具类，json-lib ...
SqlUtils工具类，Sql IN 条件拼接工具类===== ...
Java文件下载，Java文件下载中文乱码，Java通用文件下 ...
(window.slotbydup=window.slotbydup || []).push({
id: '4773203',
container: s,
size: '200,200',
display: 'inlay-fix'Excel中自定义不等间距的坐标轴刻度_百度文库
您的浏览器Javascript被禁用，需开启后体验完整功能，
享专业文档下载特权
&赠共享文档下载特权
&10W篇文档免费专享
&每天抽奖多种福利
两大类热门资源免费畅读
续费一年阅读会员，立省24元！
Excel中自定义不等间距的坐标轴刻度
阅读已结束，下载本文需要
想免费下载本文？
定制HR最喜欢的简历
下载文档到电脑，同时保存到云知识，更方便管理
加入VIP
还剩2页未读，
定制HR最喜欢的简历
你可能喜欢echarts之折线图配置 - 简书
echarts之折线图配置
之前自学的时候也使用过echarts来制作柱状图，折线图，地图，现在想想那时候做的简直是太LOW了，就是简单的在官网上，模仿人家的示例代码，改改数据，就可以了，原生态的，样子果然是很丑。
在我们的项目中，我们自己封装了echarts指令，只用自己定义一下样式，然后调用数据接口，就可以了，这里先不多说封装指令了，现在先说说怎么调整样式
我自己写的一个代码为例，以折线图为例
一 . 问题汇总： 折线图问题与解决
折线图中的多条折线，怎么设置？
怎么设置echarts的背景颜色？
怎么设置X轴，Y轴的坐标线的颜色？
怎么将X轴的数据倾斜显示？
怎么让你的折线有弧度？
初始样式如图，以及要解决的问题：
我的博客地址 http://blog.zhouminghang.xyz
前提准备条件
要使用echarts，首先要在你的页面中引入echarts.js；
要在.html文件中，设置一个容器，并给它设置宽高属性；
再次声明，必须给容器设置宽高，它是用来给画布提供一个空间，否则是不会显示的；
最后就是关于echarts的配置；
可以单独写一个js文件，然后引进来；
也可以直接在index.html中写一个&script& // 相关代码 &/script&
index.html文件代码如下：
&!DOCTYPE html&
&html lang="en"&
&meta charset="utf-8"&
&title&&/title&
&!--第一步： 引入 ECharts 文件 --&
&script src="js/node_modules/echarts/dist/echarts.min.js"&&/script&
&!--第二步：指定一个容器用来存放echarts，也就是一个设置宽高属性的 DOM节点 --&
&div id="box" style="width: 600height:400"&&/div&
我这里图方便，js就直接写在html文件里了
// 获取到这个DOM节点，然后初始化
var myChart = echarts.init(document.getElementById("box"));
// option 里面的内容基本涵盖你要画的图表的所有内容
var option = {
// 定义样式和数据
// 一定不要忘了这个，具体是干啥的我忘了，官网是这样写的使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
你在写myChart.setOption(option);这行代码的时候一定不要忘了这个myChart是要和你上面定义的var 变量名对应起来，比如var myChart = echarts.init(document.getElementById("box"));
举个栗子吧：
如果你定义的变量名是oMyChart,那你就这样写：
var oMyChart = echarts.init(document.getElementById("box"));
var option = {
// 定义样式和数据
oMyChart.setOption(option);
关键内容都在option中
var option = {
backgroundColor: '#FBFBFB',
tooltip : {
trigger: 'axis'
data:['充值','消费']
calculable : true,
axisLabel:{
rotate: 30,
interval:0
axisLine:{
lineStyle :{
color: '#CECECE'
type : 'category',
boundaryGap : false,
data : function (){
var list = [];
for (var i = 10; i &= 18; i++) {
if(i&= 12){
list.push('2016-'+i + '-01');
list.push('2017-'+(i-12) + '-01');
type : 'value',
axisLine:{
lineStyle :{
color: '#CECECE'
series : [
name:'充值',
type:'line',
symbol:'none',
smooth: 0.2,
color:['#66AEDE'],
data:[800, 300, 500, 800, 300, 600,500,600]
name:'消费',
type:'line',
symbol:'none',
smooth: 0.2,
color:['#90EC7D'],
data:[600, 300, 400, 200, 300, 300,200,400]
三. 问题解决
3.1 怎么给echarts的容器添加背景色？
这是我碰到的第一个坑，你是不是和我一样，直接给容器添加了background-color属性，但是你会发现并没有什么卵用
代码如下：
&div id="box" style="width: 600 height:400 background-color:"&&/div&
效果如下：
我的博客地址 http://blog.zhouminghang.xyz
你会发现背景色应用不上，这里我自己认为，echarts画折线图什么的，就相当于是使用canvas在画图，它在画图前已经将画布初始化了，所以给容器添加背景色是不行的，那么怎么办呢？
解决办法：
要在optionecharts图的配置中进行配置，添加background-color属性；
为了区别，看看到底是给容器添加的背景色应用上了，还是option中的背景色应用上了；
我们设置容器背景为粉色，设置echarts中的option为#FBFBFB；
代码如下：
&!DOCTYPE html&
&html lang="en"&
&meta charset="utf-8"&
&title&&/title&
&script src="js/node_modules/echarts/dist/echarts.min.js"&&/script&
&div id="box" style="width: 1000 height:500 background-color:"&&/div&
// 获取到这个DOM节点，然后初始化
var myChart = echarts.init(document.getElementById("box"));
// option 里面的内容基本涵盖你要画的图表的所有内容
// 定义样式和数据
var option = {
// 给echarts图设置背景色
backgroundColor: '#FBFBFB',
// -----------& // 给echarts图设置背景色
tooltip: {
trigger: 'axis'
data: ['充值', '消费']
calculable: true,
type: 'category',
// boundaryGap: false,
data: function() {
var list = [];
for (var i = 10; i &= 18; i++) {
if (i &= 12) {
list.push('2016-' + i + '-01');
list.push('2017-' + (i - 12) + '-01');
type: 'value'
series: [{
name: '充值',
type: 'line',
data: [800, 300, 500, 800, 300, 600, 500, 600]
name: '消费',
type: 'line',
data: [600, 300, 400, 200, 300, 300, 200, 400]
// 一定不要忘了这个，具体是干啥的我忘了，官网是这样写的使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
区别以及效果：
在这里我同时给容器添加背景色，在echarts配置中设置背景色，一会我们看看是哪个背景色作用上了，代码如下：
我的博客地址 http://blog.zhouminghang.xyz
很显然，配置里的背景色应用上了，所以直接给容器设置背景是行不通的，效果如图所示：
我的博客地址 http://blog.zhouminghang.xyz
3.2 怎么设置多条折线以及每条折线的颜色
在series中以数组形式添加多组数据即可；
在每条折线里面直接添加color: ['相应的颜色']
代码如下：
我的博客地址 http://blog.zhouminghang.xyz
效果图如下：
我的博客地址 http://blog.zhouminghang.xyz
3.3 去掉小圆点
设置symbol: 'none'
代码对比：
我的博客地址 http://blog.zhouminghang.xyz
效果对比：
我的博客地址 http://blog.zhouminghang.xyz
3.4 设置折线图的弧度
设置smooth属性
属性值在0-1之间
代码对比图：
我的博客地址 http://blog.zhouminghang.xyz
效果对比图：
我的博客地址 http://blog.zhouminghang.xyz
3.5 设置坐标轴的颜色
为了让效果颜色更加明显，就给坐标轴添加比较显眼的颜色，只做个示范用，项目中肯定不会用这么重的颜色，一般使用灰色系的颜色比较淡的
设置X轴颜色为红色
在xAxis下添加
axisLine: {
lineStyle: {
color: 'red'
同理设置Y轴
我的博客地址 http://blog.zhouminghang.xyz
我的博客地址 http://blog.zhouminghang.xyz
3.6 怎么让折线图从X轴0刻度开始
设置boundaryGap: false,
代码如下：
我的博客地址 http://blog.zhouminghang.xyz
效果如下：
我的博客地址 http://blog.zhouminghang.xyz
3.7 怎么让X轴的时间这组数据旋转
有时候我们X轴数据比较长又比较多的时候，水平放置肯定成不下，那我们就让它倾斜着放，这样就可以放更多的数据。
好了，废话不多说，看代码：
我的博客地址 http://blog.zhouminghang.xyz
效果如图：
我的博客地址 http://blog.zhouminghang.xyz
突然发现我写的有个小问题，少了一组数据，很尴尬的赶脚
你可以直接在data中添加一组数据
哈哈，我比较懒，就直接修改那个判断条件，将i&=18改成i&18;
完整的代码如下：
&!DOCTYPE html&
&html lang="en"&
&meta charset="utf-8"&
&title&&/title&
&script src="js/node_modules/echarts/dist/echarts.min.js"&&/script&
&div id="box" style="width: 1000 height:500 background-color:"&&/div&
// 获取到这个DOM节点，然后初始化
var myChart = echarts.init(document.getElementById("box"));
// option 里面的内容基本涵盖你要画的图表的所有内容
var option = {
// 定义样式和数据
backgroundColor: '#FBFBFB',
tooltip: {
trigger: 'axis'
data: ['充值', '消费']
calculable: true,
axisLabel: {
rotate: 30,
interval: 0
axisLine: {
lineStyle: {
color: 'red'
type: 'category',
boundaryGap: false,
data: function() {
var list = [];
for (var i = 10; i & 18; i++) {
if (i &= 12) {
list.push('2016-' + i + '-01');
list.push('2017-' + (i - 12) + '-01');
type: 'value',
axisLine: {
lineStyle: {
color: '#CECECE'
series: [{
name: '充值',
type: 'line',
symbol: 'none',
smooth: 0.3,
color: ['#66AEDE'],
data: [800, 300, 500, 800, 300, 600, 500, 600]
name: '消费',
type: 'line',
symbol: 'none',
smooth: 0.3,
color: ['#90EC7D'],
data: [600, 300, 400, 200, 300, 300, 200, 400]
// 一定不要忘了这个，具体是干啥的我忘了，官网是这样写的使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
效果如图：
我的博客地址 http://blog.zhouminghang.xyz
博客blog.zhouminghang.xyz暂停更新
发现 关注 消息 iOS 第三方库、插件、知名博客总结 作者大灰狼的小绵羊哥哥关注
09:45字数 61697阅读 3316评论 2喜欢 85 用到的组件 1、通过CocoaPods安装 项目名称 项目信息 AFNetworking 网络请求组件 FM...
用两张图告诉你，为什么你的 App 会卡顿? - Android - 掘金Cover 有什么料？ 从这篇文章中你能获得这些料： 知道setContentView()之后发生了什么？ ... Android 获取 View 宽高的常用正确方式，避免为零 - 掘金相信有很多朋友...
用两张图告诉你，为什么你的 App 会卡顿? - Android - 掘金 Cover 有什么料？ 从这篇文章中你能获得这些料： 知道setContentView()之后发生了什么？ ... Android 获取 View 宽高的常用正确方式，避免为零 - 掘金 相信有很多...
这篇文章主要讲述Echarts设置字体和线条的颜色相关操作笔记，希望文章对你有所帮助，主要是自己的在线笔记吧。我在前面先放各种修改前后图片颜色的对照，后面再详细介绍代码。这样更方便阅读及读者知道，是否对自己有所帮助，其重点是如何在模板动态网页或JSP网站中插入Echarts...
说明: 已将折线图封装到了一个UIView子类中，并提供了相应的接口。若你遇到相应的需求可以直接将文件拖到项目中，调用相应的接口即可,感谢@ 世俗孤岛 X轴为前7天的时间,动态获取日期,点击坐标点弹出标签 有问题联系QQ:
Blog中涉及到的知识点 CA...
昨日陆毅在微博中卖萌搞怪相片，陆毅穿着红色衣服，好可爱哦！ 陆毅说：向侯局看齐，打老虎抓苍蝇，奋不顾身[加油][加油]喏，为了凑齐这四个小家伙咱也是够拼的， 以爸爸的名义搞定四份儿童套餐！皮卡丘来了，一个不落，两个小娃儿不用抢喽！ 网友互动： 陆毅是个好艺人！从不跟人掐，也...
特别佩服古人文笔，将每种事物渲染的淋漓尽致。李师广的《菊韵》：秋霜造就菊城花，不尽风流写晚霞。信手拈来无意句，天生韵味入千家。 小径曲通幽，尽显黄金甲。身影独留处，满手留菊香。《采菊》(小河湾)
书页，书页，金玉楼阁幻灭。囚人覆水难收，寂漠云雕刻楼，楼刻，楼刻，绿叶萧萧碧落。
看见这么多人发关于于欢案的文章与讨论，感觉有些观点偏驳，故乱写一下，权当表达自己的观点。 “山东这个案子 我不是法学的 具体怎么判我不知道 但是有两点可以肯定的 现在这个舆论 在发展下去 无非就是抨击中国司法体系 扰乱社会主义法制制度 让民众对司法体系失去信任 进而达到某些...