Vue.js渲染图表

如果我尝试使用查询选择器和参照，我的图表将无法呈现。它不会抛出任何错误，只是不会渲染到DOM

模板 功能

    createChart() {
      let article = this.$el.querySelector(".highchart");
      //let article = this.$refs.highchart;
      HighCharts.chart(article, {
        series: [
          {
            type: "treemap",
            layoutAlgorithm: "squarified",
            data: this.chartData
          }
        ],
        colorAxis: {
          minColor: "#F98C32",
          maxColor: "#F04E23"
        },
        title: {
          text: `Total Items ${this.totalCount}`
        }
      });
    }

被叫上马

 mounted() {
    this.createChart();
  }

---

您是否考虑过使用推荐的

highcharts vue

官方包装？可在此处下载：。检查下面发布的代码和演示

main.js:

import Vue from "vue";
import App from "./App";
import HighchartsVue from "highcharts-vue";

Vue.config.productionTip = false;

Vue.use(HighchartsVue);

/* eslint-disable no-new */
new Vue({
  el: "#app",
  components: { App },
  template: "<App/>"
});

<template>
  <div id="app"><highcharts /> <btn /></div>
</template>

<script>
import Chart from "./components/Chart";
import Button from "./components/Button";

export default {
  name: "App",
  components: {
    highcharts: Chart,
    btn: Button
  }
};
</script>

<template>
  <div>
    <highcharts
      :options="chartOptions"
      ref="lineCharts"
      :constructor-type="stockChart"
    ></highcharts>
  </div>
</template>

<script>
import { Chart } from "highcharts-vue";
import Highcharts from "highcharts";
import exportingInit from "highcharts/modules/exporting";
import stockInit from "highcharts/modules/stock";

import { EventBus } from "./../event-bus.js";

stockInit(Highcharts);
exportingInit(Highcharts);

export default {
  props: {
    partsdata: {
      type: Array
    }
  },

  components: {
    highcharts: Chart
  },

  created() {
    EventBus.$on("btn-clicked", data => {
      this.chartOptions.series[0].data = data.newData;
    });
  },

  data() {
    return {
      chartOptions: {
        chart: {
          type: "spline",
          title: "Hassaan"
        },
        xAxis: {
          categories: [
            "Jan",
            "Feb",
            "Mar",
            "Apr",
            "May",
            "Jun",
            "Jul",
            "Aug",
            "Sep",
            "Oct",
            "Nov",
            "Dec"
          ]
        },
        tooltip: {
          crosshairs: true,
          shared: true
        },
        credits: {
          enabled: false
        },
        plotOptions: {
          spline: {
            marker: {
              radius: 4,
              lineColor: "#666666",
              lineWidth: 1
            }
          }
        },
        series: [
          {
            data: [1, 2, 3]
          }
        ]
      }
    };
  }
};
</script>

从“Vue”导入Vue；
从“/App”导入应用程序；
从“highcharts vue”导入HighchartsVue；
Vue.config.productionTip=false；
Vue.use（HighchartsVue）；
/*eslint禁用无新*/
新Vue({
el:“应用程序”，
组件：{App}，
模板：“
使用包装器是解决方案。谢谢！