Detaillierte grafische Erklärung der in Vue eingeführten Highcharts

Dieses Mal werde ich Ihnen eine detaillierte grafische Erklärung der Einführung von Highcharts in Vue geben. Was sind die Vorsichtsmaßnahmen für die Einführung von Highcharts in Vue? ein Blick.

npm importiert Highchars. Nachdem der Import abgeschlossen ist, können Sie die visuellen Komponenten von Highchars entwickeln.

npm install highcharts --save

1 Erstellen Sie eine neue chart.vue-Komponente Komponentenverzeichnis

<template>
 <p class="x-bar">
 <p :id="id"
 :option="option"></p>
 </p>
</template>
<script>
import HighCharts from 'highcharts'
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 darin eine Datei „options.js“ zum Speichern die simulierten Diagrammdaten. Inhaltsverzeichnis wie unten gezeigt

Die Daten eines Histogramms, das ich wie unten gezeigt geschrieben habe

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

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

Der Effekt ist wie unten gezeigt

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Empfohlene Lektüre:

Warum Axios-HTTP-Anfragen nicht in vue2 verwendet werden können

Bei Vue-Prozessen werden Post-Request-Parameter übergeben Axios-Frage

Das obige ist der detaillierte Inhalt vonDetaillierte grafische Erklärung der in Vue eingeführten Highcharts. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!