echarts或vcharts的X轴设置

vcharts
vcharts就是基于vue对echarts进行封装后的图表组件,其配置有两个参数settting和extend，settings的参数格式参照vcharts的官方文档(https://v-charts.js.org/#/),extend参照echarts的官方文档，如果同时存在两个参数，extend会覆盖掉settings中相同的配置
感觉vcharts使用的数据格式比vcharts简单一点

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或vcharts的X轴设置相关推荐

echarts图表x，y轴的设置
xAxis属性代表echarts图表的x轴设置代码如下 xAxis : [{type : 'category', // type:坐标轴类型.// [ default: 'category' ]/*可 ...
ECharts双y轴设置0刻度对齐，左右刻度根据数据变化？
一.ECharts双y轴设置0刻度对齐,左右刻度值根据数据变化? 双y轴因为左右的数值有正数有负数的原因,出现0刻度不在一条线上的情况,解决办法如下. 代码如下: //获取数据中的最大值 functi ...
Echarts实现多个x轴或y轴曲线图
Echarts实现多个x轴或y轴曲线图效果图如下: 1.1 配置option对象 option:{// 设置 x 轴的样式xAxis:{},// 设置 y 轴的样式yAxis:[],// 设置每条曲 ...
Echarts实现折线图Y轴不等距百分比（最终解决方案）
Echarts实现折线图Y轴不等距百分比(最终解决方案-上集) 出现背景解决思路总结附加出现背景最近公司有一个需求,主要是想展示近7日产品的一个良品率(百分率制).但是呢,基本上每天这个 ...
echarts配置多个y轴
echarts配置多个y轴的时候,需要加上: yAxisIndex: 1 1 { 2 name:'来水增量累积(mm)', 3 type:'line', 4 stack: '总量', 5 yAxisI ...
python使用matplotlib可视化、为可视化图像的X轴和Y轴设置自定义的轴标签（axis labels of matplotlib plot）
python使用matplotlib可视化.为可视化图像的X轴和Y轴设置自定义的轴标签(axis labels of matplotlib plot) 目录
Vue：echarts的柱状图为什么X轴上的文字不显示？
Vue:echarts的柱状图为什么X轴上的文字不显示? 资源: echarts x轴文字显示不全(解决方案) echarts柱状图X轴底部文字有的不显示出来?
【Python气象绘图临摹】图像绘制（下）:地理子图GeoAxes、xy轴设置、应用ncl色阶colormap、各标题、海岸线、添加文本、添加矩形框
文章目录前言 plt.fig.ax.三者绘制区别: GeoAxes地图投影:绘图投影和数据投影 x轴.y轴设置: 多个子图之间的间距调节: 图上添加文本.矩形框: python中ncl色阶color ...
c#chart 的x轴设置时间格式，第一个坐标从0开始
#region 图表展示/// <summary>/// 图表对象/// </summary>Series series;/// <summary>/// x轴最大 ...

echarts或vcharts的X轴设置

echarts或vcharts的X轴设置相关推荐

最新文章

热门文章