Maison >interface Web >js tutoriel >Quels sont les moyens d'introduire des graphiques highcharts dans les projets vue ?

Quels sont les moyens d'introduire des graphiques highcharts dans les projets vue ?

亚连original: 2018-06-01 11:44:571975parcourir

Ci-dessous, je vais partager avec vous une méthode (explication détaillée) pour introduire les graphiques highcharts dans le projet vue. Il a une bonne valeur de référence et j'espère qu'il sera utile à tout le monde

Npm importe des highchars et. importations Une fois terminé, vous pouvez développer le composant visuel de highchars

npm install highcharts --save

1 Créez un nouveau composant chart.vue dans le. répertoire des composants

<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. Une fois le composant graphique construit, commencez à créer les options de graphique. et créer un fichier options.js est utilisé pour stocker les données de graphiques simulés, comme indiqué dans le répertoire suivant

Les données d'un histogramme que j'ai écrit comme montré ci-dessous

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

3. Composant du tableau de référence

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

L'effet est tel que montré dans l'image ci-dessous

Ce qui précède est ce que j'ai compilé pour tout le monde. J'espère que cela sera utile à tout le monde à l'avenir.

Articles Liés

Voir plus