vue3中,echarts使用(三)——柱状图之legend图例组件配置 & formatter自定义显示内容 & 封装title组件
echarts
·
vue3中,echarts使用(三)——柱状图之legend图例组件配置 & formatter自定义显示内容 & 封装title组件
效果-柱状图-legend
代码
index.vue
<template>
<div class="content">
<titleHeader :title="title" class="header-style" />
<div class="change">
<el-select v-model="value2" multiple collapse-tags placeholder="请添加对比月份" style="width: 172px">
<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
</el-select>
</div>
<div ref="echartsRef" class="attendance-data"></div>
</div>
</template>
<script setup lang="ts" name="absenteeism">
import * as echarts from "echarts";
import { useEcharts } from "@/hooks/useEcharts";
import titleHeader from "@/components/header/titleHeader.vue";
import { ref, onMounted, nextTick } from "vue";
const title = ref("月度物资累计消耗分析");
const value2 = ref([]);
const options = [
{
value: "1",
label: "2022-09"
},
{
value: "2",
label: "2022-08"
},
{
value: "3",
label: "2022-07"
},
{
value: "4",
label: "2022-06"
},
{
value: "5",
label: "2022-05"
}
];
const echartsRef = ref<HTMLElement>();
const chartsView = () => {
let myChart: echarts.ECharts = echarts.init(echartsRef.value as HTMLElement);
let option: echarts.EChartsCoreOption = {
// 提示框组件
tooltip: {
valueFormatter: (value: string) => {
return `${value}%`;
},
// 当trigger为'item'时只会显示该点的数据,为'axis'时显示该列下所有坐标轴所对应的数据。 默认为 'item'
trigger: "axis",
backgroundColor: "rgba(0, 0, 0, 1)",
borderColor: "rgba(0, 0, 0, 1)",
padding: [16, 24],
textStyle: {
color: "#fff"
},
// tip显示的具体内容
formatter: (params: any) => {
// console.log(params); // 打印数据
let ele: string = ``;
ele += `<div style="font-size:16px;margin-bottom:5px;">${params[0].axisValue}</div>`;
for (let i = 0; i < params.length; i++) {
ele += `<div style="display:flex;align-items: center;height:30px;font-size:12px;"><div style="width: 8px;height: 8px;background: ${
params[i].color
};border-radius: 50%;margin-right: 10px;"></div>${
params[i].seriesName
}<div style="font-size:20px;font-weight:bold;color:${params[i].color};margin:0 0px 0 10px;">${
params[i].data[i + 1]
}</div>%</div>`;
}
return ele;
}
},
// 图例组件
legend: {
data: ["2022-10", "2022-09", "2022-08", "2022-07"],
left: 30,
top: 5,
textStyle: {
color: "#ccc",
fontSize: 13
},
itemGap: 26,
formatter: (params: any) => {
console.log("legend", params);
let ele: string = params;
// let ele: string = ``;
// let ele: string = `${params}`;
return ele;
}
},
// // 条形颜色 调色盘颜色列表。如果系列没有设置颜色,则会依次循环从该列表中取颜色作为系列颜色。
color: ["#0075FF", "#ffbb00", "#ff5d5d", "#00f0ff"],
// 绑定数据源
dataset: {
// 用 dimensions 指定了维度的顺序。直角坐标系中,
// 默认把第一个维度映射到 X 轴上,第二个维度映射到 Y 轴上。
// 如果不指定 dimensions,也可以通过指定 series.encode
// 完成映射,参见后文。
source: [
["product", "2022-10", "2022-09", "2022-08", "2022-07"],
["大型材料", 43.3, 85.8, 93.7, 57.2],
["支护用品", 83.1, 73.4, 55.1, 53.7],
["五小电器", 86.4, 65.2, 82.5, 48.6],
["坑木类", 86.4, 65.2, 82.5, 43.9],
["其他", 72.4, 53.9, 39.1, 45.2]
]
},
// grid坐标系的x轴
xAxis: {
type: "category",
axisTick: {
show: false
}
},
// grid坐标系的y轴
yAxis: {
size: "16px",
type: "value",
splitLine: {
//分割线配置
show: true,
lineStyle: {
color: "rgb(64, 94, 134)",
width: 1
}
},
axisLabel: {
formatter(value: string | number | any) {
if (value > 0) {
return value + "%";
}
return Math.abs(value) + "%";
}
}
},
series: [
{
type: "bar",
itemStyle: {
normal: {
barBorderRadius: [10, 10, 0, 0]
}
}
},
{
type: "bar",
itemStyle: {
normal: {
barBorderRadius: [10, 10, 0, 0]
}
}
},
{
type: "bar",
itemStyle: {
normal: {
barBorderRadius: [10, 10, 0, 0]
}
}
},
{
type: "bar",
itemStyle: {
normal: {
barBorderRadius: [10, 10, 0, 0]
}
}
}
]
};
useEcharts(myChart, option);
};
onMounted(() => {
nextTick(() => {
chartsView();
});
});
</script>
<style scoped lang="scss">
.content {
position: relative;
margin-bottom: 8px;
background: rgb(0 0 0 / 30%);
border-radius: 10px;
span {
font-size: 16px;
color: #ffffff;
}
.header-style {
padding-top: 16px;
padding-bottom: 16px;
}
}
.attendance-data {
height: calc(100% - 8px);
overflow-y: auto;
}
.change {
position: absolute;
top: 24px;
right: 26px;
}
:deep(.el-select .el-select__tags .el-tag--info) {
background: rgb(0 0 0 / 30%);
}
</style>
src\hooks\useEcharts.ts
import { onUnmounted } from "vue";
import * as echarts from "echarts";
/**
* @description 使用Echarts(只是为了添加图表响应式)
* @param {Element} myChart Echarts实例(必传)
* @param {Object} options 绘制Echarts的参数(必传)
* @return void
* */
export const useEcharts = (myChart: echarts.ECharts, options: echarts.EChartsCoreOption) => {
if (options && typeof options === "object") {
myChart.setOption(options);
}
const echartsResize = () => {
myChart && myChart.resize();
};
window.addEventListener("resize", echartsResize, false);
onUnmounted(() => {
window.removeEventListener("resize", echartsResize);
});
};
title组件
src\components\header\titleHeader.vue
<template>
<div class="header-container">
<div class="title-img">
<!-- title文字 -->
<span>{{ props.title }}</span>
<!-- title单选 -->
<slot name="right"></slot>
<!-- title图片 -->
<img @click="isDialog" class="header" :src="props.src" v-show="props.src != ''" />
</div>
<div class="mark">
<slot name="mark" />
</div>
</div>
</template>
<script lang="ts" setup>
const props = defineProps({
src: {
type: String,
required: false,
default: ""
},
title: {
type: String,
required: true,
default: ""
}
});
// 展示弹框
const emit = defineEmits(["is-dialog"]);
const isDialog = () => {
emit("is-dialog", "");
};
</script>
<style lang="scss" scoped>
.header-container {
padding: 24px 24px 6px;
.title-img {
display: flex;
font-family: "PingFang SC";
font-size: 22px;
color: rgb(255 255 255 / 100%);
align-items: center;
> span {
margin-right: auto;
}
> img {
cursor: pointer;
margin-left: 24px;
height: 20px;
}
}
}
</style>
更多推荐
已为社区贡献72条内容
所有评论(0)