Welche Möglichkeiten gibt es, Highcharts-Diagramme in Vue-Projekte einzuführen?

Im Folgenden werde ich Ihnen eine Methode (ausführliche Erklärung) zur Einführung von Highcharts-Diagrammen in das Vue-Projekt vorstellen. Sie hat einen guten Referenzwert und ich hoffe, dass sie für alle hilfreich sein wird.

Npm importiert Highchars und Importe Nach Abschluss können Sie die visuelle Komponente von highchars

npm install highcharts --save

1 erstellen. Erstellen Sie eine neue chart.vue-Komponente im Komponentenverzeichnis

<template>
 <p class="x-bar">
 <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>

2. Nachdem die Diagrammkomponente erstellt wurde, beginnen Sie mit der Erstellung des Diagrammoptionsverzeichnisses und erstellen Sie es eine options.js darin, um die simulierten Diagrammdaten zu speichern, wie im folgenden Verzeichnis gezeigt

Die Daten eines Histogramms habe ich wie gezeigt geschrieben unten

module.exports = {
 bar: {
 chart: {
 type:'column'//指定图表的类型，默认是折线图（line）
 },
 credits: {
 enabled:false
 },//去掉地址
 title: {
 text: '我的第一个图表' //指定图表标题
 },
 colors: ['#058DC7', '#50B432', '#ED561B', '#DDDF00',
  '#24CBE5' ],
 xAxis: {
  categories: ['1号', '2号', '3号','3号','3号'] //指定x轴分组
 },
 yAxis: {
  title: {
  text: '最近七天', //指定y轴的标题
 },
 },
 plotOptions: {
  column: {
  colorByPoint:true
  },
  },
 series: [{ //指定数据列
  name: '小明',
  data: [{
  y:1000,
  color:"red"}, 5000, 4000,5000,2000] //数据
 }]
 }
}

3. Referenzdiagrammkomponente

<template>
 <p id="app">
 <x-chart :id="id" :option="option"></x-chart>
 </p>
</template>
<script>
// 导入chart组件
import XChart from &#39;components/chart.vue&#39;
// 导入chart组件模拟数据
import options from &#39;./chart-options/options&#39;
export default {
 name: &#39;app&#39;,
 data() {
 let option = options.bar
 return {
 id: &#39;test&#39;,
 option: option
 }
 },
 components: {
 XChart
 }
}
</script>
<style>
#test {
 width: 400px;
 height: 400px;
 margin: 40px auto;
}
</style>

Effekt Wie im Bild unten gezeigt

Das Obige habe ich für alle zusammengestellt und hoffe, dass es hilfreich sein wird alle in der Zukunft.

Verwandte Artikel:

Vue verwendet Mixins, um komprimierten Bildcode zu implementieren

Ein Beispiel für einen vue2.0-simulierten Ankerpunkt

Senden und Empfangen von Vue2.0-Ereignissen (Beobachtermodus)

Das obige ist der detaillierte Inhalt vonWelche Möglichkeiten gibt es, Highcharts-Diagramme in Vue-Projekte einzuführen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!