Vue.js中如何实现堆叠柱状图的可视化
发表时间: 2024-06-04 15:40
堆叠柱状图
堆叠柱状图
堆叠柱状图
引入reactive, onMounted, ref, watch, nextTick, onActivated, markRaw和'echarts'
import { reactive, onMounted, ref, watch, nextTick, onActivated, markRaw } from 'vue';
import * as echarts from 'echarts';
前端页面注入图表
<el-col :span="24" :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20" style="border: solid 1px red;">
<div style="height: 300px;" ref="barMapRef">
</div>
</el-col>
数据源
const state = reactive({
mapBar:{
generalData:['320', '882', '301', '334', '390', '330', '620'],
moreData:[320, 132, 101, 134, 90, 230, 210],
seriousData:[220, 182, 191, 234, 290, 330, 310],
especiallyseriousData:[150, 232, 201, 154, 190, 330, 410],
recgeneralData:[320, 332, 301, 334, 390, 330, 620],
recmoreData:[220, 182, 191, 234, 290, 330, 310],
recseriousData:[150, 232, 201, 154, 190, 330, 510],
recespeciallyseriousData:[120, 132, 101, 134, 290, 230, 220],
xAxis:['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
global: {
homeChartOne: null,
homeChartTwo: null,
homeCharThree: null,
dispose: [null, '', undefined],
} as any,
myCharts: [] as EmptyArrayType,
charts: {
theme: '',
bgColor: '',
color: '#303133',
},
})
柱状图方法引用
onMounted(async () => {
initBarMap();
});
堆叠柱状图代码
// 堆叠柱状图
const initBarMap = () => {
if (!state.global.dispose.some((b: any) => b === state.global.homeChartTwo)) state.global.homeChartTwo.dispose();
state.global.homeChartTwo = markRaw(echarts.init(barMapRef.value, state.charts.theme));
const option = {
// tooltip: {
// trigger: 'axis',
// axisPointer: {
// type: 'shadow'
// }
// },
tooltip: {
position: 'top',
axisPointer: {
type: 'cross'
},// 标注线
// trigger:'axis',
trigger: 'item',
formatter: '{b}<br/>{c}' // 提示框文本格式器，{b}表示系列名，{c}表示数据值
},
legend: {},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
title: {
text: '', // 主标题文本
//subtext: '副标题', // 副标题文本
left: 'center' // 标题水平位置
},
xAxis:{
type: 'category',
data: state.mapBar.xAxis
},
yAxis: {
type: 'value'
},
series: [
{
name: 'general',
type: 'bar',
stack: 'general',// 想同的stack 堆叠在一起
emphasis: {
focus: 'series'
},
// markLine: {// 标记线，最低到最高
// lineStyle: {
// type: 'dashed'
// },
// data: [[{ type: 'min' }, { type: 'max' }]]
// },
data: state.mapBar.generalData, // 数据源
label: {
normal: {
show: true, // 显示标签
//position: 'top', // 标签位置
// 使用字符串模板设置标签格式
//formatter: '{b}<br/>{c}', // {c} 代表数据值
formatter: function (params) {
// params 是一个包含当前数据信息的对象
var data = params.data;
return (
params.name+'\n'+data
);
},
// textStyle: {
// color: 'black' // 文本颜色
// }
}
},
},
{
name: 'recgeneral',
type: 'bar',
stack: 'general',// 想同的stack 堆叠在一起
emphasis: {
focus: 'series'
},
markLine: {// 标记线，最低到最高
lineStyle: {
type: 'dashed'
},
data: [[{ type: 'min' }, { type: 'max' }]]
},
data: state.mapBar.recgeneralData,// 数据源
label: {
normal: {
show: true, // 显示标签
//position: 'top', // 标签位置
// 使用字符串模板设置标签格式
//formatter: '{b}<br/>{c}', // {c} 代表数据值
formatter: function (params) {
// params 是一个包含当前数据信息的对象
var data = params.data;
return (
params.name+'\n'+data
);
},
// textStyle: {
// color: 'black' // 文本颜色
// }
}
},
},
{
name: 'more',
type: 'bar',
stack: 'more',// 想同的stack 堆叠在一起
emphasis: {
focus: 'series'
},
// markLine: {// 标记线，最低到最高
// lineStyle: {
// type: 'dashed'
// },
// data: [[{ type: 'min' }, { type: 'max' }]]
// },
data: state.mapBar.moreData,// 数据源
label: {
normal: {
show: true, // 显示标签
//position: 'top', // 标签位置
// 使用字符串模板设置标签格式
//formatter: '{b}<br/>{c}', // {c} 代表数据值
formatter: function (params) {
// params 是一个包含当前数据信息的对象
var data = params.data;
return (
params.name+'\n'+data
);
},
// textStyle: {
// color: 'black' // 文本颜色
// }
}
},
},
{
name: 'recmore',
type: 'bar',
stack: 'more',// 想同的stack 堆叠在一起
emphasis: {
focus: 'series'
},
// markLine: {// 标记线，最低到最高
// lineStyle: {
// type: 'dashed'
// },
// data: [[{ type: 'min' }, { type: 'max' }]]
// },
data: state.mapBar.recmoreData,// 数据源
label: {
normal: {
show: true, // 显示标签
//position: 'top', // 标签位置
// 使用字符串模板设置标签格式
//formatter: '{b}<br/>{c}', // {c} 代表数据值
formatter: function (params) {
// params 是一个包含当前数据信息的对象
var data = params.data;
return (
params.name+'\n'+data
);
},
// textStyle: {
// color: 'black' // 文本颜色
// }
}
},
},
{
name: 'serious',
type: 'bar',
stack: 'serious',// 想同的stack 堆叠在一起
emphasis: {
focus: 'series'
},
// markLine: {// 标记线，最低到最高
// lineStyle: {
// type: 'dashed'
// },
// data: [[{ type: 'min' }, { type: 'max' }]]
// },
data: state.mapBar.seriousData,// 数据源
label: {
normal: {
show: true, // 显示标签
//position: 'top', // 标签位置
// 使用字符串模板设置标签格式
//formatter: '{b}<br/>{c}', // {c} 代表数据值
formatter: function (params) {
// params 是一个包含当前数据信息的对象
var data = params.data;
return (
params.name+'\n'+data
);
},
// textStyle: {
// color: 'black' // 文本颜色
// }
}
},
},
{
name: 'recserious',
type: 'bar',
stack: 'serious',// 想同的stack 堆叠在一起
emphasis: {
focus: 'series'
},
// markLine: {// 标记线，最低到最高
// lineStyle: {
// type: 'dashed'
// },
// data: [[{ type: 'min' }, { type: 'max' }]]
// },
data: state.mapBar.recseriousData,// 数据源
label: {
normal: {
show: true, // 显示标签
//position: 'top', // 标签位置
// 使用字符串模板设置标签格式
//formatter: '{b}<br/>{c}', // {c} 代表数据值
formatter: function (params) {
// params 是一个包含当前数据信息的对象
var data = params.data;
return (
params.name+'\n'+data
);
},
// textStyle: {
// color: 'black' // 文本颜色
// }
}
},
},
{
name: 'especiallyserious',
type: 'bar',
stack: 'especiallyserious',// 想同的stack 堆叠在一起
emphasis: {
focus: 'series'
},
markLine: { // 标记线，最低到最高
lineStyle: {
type: 'dashed'
},
data: [[{ type: 'min' }, { type: 'max' }]]
},
data: state.mapBar.especiallyseriousData,// 数据源
label: {
normal: {
show: true, // 显示标签
//position: 'top', // 标签位置
// 使用字符串模板设置标签格式
//formatter: '{b}<br/>{c}', // {c} 代表数据值
formatter: function (params) {
// params 是一个包含当前数据信息的对象
var data = params.data;
return (
params.name+'\n'+data
);
},
// textStyle: {
// color: 'black' // 文本颜色
// }
}
},
},
{
name: 'recespeciallyserious',
type: 'bar',
stack: 'especiallyserious',// 想同的stack 堆叠在一起
emphasis: {
focus: 'series'
},
// markLine: { // 标记线，最低到最高
// lineStyle: {
// type: 'dashed'
// },
// data: [[{ type: 'min' }, { type: 'max' }]]
// },
data: state.mapBar.recespeciallyseriousData,// 数据源
label: {
normal: {
show: true, // 显示标签
//position: 'top', // 标签位置
// 使用字符串模板设置标签格式
//formatter: '{b}<br/>{c}', // {c} 代表数据值
formatter: function (params) {
// params 是一个包含当前数据信息的对象
var data = params.data;
return (
params.name+'\n'+data
);
},
// textStyle: {
// color: 'black' // 文本颜色
// }
}
},
},
]
};
state.global.homeChartTwo.setOption(option);
state.myCharts.push(state.global.homeChartTwo);
};
鲁公网安备37020202000738号