Wie verwende ich Hervorhebungen in Vue? Methodeneinführung

Wie verwende ich Hervorhebungen in Vue? In der folgenden vue.js-Kolumne erfahren Sie, wie Sie Hightchats in Vue verwenden. Es hat einen gewissen Referenzwert. Freunde in Not können sich darauf beziehen. Ich hoffe, es wird für alle hilfreich sein.

Verwendung von Highcharts

npm install highcharts --save

2. Erstellen Sie eine Diagrammkomponente

import Highcharts from 'highcharts/highstock';
import HighchartsMore from 'highcharts/highcharts-more';
import HighchartsDrilldown from 'highcharts/modules/drilldown';
import Highcharts3D from 'highcharts/highcharts-3d';
import Highmaps from 'highcharts/modules/map';

HighchartsMore(Highcharts)
HighchartsDrilldown(Highcharts);
Highcharts3D(Highcharts);
Highmaps(Highcharts);
new Vue({
  el: '#app',
  router,
  axios,
  components: { App },
  template: &#39;<App/>&#39;,
  methods:{
 
    moreChart() {
        var options = this.getMoreOptions(this.type);
 
        if (this.chart) {
            this.chart.destroy();
        };
    // 初始化 Highcharts 图表
    this.chart = new Highcharts.Chart(&#39;highcharts-more&#39;, options);
    }
  }
})

<template>
    <p class="chart">
        <p :id="id" :option="option"></p>
    </p>
</template>

<script>
import HighCharts from &#39;highcharts&#39;
    export default {
        // 验证类型
        props: {
            id: {
                type: String
            },
            option: {
                type: Object
            }
        },
        mounted() {
            HighCharts.chart(this.id, this.option)
        }
    }
</script>

<style scoped>

</style>

Verwandte Empfehlungen:

? Website

! !

Das obige ist der detaillierte Inhalt vonWie verwende ich Hervorhebungen in Vue? Methodeneinführung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!