Vue.js 渲染高图

Question

我的图表无法呈现我尝试使用查询选择器和参考。它不会抛出任何错误，只是不会呈现给 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();
  }

Answer 1

您是否考虑过使用推荐的 highcharts-vue 官方包装器？可以在这里下载：https://github.com/highcharts/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/>"
    });

App.vue:

    <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>

Chart.vue:

    <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>

演示：

https://codesandbox.io/s/nw750l07nj

Vue.js 渲染高图

Vue.js Render Highchart

highcharts

vue.js