vue使用中highcharts实现折线面积图

    <div class="RightCon" id="chart1"></div>
    initData() {
      let that = this;
      var chart1 = that.Highcharts.chart('chart1', {
        colors: ['#a0b0de', '#abcad3', '#d7e0c6', '#feeed6'],
        chart: {
          type: 'areaspline'
        },
        title: {
          text: ''
        },
        legend: {
          // layout: 'vertical',
          // align: 'left',
          // verticalAlign: 'top',
          // x: 150,
          // y: 100,
          // floating: true,
          // borderWidth: 1,
        },
        xAxis: {
          categories:['0','1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12','13','14', '15', '16', '17', '18', '19', '20', '21', '22', '23'],
          title: {
            text: '(时)',
            align: 'high',
            x:13,
            y: -25,
          },
        },
        yAxis: {
          title: {
            text: '功能（kw）',
            align: 'high',
            rotation:360
          }
        },
        tooltip: {
          shared: true,
          valueSuffix: ' 单位'
        },
        plotOptions: {
          areaspline: {
            fillOpacity: 0.5
          }
        },
        series: [{
          name: '小张',
          data: [3, 4, 3, 5, 4, 10, 12,3, 4, 3, 5, 4, 10, 12],
        }, {
          name: '小潘',
          data: [1, 3, 4, 3, 3, 5, 4,3, 4, 3, 5, 4, 10, 12],
        },{
          name: '小潘',
          data: [3, 4, 3, 5, 4, 10, 12, 4,3, 4, 3, 5, 4, 10, 12],
        }
        ]
      });
    },