快捷導(dǎo)航

在vue項(xiàng)目中引入highcharts圖表的方法(詳解)

更新時(shí)間：2018年03月05日 14:50:29 作者：lily2016n

下面小編就為大家分享一篇在vue項(xiàng)目中引入highcharts圖表的方法(詳解)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助

npm進(jìn)行highchars的導(dǎo)入，導(dǎo)入完成后就可以進(jìn)行highchars的可視化組件開(kāi)發(fā)了

npm install highcharts --save

1、components目錄下新建一個(gè)chart.vue組件

<template>
 <div class="x-bar">
 <div :id="id"
 :option="option"></div>
 </div>
</template>
<script>
import HighCharts from 'highcharts'
export default {
 // 驗(yàn)證類型
 props: {
 id: {
 type: String
 },
 option: {
 type: Object
 }
 },
 mounted() {
 HighCharts.chart(this.id,this.option)
 }
}
</script>

2、chart組件建好后，開(kāi)始創(chuàng)建chart-options目錄，里面創(chuàng)建一個(gè)options.js用來(lái)存放模擬的chart數(shù)據(jù)，如下圖目錄

如下圖我寫(xiě)的一個(gè)柱狀圖的數(shù)據(jù)

module.exports = {
 bar: {
 chart: {
 type:'column'//指定圖表的類型，默認(rèn)是折線圖（line）
 },
 credits: {
 enabled:false
 },//去掉地址
 title: {
 text: '我的第一個(gè)圖表' //指定圖表標(biāo)題
 },
 colors: ['#058DC7', '#50B432', '#ED561B', '#DDDF00',
  '#24CBE5' ],
 xAxis: {
  categories: ['1號(hào)', '2號(hào)', '3號(hào)','3號(hào)','3號(hào)'] //指定x軸分組
 },
 yAxis: {
  title: {
  text: '最近七天', //指定y軸的標(biāo)題
 },
 },
 plotOptions: {
  column: {
  colorByPoint:true
  },
  },
 series: [{ //指定數(shù)據(jù)列
  name: '小明',
  data: [{
  y:1000,
  color:"red"}, 5000, 4000,5000,2000] //數(shù)據(jù)
 }]
 }
}

3、引用chart組件

<template>
 <div id="app">
 <x-chart :id="id" :option="option"></x-chart>
 </div>
</template>
<script>
// 導(dǎo)入chart組件
import XChart from 'components/chart.vue'
// 導(dǎo)入chart組件模擬數(shù)據(jù)
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>

效果如下圖所示

以上這篇在vue項(xiàng)目中引入highcharts圖表的方法(詳解)就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

vuex實(shí)現(xiàn)購(gòu)物車的增加減少移除
這篇文章主要為大家詳細(xì)介紹了vuex實(shí)現(xiàn)購(gòu)物車的增加減少移除，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2020-06-06
element可編輯表格驗(yàn)證問(wèn)題解決
本文主要介紹了element可編輯表格驗(yàn)證問(wèn)題，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2023-05-05
vue設(shè)置默認(rèn)首頁(yè)的操作
這篇文章主要介紹了vue設(shè)置默認(rèn)首頁(yè)的操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2020-08-08
讓你一看就明白的$nextTick講解
在我們用vue時(shí),我們經(jīng)常用到一個(gè)方法是this.$nextTick,相信你也用過(guò),我常用的場(chǎng)景是在進(jìn)行獲取數(shù)據(jù)后,需要對(duì)新視圖進(jìn)行下一步操作或者其他操作時(shí),發(fā)現(xiàn)獲取不到dom,這篇文章主要給大家介紹了關(guān)于$nextTick的相關(guān)資料,需要的朋友可以參考下
2021-07-07
Vue實(shí)現(xiàn)監(jiān)聽(tīng)某個(gè)元素滾動(dòng),親測(cè)有效
這篇文章主要介紹了Vue實(shí)現(xiàn)監(jiān)聽(tīng)某個(gè)元素滾動(dòng),親測(cè)有效！具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-07-07
Vue使用xlsx插件導(dǎo)出excel文件的詳細(xì)指南
第三方庫(kù)xlsx提供了強(qiáng)大的功能來(lái)處理Excel文件,它可以簡(jiǎn)化導(dǎo)出Excel文件這個(gè)過(guò)程,下面小編就來(lái)為大家詳細(xì)講講Vue如何通過(guò)xlsx導(dǎo)出excel,需要的小伙伴可以了解下
2025-04-04
vue插件tab選項(xiàng)卡使用小結(jié)
這篇文章主要為大家詳細(xì)介紹了vue插件tab選項(xiàng)卡的使用方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2016-10-10
詳解el Cascader懶加載數(shù)據(jù)回顯示例
這篇文章主要為大家介紹了詳解el Cascader懶加載數(shù)據(jù)回顯示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2022-11-11
Vue2.0學(xué)習(xí)系列之項(xiàng)目上線的方法步驟(圖文)
這篇文章主要介紹了Vue2.0學(xué)習(xí)系列之項(xiàng)目上線的方法步驟(圖文)，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2018-09-09
Vue如何指定不編譯的文件夾和favicon.ico
這篇文章主要介紹了Vue如何指定不編譯的文件夾和favicon.ico，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-04-04