Wie Vue Echarts-Diagramme kapselt-View.js-php.cn

Wie Vue Echarts-Diagramme kapselt

醉折花枝作酒筹

Freigeben： 2021-08-12 18:02:30

nach vorne

1606 Leute haben es durchsucht

Bevor wir beginnen, folgen wir zunächst dem normalen Komponentenregistrierungsprozess, erstellen eine neue Komponente mit dem Namen „radar-chart“ im Projektkomponentenverzeichnis und stellen die Komponente dann zur Verwendung auf einer Demoseite vor.

Neuer Inhalt der Radardiagrammkomponente:

// radar-chart.vue （子组件）
<template>
    <p style="width: 100%; height: 100%;"></p>
</template>

<script>
export default {
    name: &#39;radar-chart&#39;
};
</script>

<style scoped>

</style>

Nach dem Login kopieren

Demoseitencode:

// demo.vue （父组件）
<template>
    <p style="border: 1px solid black; width: 400px; height: 300px; margin: 5px;">
        <radar-chart></radar-chart>
    </p>
</template>

<script>
import radarChart from &#39;@/components/proj-components/echarts/radar-chart&#39;;
export default {
    name: &#39;radar-chart-demo&#39;,
    components: {
        radarChart,
    },
};
</script>

<style scoped>

</style>

Nach dem Login kopieren

Demoseiten-Rendering-Bild eins:

Wie Vue Echarts-Diagramme kapselt

Initialisierungsdiagramm

Nachdem die Vorbereitungsarbeiten abgeschlossen sind, müssen wir Folgendes tun Führen Sie ECharts ein und initialisieren Sie eine ECharts-Instanz in der Komponente. Hier können Sie zunächst die Instanzen und Daten von der offiziellen Website kopieren.
(1) Einführung von ECharts in radar-chart.vue:

// radar-chart.vue （子组件）
import echarts from &#39;echarts&#39;;

Nach dem Login kopieren

(2) Erstellen Sie die Methode für Diagrammkonfigurationsdaten in Methoden. Informationen zum Datenformat finden Sie auf der offiziellen Website von Echarts:

