网站首页 > 技术文章 正文
引入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);
};
猜你喜欢
- 2024-09-10 一个基于vite构建的vue3+pinia+ts+element初始化开箱即用的项目
- 2024-09-10 GitHub一篇《Vue 加载远程组件解决方案》，引起业内大佬点评
- 2024-09-10 页面刷新时vuex数据持久化问题的解决方案:第三方插件完美实现
- 2024-09-10 基于vite + Vue3 + element-plus的前后端分离基础项目搭建
- 2024-09-10 Vue导入模块import xxx from '@/xxx'中的@是什么含义?
- 2024-09-10 终于搞懂了!原来 Vue 3 的 generate 是这样生成 render 函数的
- 2024-09-10 Vue3 + TS 中使用 Provide/Inject 需要考虑的三大问题
- 2024-09-10 关于Vue3的setup attribute标识是否是一个值得使用的语法糖?
- 2024-09-10 聊一聊如何在Vue中使用事件总线( Event Bus)进行组件间通信
- 2024-09-10 vite+vue3实现网页版编辑器，带高亮以及代码提
- 02-21走进git时代， 你该怎么玩?_gits
- 02-21GitHub是什么?它可不仅仅是云中的Git版本控制器
- 02-21Git常用操作总结_git基本用法
- 02-21为什么互联网巨头使用Git而放弃SVN?(含核心命令与原理)
- 02-21Git 高级用法，喜欢就拿去用_git基本用法
- 02-21Git常用命令和Git团队使用规范指南
- 02-21总结几个常用的Git命令的使用方法
- 02-21Git工作原理和常用指令_git原理详解
- 最近发表
- 标签列表
-
- cmd/c (57)
- c++中::是什么意思 (57)
- sqlset (59)
- ps可以打开pdf格式吗 (58)
- phprequire_once (61)
- localstorage.removeitem (74)
- routermode (59)
- vector线程安全吗 (70)
- & (66)
- java (73)
- org.redisson (64)
- log.warn (60)
- cannotinstantiatethetype (62)
- js数组插入 (83)
- resttemplateokhttp (59)
- gormwherein (64)
- linux删除一个文件夹 (65)
- mac安装java (72)
- reader.onload (61)
- outofmemoryerror是什么意思 (64)
- flask文件上传 (63)
- eacces (67)
- 查看mysql是否启动 (70)
- java是值传递还是引用传递 (58)
- 无效的列索引 (74)