Explication graphique détaillée des highcharts introduits dans vue-js tutoriel-php.cn

Explication graphique détaillée des highcharts introduits dans vue

php中世界最好的语言

Libérer： 2018-03-28 14:07:29

original

3099 Les gens l'ont consulté

Cette fois, je vais vous apporter une explication graphique détaillée de l'introduction des highcharts dans vue. Quelles sont les précautions pour introduire les highcharts dans vue. Voici des cas pratiques, prenons. un regard.

npm importe des highchars. Une fois l'importation terminée, vous pouvez développer les composants visuels de highchars

npm install highcharts --save

Copier après la connexion

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

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

Copier après la connexion

2. Une fois le composant graphique construit, commencez à créer le répertoire chart-options et créez-y un fichier options.js pour le stocker. les données du graphique simulé. Table des matières comme indiqué ci-dessous

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

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

Copier après la connexion

3, Citationcomposant graphique

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

Copier après la connexion

L'effet est comme indiqué ci-dessous

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

Pourquoi la requête http axios ne peut pas être utilisée dans vue2

Les paramètres de requête de publication sont transmis lorsque vue traite Question axios

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!