一般情况下是这样的
image.png
but，我们要的是这样的
image.png
那可怎么办，各种百度无果，甚至都用echarts重新做了一个（echarts的配置还是很方便的），终于找到解决方案：
需要调整的主要问题
- 纵向刻度线
- 显示y轴
- 线条从原点开始绘制
1. 设置纵向刻度线
设置如下属性即可
xAxis: {
title: { text: 'x轴标题' },
categories: [0, '一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'],
gridLineWidth: 1, // 添加x轴网格的属性
},
yAxis: [{
title: {
text: 'y轴标题',
},
labels: {
formatter() {
return `${this.value}`;
},
style: { color: '#999' },
},
},
],
image.png
那么问题来了，数据值不再坐标的焦点上
1、尚未设置xAxis的categories
在我们尚未设置任何categories数据的情况下，让图表自动给x轴分配刻度，你会发现我们不设置任何xAxis的其他属性，第一个数据点在x轴上的位置就是在原点位置。
2、当我们人为设置了xAxis的categories
一旦设置了categories数据过后，不管你设置了xAxis的min、minRange、minPadding 均为0也无济于事，第一个数据点与Y轴的距离还是有一些。
多谢网上大神的解决办法：通过label来代替categories
let categories = [0, '一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'];
xAxis: { // x轴配置
title: { text: 'x轴标题' },
//categories: [0, '一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'],
labels: {
align: 'right', // 设置x轴坐标文字的位置，在刻度的左边
formatter() {//拿到categories的数据以labels的方式进行添加
return categories[this.value];
},
},
gridLineWidth: 1,
tickInterval: 1,//为了让刻度不出现间断效果，我们在设置一下刻度间隔属性tickInterval为1
},
yAxis: [{
title: {
text: 'y轴标题',
},
labels: {
formatter() { // 给坐标轴刻度加单位
return `${this.value}元`;
},
style: { color: '#999' },
}，
minPadding: 0,//设置最小pendding为0
startOnTick: false,// y轴方向从原点开始
},
新的问题又出现了，左边的轴会冒出头，右边显示不全（bug）
添加y轴线试试
yAxis: [{
title: {
text: 'y轴标题',
},
labels: {
formatter() {
return `${this.value}元`;
},
style: { color: '#999' },
},
tickInterval: 6,
lineWidth: 2,//设置y轴线的宽度为2
minPadding: 0,
startOnTick: false,
},
image.png
y轴有了，但是有一段间隙
xAxis: { // x轴配置
title: { text: 'x轴标题' },
//categories: [0, '一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'],
labels: {
align: 'right',
formatter() {
return categories[this.value];
},
},
lineWidth: 2, // 为了美观，x轴宽度也是2
gridLineWidth: 1,
tickInterval: 1,
min: 0,//坐标轴的最小值，当为 null 是最小值将自动计算。如果设置了 startOnTick 为 true 时，最小值可能会进行向下取整
startOnTick: true, // 起始与刻度线
},
image.png
起点在原点的问题解决了，但是x轴还是显示不全
yAxis: [{
title: {
text: 'y轴标题',
},
labels: {
formatter() {
return `${this.value}元`;
},
style: { color: '#999' },
},
tickInterval: 6,
lineWidth: 2,
minPadding: 0,
startOnTick: false }, {//在图表的又边设置y轴的对立线
lineWidth: 1,//宽度为1吧
opposite: true },
],
image.png
x轴右侧又多了不能在结束点结束
xAxis: { // x轴配置
title: { text: 'x轴标题' },
//categories: [0, '一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'],
labels: {
align: 'right',
formatter() {
return categories[this.value];
},
},
lineWidth: 2,
gridLineWidth: 1,
endOnTick: true,
tickLength: 0,
tickInterval: 1,
min: 0,
max: categories.length - 1,//设置max使刻度有限值，避免结束位置不能重合的问题
startOnTick: true,
},
终于完成，最后效果
image.png
所有配置代码
let categories = [0, '一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'];
options = {
chart: { // 图表配置
type: 'spline', // 图表类型
zoomType: 'x',
},
title: { // 表格的标题信息 可配置样式（可以动态设置标题内容）
text: '部门整体趋势: <span style="color:#999">(这是标题)</span>',
useHTML: true,//text里边的文字可以识别标签
align: 'left', // 靠左
style: { // 标题的样式
color: '#3E576F',
fontSize: '16px',
},
},
xAxis: { // x轴配置
title: { text: 'x轴标题' },
//categories: [0, '一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'],
labels: {//用label里边的formatter代替categories，解决原点作为起始点的问题
align: 'right', // 设置x轴坐标文字的位置，在刻度的左边
formatter() {
return categories[this.value];
},
},
lineWidth: 2, // x轴宽度
gridLineWidth: 1, // x轴网格
endOnTick: true, // 以刻度结束为结束
tickLength: 0, // 刻度伸到下边的长度设置为0，不伸出
tickInterval: 1, // x轴的刻度步数设置为1
min: 0, // 最小的刻度数
max: categories.length - 1, // 最大的刻度数
startOnTick: true, // 起始与刻度线
},
yAxis: [{ // y轴配置
title: {
text: 'y轴标题',
},
labels: { // 坐标轴刻度，默认显示
formatter() { // 给坐标轴刻度加单位
return `${this.value}元`;
},
style: { color: '#999' }, // 修改坐标轴刻度的样式
},
tickInterval: 6, // y轴刻度线之间的间隔
lineWidth: 2, // y轴宽度
minPadding: 0,
startOnTick: false }, { // 在图表的右侧设置y轴的对立线，解决显示不全的bug
lineWidth: 1, // 对立轴线宽度设为1
opposite: true // 对立的意思
},
],
tooltip: { // 数据提示框
backgroundColor: '#FCFFC5', // 背景颜色
borderColor: '#999', // 边框颜色
animation: true, // 是否启用动画效果
shared: false,//多条线hover时是否一同显示提示框
},
plotOptions: {
spline: {
marker: {//// 每个数据点的样式
radius: 3,// 标记的尺寸
lineColor: '#666666',
lineWidth: 1,// 线宽
symbol: 'circle',//圆形
lineColor: null,// 去掉数据点边框
},
},
},
series: [{// 每个数据的配置
name: '签约金额', // 曲线代表的图例
color: '#00ff00', // 曲线颜色
// lineWidth: 5,// 线宽
marker: { // 每个数据点的样式
radius: 3, // 标记的尺寸
lineWidth: 1, // 线宽
symbol: 'circle',
lineColor: null, // 去掉数据点边框
},
data: [0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6, 10], // 数据值
}, {
name: '执行金额',
marker: {
symbol: 'circle',
radius: 3, // 标记的尺寸
lineWidth: 1, // 线宽
lineColor: null, // 去掉数据点边框
},
color: '#ff00ff',
data: [0, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8, 10], // 数据值
}],
legend: { // 图例
itemStyle: { // 图例的样式
color: '#999',
},
},
};
网友评论