highcharts解决从原点开始的问题

一般情况下是这样的

image.png

but,我们要的是这样的

image.png

那可怎么办,各种百度无果,甚至都用echarts重新做了一个(echarts的配置还是很方便的),终于找到解决方案:

需要调整的主要问题

  1. 纵向刻度线
  2. 显示y轴
  3. 线条从原点开始绘制
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: '部门整体趋势: (这是标题)',
      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',
      },
    },
  };

你可能感兴趣的:(highcharts解决从原点开始的问题)