Quels sont les moyens d'introduire des graphiques highcharts dans les projets vue ?-js tutoriel-php.cn

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

亚连

Libérer： 2018-06-01 11:44:57

original

1963 Les gens l'ont consulté

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

Copier après la connexion

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>

Copier après la connexion

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] //数据
 }]
 }
}

Copier après la connexion

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>

Copier après la connexion

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