<template>
<div class="chart" id="main" ref="chart">
</div>
</template>
<script>
import { getRecordHistogram } from '@/api/user'
import * as echarts from 'echarts';
export default {
// 堆叠柱状图
name: 'pileBar',
data() {
return {
xAxisData:[{
type : 'category',
data : ["4月1号","4月2号","4月3号","4月4号","4月5号"]
}],
seriesData:[
{
name:'人员进入记录',
type:'bar',
barWidth : 20,
data:[320, 332, 301, 334, 390]
},
{
name:'人员外出记录',
type:'bar',
barWidth : 20,
data:[862, 1018, 964, 1026, 1679],
},
{
name:'设备报警记录',
type:'bar',
barWidth : 20,
data:[120, 132, 101, 134, 290]
}
],
option: {
tooltip : {
trigger: 'axis',
axisPointer : {
type : 'shadow'
}
},
legend:{
data: ["份数"],
textStyle: {
// 图例文字的样式
color: "#fff",
fontSize: 12,
padding: [2, 0, 0, 2],
fontFamily: "微软雅黑",
fontWeight: "normal",
}
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis:[{
type : 'category',
data : [] , ///底部列表
axisTick:{ //y轴刻度线
show:false
},
axisLine: { // 控制x轴线的样式
lineStyle: {
type: 'solid',
color: '#2EA0FB',
width:'1'
}
},
axisLine: { //这是x轴文字颜色
lineStyle: {
color: "#CAD0F2",
}
},
axisLabel: { //修改x轴底部文字颜色
fontSize: 14,
interval:0,
rotate:20,//修改x轴指标展现的倾斜度
textStyle: {
color: "#82b0ec",
}
}
}],
yAxis : [
{
type : 'value',
axisTick:{ //y轴刻度线
show:false
},
splitLine: { //网格线
lineStyle:{
type:'dashed', //设置网格线类型 dotted:虚线 solid:实线
// 使用深浅的间隔色
color: '#6CBEFF',
opacity: 0.1
},
show:true //隐藏或显示
},
axisLine: {//这是y轴文字颜色
lineStyle: {
color: "#CAD0F2",
},
show:false , //隐藏Y轴刻度线
}
}
],
series:[
{
name:'人员进入记录',
type:'bar',
barWidth : 20,
itemStyle:{
normal: {
color: new echarts.graphic.LinearGradient(
0, 0, 0, 1,
[
{ offset: 0, color: '#BEFFE0' }, //柱图渐变色
{ offset: 1, color: '#00AE4E' }, //柱图渐变色
]
),
barBorderRadius: 10,
}
},
label:{
normal:{
show:true,
position:'inside',//内部数字
textStyle:{
color:'#FFFFFF',
fontSize:'12px'
},
formatter:function(params){
return params.value ? params.value : ''
}
}
},
data:[],
},
{
name:'人员外出记录',
type:'bar',
barWidth : 20,
itemStyle:{
normal: {
color: new echarts.graphic.LinearGradient(
0, 0, 0, 1,
[
{ offset: 0, color: '#B9E2FF' }, //柱图渐变色
{ offset: 1, color: '#006EEA' }, //柱图渐变色
]
),
barBorderRadius: 10
}
},
label:{
normal:{
show:true,
position:'inside', //内部数字
textStyle:{
color:'#FFFFFF',
fontSize:'12px'
},
formatter:function(params){
return params.value ? params.value : ''
}
}
},
data:[],
},
{
name:'设备报警记录',
type:'bar',
barWidth : 20,
itemStyle:{
normal: {
color: new echarts.graphic.LinearGradient(
0, 0, 0, 1,
[
{ offset: 0, color: '#AA1313' }, //柱图渐变色
{ offset: 1, color: '#FF5050' }, //柱图渐变色
]
),
barBorderRadius: 10
}
},
label:{
normal:{
show:true,
position:'inside', //内部数字
textStyle:{
color:'#FFFFFF',
fontSize:'12px'
},
formatter:function(params){
return params.value ? params.value : ''
}
}
},
data:[],
}
] , // 信息数据列表
}
};
},
created(){
},
mounted() {
window.onresize = () => {
this.reset()
}
let chart = echarts.init(this.$refs.chart);
chart.setOption(this.option);
this.getDataList()
},
methods:{
reset(){
// 基于准备好的dom,初始化echarts实例
let chart = echarts.init(this.$refs.chart);
chart.resize();;
},
//获取统计列表
getDataList(){
getRecordHistogram({}).then(resp => {
let chart = echarts.init(this.$refs.chart);
this.option.xAxis[0].data = resp.data.date // 底部列表
//直接写死
this.option.series[0].data = resp.data.entry || []
this.option.series[1].data = resp.data.exist || []
this.option.series[2].data = resp.data.police || []
console.log('this.option',this.option)
chart.setOption(this.option);
}).catch(err => {
console.log('err',err)
});
}
},
beforeDestroy() {
}
};
</script>
<style lang="scss" scoped>
.chart {
width: 100%;
height: 100%;
}
</style>
图例文字样式: