Recently, when working on a project, it involves the effect of putting a histogram and a line chart together in a chart, so here is a brief summary, and friends who need it can refer to it by themselves.
1. Rendering
2. All codes
<template>
<div class="chart" id="participationEchart"></div>
</template>
<script setup lang="ts">
import {
onMounted, inject, watch } from "vue";
const props = defineProps({
xAxisList: {
type: Array,
default: [],
},
participationObj: {
type: Object,
default: {
},
},
isRefres: {
// 用于判断是否刷新页面
type: Boolean,
default: false
}
});
type EChartsOption = echarts.EChartsOption;
const echarts: any = inject("echarts");
let option: EChartsOption;
watch(()=>props.isRefres,()=>{
change();
})
onMounted(() => {
change();
});
const change = () => {
const participationEchart = echarts.init(
document.getElementById("participationEchart")
);
option = {
title: {
// text: "参与情况",
textStyle: {
color: "rgba(0,0,0,0.85)",
fontSize: 14,
fontWeight: 500,
fontFamily: "PingFangSC-Medium, PingFang SC",
},
},
tooltip: {
trigger: "axis",
},
color: ["#33BAA2", "#3BA0FF"], // 设置折线颜色
legend: {
data: ["总参与人数", "平均参与时长"],
right: "2%",
},
grid: {
left: "3%",
right: "1%",
bottom: "0%",
containLabel: true, // 是否居中显示图表
},
xAxis: [
{
type: "category",
axisLabel: {
// interval: 0, // 让横坐标每一项都显示
},
axisTick: {
alignWithLabel: true, // 将刻度显示在中间
},
data: ['2022-01-12','2022-01-13','2022-01-14','2022-01-15','2022-01-16',],
},
],
yAxis: [
{
type: "value",
splitLine: {
show: true,
lineStyle: {
// 设置坐标轴刻度设置为虚线
type: "dashed",
},
},
},
{
type: "value",
splitLine: {
show: true,
lineStyle: {
// 设置坐标轴刻度设置为虚线
type: "dashed",
},
},
},
],
series: [
{
name: "平均参与时长",
type: "bar",
barWidth:32, // 设置柱状图的宽度
data: [233,545,234,123,543]
},
{
name: "总参与人数",
type: "line",
yAxisIndex: 1,
symbol: "circle", //将小圆点改成实心 不写symbol默认空心
symbolSize: 5, //小圆点的大小
data: [123,434,566,321,432]
},
],
};
option && participationEchart.setOption(option);
// 根据页面大小自动响应图表大小
window.addEventListener("resize", function () {
participationEchart.resize();
});
};
</script>
<style scoped>
.chart {
width: 100%;
height: 280px;
}
</style>