Maison > interface Web > js tutoriel > le corps du texte

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

亚连
Libérer: 2018-06-01 11:44:57
original
1876 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

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

Vue utilise des mixins pour implémenter du code d'image compressé

Un exemple de point d'ancrage simulé vue2.0

Diffusion et réception des événements Vue2.0 (mode observateur)

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal
À propos de nous Clause de non-responsabilité Sitemap
Site Web PHP chinois:Formation PHP en ligne sur le bien-être public,Aidez les apprenants PHP à grandir rapidement!