一、需求
- 在Vue3项目中，想用Echarts来绘制堆积柱状图，去展示最近一周APP在不同渠道的登录人数
- 效果如下：
二、实现
(关于Echarts的下载安装以及图表的样式设计，此处不展开！)
1、Templates部分
<template><div class="login"><div class="chart" id="bar"></div></div>
</template>
2、Script部分
（1）总体逻辑
（2）图表数据
图表想要展示的指标是：最近一周APP在不同渠道的登陆人数，包括ios端、android端、网页端
- 使用ref来声明数据：
const dataAll = ref();
- 数据格式如下：
dataAll.value = [{id: 1,option1: "登录人数",data: [[12000, 13200, 10100, 13400, 9000, 23000, 21000],[22000, 18200, 19100, 23400, 29000, 33000, 31000],[22000, 18200, 19100, 23400, 29000, 33000, 31000],],}
];
-
echarts核心代码
- 每个柱子包含三部分的数据，分别是android端的登录人数、ios端的登录人数以及pc端的登录人数；
- 因此series包含三个对象，分别代表三个渠道；
- 每个对象里面是每个渠道最近7天的登录人数
- echarts部分的完整代码：
onMounted(() => {let myChart = $echarts.init(document.getElementById("bar"));myChart.setOption({color: ["#f88c68", "#688CF8", "#68D4F8", "#8C68F8"],// 图表标题title: {text: "APP登录",textStyle: {//文字样式color: "#fff",fontSize: 15,},// 标题位置left: 0,top: 0,},// 网格grid：控制直角坐标系的布局和大小grid: {left: "12%",right: "12%",bottom: "10%",// containLabel: true},// 提示框tooltip: {trigger: "axis",axisPointer: {// 坐标轴指示器，坐标轴触发有效type: "shadow", // 默认为直线，可选为：'line' | 'shadow'},},// 工具栏toolbox: {feature: {saveAsImage: {}, //导出图片},},xAxis: {name: "日期", //x轴名称type: "category",data: ["12-9", "12-10", "12-11", "12-12", "12-13", "12-14", "12-15"],// 去除刻度线axisTick: {alignWithLabel: true,},// 对横轴刻度标签进行处理axisLabel: {//修改坐标系字体颜色// show: true,textStyle: {color: "#fff",},interval: 0,margin: 10,fontSize: "12",},axisLine: {show: false,},},yAxis: {name: "人", //x轴名称type: "value",splitLine: {show: false, //去掉折线图中的横线},// 去除刻度线axisTick: {show: false,},// 对横轴刻度标签进行处理axisLabel: {//修改坐标系字体颜色show: true,textStyle: {color: "#fff",},interval: 0,margin: 10,},},series: [{name: "Android:",type: "bar",stack: "stack",barWidth: "35%",data: data.value[0],},{name: "iOS:",type: "bar",stack: "stack",barWidth: "35%",data: data.value[1],},{name: "Web:",type: "bar",stack: "stack",barWidth: "35%",data: data.value[2],},],});
});
3、效果如下：
