使HighChar的 x轴y轴相交于0(起点)

一开始时的效果是这样的

2b9a2afcb6ca8a28a8fa9b44113a1d8.png

可我想实现的效果是这样

7587d1c50f5acdad2653ecebe62d6f8.png

我用的是highChart，因为规定了y轴要从0开始，x轴要从1月份开始，所以在设置x，y轴的时候设定了起始值，问题就出现在这里，当你给y设置了起始值时你所要渲染的数据的第一组是会被覆盖的，所以你得手动给y值添加一组数据0到最开头

5a69386d262b07c78f845b88bb55636.png

然后就是自己手动重写x轴的数据

8490cdcb6fbdbfef85e7a07dde21c14.png

min: 1 是表示x轴从1开始
max: 13 是因为x轴不能显示最后一个数据，所以x轴数据得+1 ( 这个我找了很久没找到解决方案，如果有解决方法的可以告知一下 )

基本上就这样了，最重要的就是 y轴的数据应该添加一组数据到最前面，x轴得max的值得总数再+1
最后完整的hightchart配置代码

 // 资源利用率
      loadResource () {

        let actuals = [], // y值 可用数据
          avilables = []  // y值 实际数据

        this.resourceUseRate.actuals.unshift(0)
        this.resourceUseRate.avilables.unshift(0)
        avilables = this.resourceUseRate.actuals.map((x) => {  return parseInt(x) })
        actuals = this.resourceUseRate.avilables.map((x) => {  return parseInt(x) })


        this.$nextTick(() => {
          // 加载数据后  调用利用资源方法
          $('#resource_box').highcharts({
            chart: {
              type: 'area'
            },
            title: {
              text: ''
            },
            credits: {//去除水印
              enabled: false
            },
            legend: {
              enabled: true,
              verticalAlign: 'top',
              align: 'right',
            },
            // categories: this.resourceUseRate.months,

            xAxis: {
              min: 1,
              max:13,
              showLastLabel: true,
              tickAmount: 12,
              tickPositioner:  () => {
                let positions= [],
                    monList = this.resourceUseRate.months // 返回结果为字符串的 1 - 12月份

                for (let i = 0; i< monList.length; i++) {
                  positions.push(parseInt(monList[i])) //转成 num类型的月份,string的会出现错误
                }
                console.log(positions)
                return positions
              }
            },
            yAxis: {
              gridLineDashStyle: 'longdash',
              title: {
                text: ''
              },
              tickAmount: 8,
              labels: {
                formatter: function () {
                  return this.value
                }
              },
              lineWidth: 1
            },
           
            plotOptions: {
              area: {
                enableMouseTracking: false,
                pointStart: 0,
                marker: {
                  enabled: false,
                }
              }
            },
            series: [{
              name: '可用',
              color: '#92E5E6',
              data: actuals,
              lineWidth: 1,
              lineColor: '#828282'
            }, {
              name: '实际',
              color: '#C4DBFC',
              data: avilables,
              lineWidth: 1,
              lineColor: '#828282'
            }]
          })

        })


      },

由于对hightchart没有做深入研究，可能说的会有错误，文章仅供参考，如有错误还忘告知。