在vue項(xiàng)目中引入highcharts圖表的方法
更新時間：2019年01月21日 10:41:13 作者：muzidigbig
今天小編就為大家分享一篇關(guān)于在vue項(xiàng)目中引入highcharts圖表的方法，小編覺得內(nèi)容挺不錯的，現(xiàn)在分享給大家，具有很好的參考價值，需要的朋友一起跟隨小編來看看吧
npm進(jìn)行highchars的導(dǎo)入，導(dǎo)入完成后就可以進(jìn)行highchars的可視化組件開發(fā)了
npm install highcharts --save
1、components目錄下新建一個chart.vue組件
<template>
<div class="chart" id="myChart" >
<div class="emcs_charts" :id="id" ></div>
</div>
</template>
<script>
// 引入highCharts模塊
import HighCharts from 'highcharts'
// 引入這個圖表的外部資源數(shù)據(jù)
import data from '../echarts_data/chart.js'
export default {
data() {
// 將引入的數(shù)據(jù)寫在自己的組件中
let dataObj = data.bar
return{
id: 'chart',
dataObj: dataObj
}
},
mounted() {//鉤子函數(shù)掛載時實(shí)例化這個圖表
// chart(參數(shù)1,參數(shù)2);第一個參數(shù)掛載組件的容器，第二個參數(shù)為圖表所需要的數(shù)據(jù)對象
HighCharts.chart(this.id,this.dataObj)
}
}
</script>
<style scoped lang='stylus'>
.chart{
float left ;
background-color #fff;
padding 10px 0;
margin-top 20px;
border-radius 6px
width 49.5%;
.emcs_charts{
min-width 890px;
height 280px;
}
}
</style>
2、chart組件建好后，開始創(chuàng)建chart-options目錄，里面創(chuàng)建一個chart.js用來存放模擬的chart數(shù)據(jù)
如下圖我寫的一個面積圖的數(shù)據(jù)
module.exports = {
bar: {
chart: {//圖表樣式
type:'area',//指定圖表的類型,這里是面積圖
},
//是否啟用Labels。x，y軸默認(rèn)值都是true，如果想禁用（或不顯示）Labels，設(shè)置該屬性為false即可
credits: {
enabled:false
},
title: {//指定圖表標(biāo)題
text: ' 設(shè)備監(jiān)控',
align: 'left',
style:{
color: '#666',
fontSize:'16px',
}
},
colors: ['rgba(86,199,99,1)','rgba(226,188,37,1)','rgba(255,133,133,1)'],
xAxis: {//圖表的橫坐標(biāo),一個軸為{ }
title:{//橫坐標(biāo)標(biāo)題
text:''
},
//x坐標(biāo)軸的刻度值
categories: ['4:40','4:41','4:42','4:43','4:44', '4:45', '4:46', '4:47', '4:48', '4:49', '4:50','4:51','4:52','4:53','4:54', '4:55', '4:56', '4:57', '4:58', '4:59', '5:00', '5:01', '5:02', '5:03', '5:04', '5:05', '5:06', '5:07', '5:08', '5:09', '5:10', '5:11', '5:12', '5:13', '5:14', '5:15', '5:16', '5:17', '5:18', '5:19', '5:20', '5:21', '5:22', '5:23', '5:24', '5:25', '5:26', '5:27', '5:28', '5:29', '5:30', '5:31', '5:32', '5:33', '5:34', '5:35', '5:36', '5:37', '5:38', '5:39', '5:40'], //指定x軸分組
labels: {//坐標(biāo)軸上的刻度值（顯示間隔、樣式、單位）
style: {
color: '#999999'
},
format:'{value}pm',//刻度值的單位
align: 'center'
},
lineColor: '#dfdfdf',//坐標(biāo)軸的顏色
tickColor: '#dfdfdf',//坐標(biāo)軸上的刻度線的顏色
tickLength: 5,//坐標(biāo)軸上刻度線的長度
gridLineWidth:1,//網(wǎng)格線寬度。x軸默認(rèn)為0，y軸默認(rèn)為1px。
gridLineColor:'#f2f2f2',//網(wǎng)格線顏色。默認(rèn)為：#C0C0C0。
// gridLineDashStyle: 'Dash',//網(wǎng)格線線條樣式。和Css border-style類似，常用的有：Solid、Dot、Dash
tickInterval: 5,//刻度間隔
tickmarkPlacement: 'between',//刻度線對齊方式，有between和on可選，默認(rèn)是between
style: {
color: '#999999',
fontSize:10
},
crosshair:{//鼠標(biāo)放上后顯示縱軸的數(shù)據(jù)
color:'#999',
width:1
}
},
yAxis: [{//圖表的縱坐標(biāo)，多個軸[{軸一},{軸二}]
gridLineWidth: 1,
gridLineColor:'#f2f2f2',
tickPositions: [0, 25, 50, 75, 100],//y軸刻度值
tickLength:0,
title: {//縱坐標(biāo)標(biāo)題
text: ' ',
margin:0,
style: {
color: '#999999',
fontSize:10
}
},
labels:{//坐標(biāo)軸上刻度的樣式及單位
style: {
color: '#999999',
fontSize:10
},
format:'{value}%',//坐標(biāo)軸上的單位
},
offset:-10,//距離坐標(biāo)軸的距離
},{
gridLineWidth: 1,
gridLineColor:'#f2f2f2',
tickColor: '#fff',
tickInterval:25,
tickLength:0,
title: {
text: '',
margin:0,
style: {
color: '#999999',
fontSize:10
}
},
labels:{
style: {
color: '#999999',
fontSize:10
},
format:'{value}℃'
},
opposite:true,//設(shè)置opposite: true表示該軸位置反轉(zhuǎn)，即為y軸時顯示在右側(cè)
offset:-10
}],
tooltip: {//數(shù)據(jù)提示框
headerFormat: '<small>{point.key}</small><br/>',//標(biāo)題格式
pointFormat: '<span style="color:{series.color};">{series.name}</span>：{point.y}<br/>',
shared: true,
followPointer:true,//跟隨鼠標(biāo)
followPointerMove:true,//是否跟隨手指移動
// footerFormat: 'muzi',//尾部格式化字符串
style:{
fontSize:10,
fontFamily:'微軟雅黑',
fontWeight:'normal',
color:'#666'
}
},
//標(biāo)示線總是垂直于它屬于的軸。它可單獨(dú)定義在x軸或y軸，也可以同時定義在x軸和y軸
plotOptions: {
area: {
//pointStart: 1940,
marker: {
enabled: false,
symbol: 'circle',
radius: 2,
states: {
hover: {
enabled: true
}
}
},
fillOpacity:0.2,
lineWidth:1
}
},
legend: {//圖例居中顯示在圖表下方
align: 'center',
symbolRadius:5,//圖標(biāo)圓角
symbolWidth:10,//圖標(biāo)寬度
symbolHeight:10,//圖標(biāo)高度
itemStyle: {
color: '#999999',
fontWeight:'normal',
fontSize:12
},
itemMarginBottom: -14,//圖例項(xiàng)底部外邊距
},
series: [{//數(shù)據(jù)列是一組數(shù)據(jù)集合
name: 'CPU',//name 代表數(shù)據(jù)列的名字，并且會顯示在數(shù)據(jù)提示框（Tooltip）及圖例（Legend）中
data: [
5, 6, 10, 20, 50, 45, 30, 20, 10, 15,
16, 17, 18, 18, 30, 26, 25, 24, 20, 26,
36, 46, 50, 51, 52, 40, 30, 20, 19, 18,
30, 50, 55, 56, 70, 72, 73, 60, 55, 54,
53, 40, 39, 35, 32, 30, 20, 18, 3, 5,
10, 12, 13, 23, 34, 56, 60, 70, 80, 90, 80
],
tooltip: {
valueSuffix:'%'
}
}, {
name: 'RAM',
data:[
16, 17, 18, 18, 30, 26, 25, 24, 20, 26,
36, 46, 50, 51, 52, 40, 30, 20, 19, 18,
30, 50, 55, 56, 70, 72, 73, 60, 55, 54,
53, 40, 39, 35, 32, 30, 20, 18, 3, 5,
10, 12, 13, 23, 34, 56, 60, 70, 80, 90,
5, 6, 10, 20, 50, 45, 30, 20, 10, 15, 20
],
tooltip: {
valueSuffix:'%'
}
}, {
name: '溫度',
data:[
10, 11, 11, 12, 12, 13, 14, 15, 16, 16,
16, 16, 16, 16, 16, 16, 16, 16, 16, 16,
16, 16, 16, 16, 16, 16, 16, 16, 16, 16,
16, 16, 16, 16, 16, 16, 16, 16, 16, 16,
16, 16, 16, 16, 16, 16, 16, 16, 16, 16,
16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16
],
tooltip: {
valueSuffix:'℃'//值的前綴、后綴及小數(shù)點(diǎn)
},
yAxis:1
}]
}
}
3、父組件引用chart.vue子組件
<template>
<div class="charts" id="myChart" >
<x-chart ></x-chart>
</div>
</template>
<script>
// 導(dǎo)入chart.vue子組件
import XChart from './chart.vue'
export default {
components: {
XChart
}
}
</script>
<style scoped lang='stylus'>
</style>
效果如下圖所示
若有不足請多多指教！希望給您帶來幫助！
總結(jié)
以上就是這篇文章的全部內(nèi)容了，希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，謝謝大家對腳本之家的支持。如果你想了解更多相關(guān)內(nèi)容請查看下面相關(guān)鏈接
您可能感興趣的文章:
相關(guān)文章
這篇文章主要給大家介紹了關(guān)于vue路由中前進(jìn)后退的一些事兒，文中通過示例代碼介紹的非常詳細(xì)，對大家學(xué)習(xí)或者使用vue路由具有一定的參考學(xué)習(xí)價值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧2019-05-05
一般我們的前端Vue項(xiàng)目中都會涉及到跨域的問題,下面這篇文章主要給大家介紹了關(guān)于vue項(xiàng)目部署跨域問題的詳細(xì)解決過程,文中通過示例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-05-05
如果在template里使用的是ref類型的數(shù)據(jù),?那么Vue會自動幫我們添加.value，如果在template里使用的是reactive類型的數(shù)據(jù),?那么Vue不會自動幫我們添加.value，這篇文章主要介紹了vue3?中ref和reactive的區(qū)別,需要的朋友可以參考下2022-12-12
vue3+ts+EsLint+Prettier規(guī)范代碼的方法實(shí)現(xiàn)
本文主要介紹在Vue3中使用TypeScript做開發(fā)時，如何安裝與配置EsLint和Prettier，以提高編碼規(guī)范。感興趣的可以了解一下2021-10-10
Vue3+Vite使用雙token實(shí)現(xiàn)無感刷新
本文主要介紹了Vue3+Vite使用雙token實(shí)現(xiàn)無感刷新，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-04-04
通過debug搞清楚.vue文件如何變成.js文件(案例詳解)
這篇文章主要介紹了通過debug搞清楚.vue文件如何變成.js文件,本文以@vitejs/plugin-vue舉例,通過debug的方式帶你一步一步的搞清楚vue文件是如何編譯為js文件的,需要的朋友可以參考下2024-07-07
vue3+vue-cli4中使用svg的方式詳解(親測可用)
最近在做個vue的項(xiàng)目,從各種github上的開源庫上借鑒開發(fā)方法,給大家分享下,這篇文章主要給大家介紹了關(guān)于vue3+vue-cli4中使用svg的相關(guān)資料,需要的朋友可以參考下2022-08-08
vue3+vite+TS中使用element-plus按需引入ElLoading、ElMessage樣式失效解決
在項(xiàng)目中使用elementui確實(shí)是很方便的一件事,下面這篇文章主要給大家介紹了關(guān)于vue3+vite+TS中使用element-plus按需引入ElLoading、ElMessage樣式失效解決的相關(guān)資料,需要的朋友可以參考下2023-02-02
vue-router項(xiàng)目實(shí)戰(zhàn)總結(jié)篇
vue-router 是 Vue.js 官方的路由庫.這篇文章主要介紹了vue-router項(xiàng)目實(shí)戰(zhàn)總結(jié),需要的朋友可以參考下2018-02-02
vue前端實(shí)現(xiàn)login頁登陸驗(yàn)證碼代碼示例
現(xiàn)在我們管理后臺有個需求,就是登錄頁面需要獲取驗(yàn)證碼,用戶可以輸入驗(yàn)證碼后進(jìn)行登錄,這篇文章主要給大家介紹了關(guān)于vue前端實(shí)現(xiàn)login頁登陸驗(yàn)證碼的相關(guān)資料,需要的朋友可以參考下2024-05-05