溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
npm進行highchars的導入，導入完成后就可以進行highchars的可視化組件開發了
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組件建好后，開始創建chart-options目錄，里面創建一個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圖表的方法(詳解)就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持億速云。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
