vue调用 Highcharts 实现多个数据可视化展示
希望可以帮到你：欢迎关注，谢谢。
1.创建一个options.js文件，下载Highcharts包 ：npm intall Highcharts --sva: 代码如下：
export const option1 = {
bar: {
title: {
text: '珠海猪场' // 指定图表标题
},
chart: {
backgroundColor: 'black',
type: 'bar'
},
plotOptions: {
line: {
dataLabels: {
// 开启数据标签
enabled: true
},
// 关闭鼠标跟踪，对应的提示框、点击事件会失效
enableMouseTracking: false
}
},
colors: ['#058DC7', '#50B432', '#ED561B', '#DDDF00', '#24CBE5', '#50B432', '#ED561B', '#DDDF00', '#24CBE5'],
xAxis: {
categories: ['今日已入场', '屠宰进度', '已交易单次', '分切进度', '已交易数量', '冷链车', '已交易额', '生产效率比', '已缴费'] // 指定x轴分组
},
series: [{
data: [50, 235, 809, 947, 50, 235, 809, 947, 420]
}]
}
}
export const option2 = {
bar: {
chart: {
backgroundColor: 'black',
type: 'column'// 指定图表的类型，默认是折线图（line）
},
credits: {
enabled: false
},
title: {
text: '珠海猪场' // 指定图表标题
},
colors: ['#058DC7', '#50B432', '#ED561B', '#DDDF00', '#24CBE5', '#50B432', '#ED561B', '#DDDF00', '#24CBE5'],
xAxis: {
categories: ['今日已入场', '屠宰进度', '已交易单次', '分切进度', '已交易数量', '冷链车', '已交易额', '生产效率比', '已缴费'] // 指定x轴分组
},
yAxis: {
title: {
text: '最近七天' // 指定y轴的标题
}
},
plotOptions: {
column: {
colorByPoint: true
}
},
series: [
{ // 指定数据列
name: '珠海猪场信息',
data: [
{
y: 1000,
color: 'red'
}, 5000, 4000, 5000, 2000, 5000, 4000, 5000, 2000] // 数据
}
]
}
}
export const option3 = {// id => 类似<div id="HighChartid"></div>
chart: {
backgroundColor: 'black',
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false
},
title: {
text: ''
},
tooltip: {
pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
},
credits: {
enabled: false
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: true,
format: '{point.percentage:.1f} %',
style: {
color: 'black' // (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
}
},
colors: [
'#21c393', // 不合格
'#4879df', // 合格
'#fad567', // 良好
'#f44a36' // 优秀
]
}
},
series: [{
type: 'pie',
name: '售数量',
data: [{
name: ' 今日已入场',
y: 61.41,
sliced: true,
selected: true
}, {
name: ' 屠宰进度',
y: 11.84
}, {
name: '已交易单次',
y: 10.85
}, {
name: '分切进度',
y: 4.67
}, {
name: '已交易数量',
y: 4.18
}, {
name: '冷链车',
y: 1.64
}, {
name: '已交易额',
y: 1.6
}, {
name: '生产效率比',
y: 1.2
}, {
name: '已缴费',
y: 2.61
}] // 为要处理的格式，对应官网api的格式填写即可
}]
}
export const option4 = {
chart: {
backgroundColor: 'black',
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false,
type: 'pie'
},
title: {
text: ' 珠海猪场大数据'
},
tooltip: {
pointFormat: '{series.name} : <b>{point.percentage:.1f}%</b>'
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: false
},
showInLegend: true
}
},
series: [{
name: '销售量',
colorByPoint: true,
data: [{
name: '屠宰进度',
y: 61.41,
sliced: true,
selected: true
}, {
name: '已交易单次',
y: 11.84
}, {
name: '分切进度',
y: 10.85
}, {
name: '已交易数量',
y: 4.67
}, {
name: '冷链车',
y: 4.18
}, {
name: '已交易额',
y: 7.05
}, {
name: '生产效率比',
y: 7.05
}, {
name: '已缴费',
y: 7.05
}]
}]
}
export const option5 = {
chart: {
backgroundColor: 'black',
type: 'line'
},
title: {
text: '次日销售'
},
subtitle: {
text: ' 珠海猪场销售数据'
},
xAxis: {
categories: ['一日', '二日', '三日', '四日', '五日', '六日', '七日', '八日', '九日', '十日', '十一日', '十二日', '十三日', '十四日', '十五日', '十六日', '十七日', '十八日', '十九日', '二十日', '二十一日', '二十二日', '二十三日', '二十三日', '二十四日', '二十五日', '二十六日', '二十一七日', '二十八日', '二十九日', '三十日']
},
yAxis: {
title: {
text: '销售 (数量)'
}
},
plotOptions: {
line: {
dataLabels: {
// 开启数据标签
enabled: true
}
// 关闭鼠标跟踪，对应的提示框、点击事件会失效
}
},
series: [{
name: '今日已入场',
data: [7.0, 6.9, 9.5, 14.5, 18.4, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6, 7.0, 6.9, 9.5, 14.5, 18.4, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6, 7.0, 6.9, 9.5, 14.5, 18.4, 21.5, 25.2]
}, {
name: '屠宰进度',
data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8, 3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8, 3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0]
}, {
name: '已交易单次',
data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8, 3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8, 3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0]
}, {
name: '分切进度',
data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8, 3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8, 3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0]
}, {
name: '已交易数量',
data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8, 3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8, 3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0]
}, {
name: '冷链车',
data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8, 3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8, 3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0]
}, {
name: '已交易额',
data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8, 3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8, 3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0]
}, {
name: '生产效率比',
data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8, 3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8, 3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0]
}, {
name: '已缴费',
data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8, 3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8, 3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0]
}]
}
export const option6 = {
chart: {
backgroundColor: 'black',
type: 'column'
},
title: {
text: '分公司效率优化嵌套图'
},
xAxis: {
categories: [
'杭州总部',
'上海分部',
'北京分部'
]
},
yAxis: [{
min: 0,
title: {
text: '雇员'
}
}, {
title: {
text: '利润 (millions)'
},
opposite: true
}],
legend: {
shadow: false
},
tooltip: {
shared: true
},
plotOptions: {
column: {
grouping: false,
shadow: false,
borderWidth: 0
}
},
series: [{
name: '今日已入场',
color: 'rgba(165,170,217,1)',
data: [183.6, 178.8, 198.5],
tooltip: { // 为当前数据列指定特定的 tooltip 选项
// valuePrefix: '$',
valueSuffix: ' 次'
},
pointPadding: 0.3,
pointPlacement: 0.2,
yAxis: 1 // 指定数据列所在的 yAxis
}, {
name: '屠宰进度',
color: 'rgba(126,86,134,.9)',
data: [183.6, 178.8, 198.5],
tooltip: { // 为当前数据列指定特定的 tooltip 选项
// valuePrefix: '$',
valueSuffix: ' 头'
},
pointPadding: 0.3,
pointPlacement: 0.2,
yAxis: 1 // 指定数据列所在的 yAxis
}, {
name: '已交易单次',
color: ' rosybrown',
data: [183.6, 178.8, 198.5],
tooltip: { // 为当前数据列指定特定的 tooltip 选项
// valuePrefix: '$',
valueSuffix: ' 次'
},
pointPadding: 0.3,
pointPlacement: 0.2,
yAxis: 1 // 指定数据列所在的 yAxis
}, {
name: '分切进度',
color: 'rgba(186,60,61,.9)',
data: [203.6, 198.8, 208.5],
tooltip: {
valuePrefix: '$',
valueSuffix: ' 个'
},
pointPadding: 0.4,
pointPlacement: 0.2,
yAxis: 1
}, {
name: '已交易数量',
color: 'rgba(248,11,63,1)',
data: [153.6, 138.8, 102.5],
tooltip: { // 为当前数据列指定特定的 tooltip 选项
valuePrefix: '$',
valueSuffix: ' 个'
},
pointPadding: 0.3,
pointPlacement: 0.2,
yAxis: 1 // 指定数据列所在的 yAxis
}, {
name: '冷链车',
color: ' cadetblue',
data: [163.6, 138.8, 198.5],
tooltip: { // 为当前数据列指定特定的 tooltip 选项
// valuePrefix: '$',
valueSuffix: ' 辆'
},
pointPadding: 0.3,
pointPlacement: 0.2,
yAxis: 1 // 指定数据列所在的 yAxis
}, {
name: '已交易额',
color: 'rgba(28,161,3,1)',
data: [103.6, 138.8, 118.5],
tooltip: { // 为当前数据列指定特定的 tooltip 选项
valuePrefix: '$',
valueSuffix: ' 元'
},
pointPadding: 0.3,
pointPlacement: 0.2,
yAxis: 1 // 指定数据列所在的 yAxis
}, {
name: '生产效率比',
color: 'rgba(28,11,63,133)',
data: [153.6, 158.8, 108.5],
tooltip: { // 为当前数据列指定特定的 tooltip 选项
// valuePrefix: '',
valueSuffix: ' %'
},
pointPadding: 0.3,
pointPlacement: 0.2,
yAxis: 1 // 指定数据列所在的 yAxis
}, {
name: '已缴费',
color: ' #FFCC66',
data: [113.6, 118.8, 108.5],
tooltip: { // 为当前数据列指定特定的 tooltip 选项
valuePrefix: '$',
valueSuffix: ' 元'
},
pointPadding: 0.3,
pointPlacement: 0.2,
yAxis: 1 // 指定数据列所在的 yAxis
}]
}
2.创建一个vue的文件
，一个是路径指名
App.vue文件： 代码如下
<template>
<div style="backgroundColor: black;">
<div>
<div style="width: 40%; float: left">
<el-card class="box-card" style="margin: 50px; backgroundColor: black; color: PaleTurquoise;">
<div slot="header" class="clearfix">
<span style="font-size: 36px; color: PowderBlue; ">珠海猪场数据展视 <span>{{ now | dateformat('YYYY-MM-DD HH:mm:ss') }}</span></span>
<el-button style="float: right; padding: 3px 0" type="text"></el-button>
</div>
<div style="font-size: 26px; color: LightGoldenrodYellow;">
<p>今日已入场 :<span id=""> 1000</span></p>
<p>已交易单次 :<span id=""> 600</span></p>
<p>已交易数量 :<span id=""> 500</span></p>
<p>生产效率比 :<span id=""> 50%</span></p>
<p>分 切 进 度 :<span id=""> 30%</span></p>
<p>屠 宰 进 度 :<span id=""> 50%</span></p>
<p>已 交 易 额 :<span id=""> 60%</span></p>
<p>冷 链 车 :<span class=1000> 1000辆</span></p>
<p>已 激 费 :<span></span> 10000元</p>
</div>
</el-card>
</div>
<div style="widht:60%; float: right;">
<div>
<x-chart :id="test2" :option="option2" class="aa"></x-chart>
<x-chart :id="test6" :option="option6" class="bb"></x-chart>
</div>
<div style="clear: both"></div>
<div style="margin-top:80px;">
<!-- <x-chart :id="test3" :option="option3" class="cc"></x-chart> -->
<x-chart :id="test4" :option="option4" class="dd"></x-chart>
<x-chart :id="test1" ref="option1" :option="option1" class="ee"></x-chart>
</div>
<div style="clear: both;"></div>
</div>
</div>
<div style="clear: both;"></div>
<div style="margin-top:90px;">
<x-chart :id="test5" :option="option5" class="ff"></x-chart>
</div>
</div>
</template>
<script>
// 导入chart组件
import XChart from './chart.vue'
// 导入chart组件模拟数据
import { option1, option2, option3, option4, option5, option6 } from '@/chart-options/options'
import moment from 'moment'
export default {
name: 'app',
data() {
return {
test1: 'test1',
test2: 'test2',
test3: 'test3',
test4: 'test4',
test5: 'test5',
test6: 'test6',
option1: option1.bar,
option2: option2.bar,
option3: option3,
option4: option4,
option5: option5,
option6: option6,
now: moment()
}
},
components: {
XChart
},
filters: {
dateformat(dataStr, pattern = 'YYYY-MM-DD HH:mm:ss') {
return moment(dataStr).format(pattern)
}
},
created() {
this.option1.series[0].data[0]
console.log(this.$refs.option1)
},
mounted() {
setInterval(() => {
this.now = moment()
}, 1000)
},
methods: {
}
}
</script>
<style>
.aa, .bb, .dd, .ee {
width: 500px;
height: 300px;
float: right;
margin-left: 90px;
}
</style>
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
}
},
data() {
return {
chart: null
}
},
mounted() {
this.chart = HighCharts.chart(this.id, this.option)
}
}
</script>
4.实现的效果如下：
欢迎你的观看，一起学习代码。