// radar-chart.vue （子组件）

    methods: {
        // 初始化图表配置
        initOption() {
            let vm = this;
            vm.option = {
                title: {
                    text: &#39;基础雷达图&#39;
                },
                tooltip: {},
                legend: {
                    data: [&#39;预算分配（Allocated Budget）&#39;, &#39;实际开销（Actual Spending）&#39;]
                },
                radar: {
                    // shape: &#39;circle&#39;,
                    name: {
                        textStyle: {
                            color: &#39;#fff&#39;,
                            backgroundColor: &#39;#999&#39;,
                            borderRadius: 3,
                            padding: [3, 5]
                        }
                    },
                    indicator: [{ name: &#39;销售（sales）&#39;, max: 6500}, { name: &#39;管理（Administration）&#39;, max: 16000}, { name: &#39;信息技术（Information Techology）&#39;, max: 30000}, { name: &#39;客服（Customer Support）&#39;, max: 38000}, { name: &#39;研发（Development）&#39;, max: 52000}, { name: &#39;市场（Marketing）&#39;, max: 25000}]
                },
                series: [{
                    name: &#39;预算 vs 开销（Budget vs spending）&#39;,
                    type: &#39;radar&#39;,
                    // areaStyle: {normal: {}},
                    data: [{value: [4300, 10000, 28000, 35000, 50000, 19000], name: &#39;预算分配（Allocated Budget）&#39;}, {value: [5000, 14000, 28000, 31000, 42000, 21000], name: &#39;实际开销（Actual Spending）&#39;}]
                }]
            };
        },
    },

Nach dem Login kopieren

(3) Initialisieren Sie das Diagramm: In der Komponenten-Hook-Mount-Methode:

// radar-chart.vue （子组件）
    mounted() {
        this.initOption();
        this.$nextTick(() => { // 这里的 $nextTick() 方法是为了在下次 DOM 更新循环结束之后执行延迟回调。也就是延迟渲染图表避免一些渲染问题
            this.ready();
        });
    },

Nach dem Login kopieren

In Methoden:

// radar-chart.vue （子组件）
   ready() {
      let vm = this;
      let dom = document.getElementById(&#39;radar-chart&#39;);

      vm.myChart = echarts.init(dom);
      vm.myChart && vm.myChart.setOption(vm.option);
   },

Nach dem Login kopieren

Demoseite, die Bild zwei rendert:

Wie Vue Echarts-Diagramme kapselt

Hier gibt es drei Schritte: Einführung von ECharts, Initialisieren der Diagrammkonfiguration, Initialisieren des Diagramms und schließlich können Sie sehen Es befindet sich auf der vorläufigen Demoseite. Schließlich wurde dem Projekt die ECharts-Radarkartenanzeige hinzugefügt.

Diagrammkonfigurationseigenschaften extrahieren (wichtige Punkte)

Wir haben oben erfolgreich ein Radardiagramm erstellt, aber es ist offensichtlich, dass die Daten in radar-chart.vue fest codiert sind und nicht wiederholt aufgerufen werden können. Als nächstes beginnen wir mit der Verpackung.

Die Idee der Kapselung ist wie folgt:

1. demo.vue übergibt einen Satz personalisierter Daten an radar-chart.vue

2 empfängt Daten über die Props-Option

3. Verfeinern Sie die empfangenen Datendaten, überschreiben Sie die Konfigurationsdatenoption

4. Diagramm initialisieren

Spezifische Implementierung: Daten an untergeordnete Komponenten übergeben, Variablen in Daten definieren, Werte in gemounteten zuweisen

// demo.vue （父组件）
<template>
    <p style="border: 1px solid black; width: 900px; height: 600px; margin: 5px;">
        <radar-chart :indicator="indicator" :legendData="radarData"></radar-chart>
    </p>
</template>

<script>
import radarChart from &#39;@/components/proj-components/echarts/radar-chart&#39;;
export default {
    name: &#39;radar-chart-demo&#39;,
    components: {
        radarChart,
    },
    mounted() {
        this.indicator = [
            { name: &#39;销售&#39;, max: 6500 },
            { name: &#39;管理&#39;, max: 16000 },
            { name: &#39;信息技术&#39;, max: 30000 },
            { name: &#39;客服&#39;, max: 38000 },
        ];
        this.radarData = [
            {
                value: [4000, 15000, 26000, 21000],
                name: &#39;实际开销（Actual Spending）&#39;,
            }
        ];
    },
    data() {
        return {
            indicator: [], // 雷达指示器数据
            legendData: [], // 雷达图例数据
        };
    },
};
</script>

<style scoped>

</style>

Nach dem Login kopieren

Daten von der übergeordneten Komponente in Requisiten empfangen

// radar-chart.vue （子组件）

    props: {
        // 指示器数据，必传项
        // 格式举例 [{ name: &#39;a&#39;, max: 1},{ name: &#39;a&#39;, max: 1},{ name: &#39;a&#39;, max: 1}]
        indicator: {
            type: Array,
            default: () => []
        },
        // 图例数据，必填项。
        // 格式举例 [{ value: [5000, 14000, 28000], name: &#39;name&#39; }，{ value: [5000, 14000, 28000], name: &#39;name&#39; }]
        legendData: {
            type: Array,
            default: () => []
        },
    },

Nach dem Login kopieren

in ready (). Wenn Sie die beiden Attributwerte von Indikator und Daten hier aktualisieren, ist es nicht erforderlich, diese beiden Werte in initOption() zu initialisieren

Detailoptimierung und weitere Hinweise: Wie Vue Echarts-Diagramme kapselt

1 Wenn mehrere Diagramme auf einer Seite vorhanden sind, werden Diagramm-IDs automatisch generiert.

// radar-chart.vue （子组件）

    ready() {
       let vm = this;
       let dom = document.getElementById(&#39;radar-chart&#39;);

       vm.myChart = echarts.init(dom);

       // 得到指示器数据
       vm.option.radar.indicator = vm.indicator;
       // 得到图例数据
       vm.option.series[0].data = vm.legendData;

       vm.myChart && vm.myChart.setOption(vm.option);
    },

Nach dem Login kopieren

2. Diagrammdatenattribute werden mit Requisiten empfangen und die Standardkonfigurationsattribute des Diagramms werden mit defaultConfig gespeichert. Das von der übergeordneten Komponente übergebene Konfigurationsattribut wird direkt über $attrs abgerufen und schließlich zur Verwendung in „finallyConfig“ zusammengeführt , was der Erweiterung und Wartung förderlich ist.

// radar-chart.vue （子组件）
<template>
    <p :id="chartId" style="height: 100%; width: 100%;"></p>
</template>

<script>
let chartIdSeed = 1;

export default {
    data() {
        return {
            chartId: 1,
        };
    },
    mounted() {
        let vm = this;
        vm.chartId = &#39;radar-chart_&#39; + chartIdSeed++;
    },
    methods: {
        let vm = this;
        let dom = document.getElementById(vm.chartId);
    }
};
</script>

Nach dem Login kopieren

3. Verwenden Sie die Uhr, um Diagrammdatenaktualisierungen zu überwachen

Das obige ist der detaillierte Inhalt vonWie Vue Echarts-Diagramme kapselt. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!