xAxis: {

show: true, // 是否显示 x 轴

position: 'top', // x 轴的位置('top','bottom')

type: 'category', // 坐标轴类型

nameRotate: 10, // 坐标轴名字旋转,角度值

inverse: false, // 是否是反向坐标轴

boundaryGap: ['20%', '20%'], // 坐标轴两边留白策略

splitNumber: 5, // 坐标轴的分割段数(预估值)

axisLine: {

show: true, // 是否显示坐标轴轴线

symbol: ['none', 'arrow'], // 轴线两端箭头,两个值,none表示没有箭头,arrow表示有箭头

symbolSize: [10, 15], // 轴线两端箭头大小,数值一表示宽度,数值二表示高度

lineStyle: {

color: '#333', // 坐标轴线线的颜色

width: '5', // 坐标轴线线宽

type: 'solid', // 坐标轴线线的类型('solid',实线类型;'dashed',虚线类型;'dotted',点状类型)

},

},

axisTick: {

show: true, // 是否显示坐标轴刻度

inside: true, // 坐标轴刻度是否朝内,默认朝外

length: 5, // 坐标轴刻度的长度

lineStyle: {

color: '#FFF', // 刻度线的颜色

width: 10, // 坐标轴刻度线宽

type: 'solid', // 坐标轴线线的类型('solid',实线类型;'dashed',虚线类型;'dotted',点状类型)

},

},

axisLabel: {

show: true, // 是否显示刻度标签

interval: '0', // 坐标轴刻度标签的显示间隔,在类目轴中有效.0显示所有

inside: true, // 刻度标签是否朝内,默认朝外

rotate: 90, // 刻度标签旋转的角度,在类目轴的类目标签显示不下的时候可以通过旋转防止标签之间重叠;旋转的角度从 -90 度到 90 度

margin: 10, // 刻度标签与轴线之间的距离

// formatter 刻度标签的内容格式器,支持字符串模板和回调函数两种形式

color: '#FFF', // 刻度标签文字的颜色

fontStyle: 'normal', // 文字字体的风格('normal',无样式;'italic',斜体;'oblique',倾斜字体)

fontWeight: 'normal', // 文字字体的粗细('normal',无样式;'bold',加粗;'bolder',加粗的基础上再加粗;'lighter',变细;数字定义粗细也可以,取值范围100至700)

fontSize: '20', // 文字字体大小

align: 'left', // 文字水平对齐方式,默认自动('left','center','right')

verticalAlign: 'left', // 文字垂直对齐方式,默认自动('top','middle','bottom'

lineHeight: '50', // 行高 )

backgroundColor: 'red', // 文字块背景色,例:'#123234', 'red', 'rgba(0,23,11,0.3)'

},

splitLine: {

show: true, // 是否显示分隔线。默认数值轴显示,类目轴不显示

interval: '0', // 坐标轴刻度标签的显示间隔,在类目轴中有效.0显示所有

color: ['#ccc'], // 分隔线颜色,可以设置成单个颜色,也可以设置成颜色数组,分隔线会按数组中颜色的顺序依次循环设置颜色

width: 3, // 分隔线线宽

type: 'solid', // 坐标轴线线的类型('solid',实线类型;'dashed',虚线类型;'dotted',点状类型)

},

splitArea: {

show: true, // 是否显示分隔区域

interval: '0', // 坐标轴刻度标签的显示间隔,在类目轴中有效.0显示所有

areaStyle: {

color: ['rgba(250,250,250,0.3)','rgba(200,200,200,0.3)'], // 分隔区域颜色。分隔区域会按数组中颜色的顺序依次循环设置颜色。默认是一个深浅的间隔色

opacity: 1, // 图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形

},

},

data: {

textStyle: {

color: '#FFF', // 文字的颜色

fontStyle: 'normal', // 文字字体的风格('normal',无样式;'italic',斜体;'oblique',倾斜字体)

fontWeight: 'normal', // 文字字体的粗细('normal',无样式;'bold',加粗;'bolder',加粗的基础上再加粗;'lighter',变细;数字定义粗细也可以,取值范围100至700)

fontSize: '20', // 文字字体大小

align: 'left', // 文字水平对齐方式,默认自动('left','center','right')

verticalAlign: 'left', // 文字垂直对齐方式,默认自动('top','middle','bottom'

lineHeight: '50', // 行高 )

backgroundColor: 'red', // 文字块背景色,例:'#123234', 'red', 'rgba(0,23,11,0.3)'

},

},

}

