在vue項目中引入highcharts圖表的方法(詳解)
更新時間：2018年03月05日 14:50:29 作者：lily2016n
下面小編就為大家分享一篇在vue項目中引入highcharts圖表的方法(詳解)，具有很好的參考價值，希望對大家有所幫助
npm進行highchars的導入，導入完成后就可以進行highchars的可視化組件開發(fā)了
npm install highcharts --save
1、components目錄下新建一個chart.vue組件
<template>
<div class="x-bar">
<div :id="id"
:option="option"></div>
</div>
</template>
<script>
import HighCharts from 'highcharts'
export default {
// 驗證類型
props: {
id: {
type: String
},
option: {
type: Object
}
},
mounted() {
HighCharts.chart(this.id,this.option)
}
}
</script>
2、chart組件建好后，開始創(chuàng)建chart-options目錄，里面創(chuàng)建一個options.js用來存放模擬的chart數據，如下圖目錄
如下圖我寫的一個柱狀圖的數據
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] //數據
}]
}
}
3、引用chart組件
<template>
<div id="app">
<x-chart :id="id" :option="option"></x-chart>
</div>
</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>
效果如下圖所示
以上這篇在vue項目中引入highcharts圖表的方法(詳解)就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關文章
這篇文章主要為大家詳細介紹了vuex實現購物車的增加減少移除，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-06-06
本文主要介紹了element可編輯表格驗證問題，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2023-05-05
這篇文章主要介紹了vue設置默認首頁的操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-08-08
在我們用vue時,我們經常用到一個方法是this.$nextTick,相信你也用過,我常用的場景是在進行獲取數據后,需要對新視圖進行下一步操作或者其他操作時,發(fā)現獲取不到dom,這篇文章主要給大家介紹了關于$nextTick的相關資料,需要的朋友可以參考下2021-07-07
這篇文章主要介紹了Vue實現監(jiān)聽某個元素滾動,親測有效！具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-07-07
第三方庫xlsx提供了強大的功能來處理Excel文件,它可以簡化導出Excel文件這個過程,下面小編就來為大家詳細講講Vue如何通過xlsx導出excel,需要的小伙伴可以了解下2025-04-04
這篇文章主要為大家詳細介紹了vue插件tab選項卡的使用方法，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-10-10
這篇文章主要為大家介紹了詳解el Cascader懶加載數據回顯示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-11-11
這篇文章主要介紹了Vue2.0學習系列之項目上線的方法步驟(圖文)，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-09-09
這篇文章主要介紹了Vue如何指定不編譯的文件夾和favicon.ico，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04