vue中引入highcharts的图文详解([vue移动端项目])
生活随笔
收集整理的這篇文章主要介紹了
vue中引入highcharts的图文详解([vue移动端项目])
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
這次給大家?guī)韛ue中引入highcharts的圖文詳解，vue中引入highcharts的注意事項有哪些，下面就是實戰(zhàn)案例，一起來看一下。
npm進行highchars的導(dǎo)入，導(dǎo)入完成后就可以進行highchars的可視化組件開發(fā)了
npm install highcharts --save
登錄后復(fù)制
1、components目錄下新建一個chart.vue組件
<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>
登錄后復(fù)制
2、chart組件建好后，開始創(chuàng)建chart-options目錄，里面創(chuàng)建一個options.js用來存放模擬的chart數(shù)據(jù)，如下圖目錄
如下圖我寫的一個柱狀圖的數(shù)據(jù)
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: [{ //指定數(shù)據(jù)列
name: '小明',
data: [{
y:1000,
color:"red"}, 5000, 4000,5000,2000] //數(shù)據(jù)
}]
}
}
登錄后復(fù)制
3、引用chart組件
<template>
<p id="app">
<x-chart :id="id" :option="option"></x-chart>
</p>
</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>
登錄后復(fù)制
效果如下圖所示
相信看了本文案例你已經(jīng)掌握了方法，更多精彩請關(guān)注風(fēng)君子博客其它相關(guān)文章！
推薦閱讀：
為什么vue2中不能使用axios http請求
vue處理axios時post請求傳參的問題
以上就是vue中引入highcharts的圖文詳解的詳細內(nèi)容，更多請關(guān)注風(fēng)君子博客其它相關(guān)文章！
總結(jié)
以上是生活随笔為你收集整理的vue中引入highcharts的图文详解([vue移动端项目])的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 空间谱专题13：联合解算DOA（ML/A
- 下一篇： feof函数怎么用(C语言常用库函数大全