echarts x轴加箭头,ECharts X轴(xAxis)相关推荐

  1. vue echarts 折线图多Y轴显示,加动态配置Y轴颜色

    1.效果图 2.引入依赖 npm install echarts --save 3.在mian.js中引入 import * as echarts from 'echarts'; Vue.protot ...

  2. Vue 中echarts的数据参数使用、X轴Y轴

    Echarts 柱状图配置详解 - 龙恩0707 - 博客园 ECharts图表设置x轴和y轴显示数值_King汀的博客-CSDN博客_echarts设置y轴数值 echarts柱状图 渐变色_kyl ...

  3. ECharts实例开发学习笔记二——时间轴

    记录一下ECharts时间轴的使用,首先是照着官方的示例做一遍,在这里不要忘了引入timelineOption.js,后面介绍如何动态创建时间轴的记录数,即根据需求可伸缩显示有多少天或者年月等轴标记数 ...

  4. echarts系列-带图教你调整左右位置x轴样式网格虚线刻度居中双轴Y轴滚动上下移动文字旋转改分割线颜色部分字体改色折注混合,X轴的颜色,X轴字体颜色,调整柱子颜色,调整小图标图例的大小和位置,鼠标

    本文已参与「新人创作礼」活动,一起开启掘金创作之路. 宝子们,今天又是开心的一天呢~ 上面先说注意事项 1.如果使用show hidden控制图表显示隐藏,某些切换效果很奇怪,比如饼图,会从左上角开始 ...

  5. vue中echarts折线图双折线,鼠标悬浮时间,将两个X轴的内容以及Y轴的内容全部显示出来

    vue中echarts折线图双折线,鼠标悬浮时间,将两个X轴的内容以及Y轴的内容全部显示出来: 只要修改一个地方,用formatter方法 tooltip: {trigger: 'axis',axis ...

  6. echarts折线图:X、Y轴单位、去掉折线点

    先看下实现之后的效果图: ①:x轴每个数据都带单位:(y轴同理) xAxis: {show:true,type: 'category',boundaryGap: true,data: ['1', '2 ...

  7. 可视化 | Echarts基础异步加载数据交互组件数据集

    目录 1. ECharts 简介 2. ECharts 安装 3. ECharts 配置语法 4. ECharts 图饼 5. ECharts 样式设置 6. ECharts 异步加载数据 7. EC ...

  8. java动态柱状图_springboot动态加载Echarts柱状图

    本文实例为大家分享了springboot动态加载Echarts柱状图的具体代码,供大家参考,具体内容如下 第一次写博客,废话不多说,直接上代码 后台代码 @RequestMapping("/ ...

  9. 在一个html加载多个echarts,Echarts一个页面加载多个图表及图表自适应

    Echarts一个页面加载多个图表及图表自适应 模块化加载 //入口 require.config({ paths: { echarts: 'http://echarts.baidu.com/buil ...

最新文章

  1. Android开发遇到eclipse运行程序时报timeout
  2. R语言使用psych包的fa函数对指定数据集进行因子分析(输入数据为相关性矩阵)、使用rotate参数指定进行斜交旋转提取因子、使用factor.plot函数可视化斜交旋转因子分析、并解读可视化图形
  3. python pandas inplace用法
  4. [log.js]一个node端带文件路径和颜色的console.log
  5. 在WPF中使用WinForm控件方法
  6. vivo 2019:关于企业文化如何影响手机企业发展的三个追问
  7. MySQL流浪记(六)—— CONCAT到GROUP_CONCAT的沿途风景(图文详解)
  8. python操作json字符串,超详细的Python文件操作知识
  9. C语言,利用数组编写程序输入30个数,分别统计正整数,0,负数个数,并求和
  10. xcodebuild构建时报错unknown error -1=ffffffffffffffff Command /bin/sh failed with exit code 1
  11. 马斯克:将打造一款2.5万美元电动汽车
  12. 卢伟冰暗示Redmi K30 Pro:亮点多多值得再憋憋
  13. Java8 中通过 Stream 对列表进行去重的几种方法
  14. 系统板I/O端口地址分配(一)
  15. spring Assert
  16. python html做界面_[Python]简单的HTML页面合并脚本
  17. Java 迭代实现归并排序
  18. 新手入门:盘点Web测试与APP测试的异同点
  19. 企业如何做好品牌推广工作?
  20. NYOJ 独木舟上的旅行

热门文章

  1. python计算两张图像的L1和L2损失
  2. 【AAA】AAA协议介绍
  3. 在阿里云上遇见更好的Oracle(三)
  4. 卸载MySQL以及重装卡到Start Services的解决办法(亲测有效,刚重装成功)
  5. TCP TIME_WAIT详解
  6. Dapper入门学习
  7. osmand中矢量数据地图绘制
  8. [转]Android中在SurfaceView上高效绘图
  9. android 之反编译
  10. Android 如何才能捕获系统的恢复出厂设置事件