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>

图表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渲染高图

1 个答案: