vue3中，echarts使用（三）——柱状图之legend图例组件配置 & formatter自定义显示内容 & 封装title组件

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> 

版权声明：

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若内容造成侵权、违法违规、事实不符，请将相关资料发送至xkadmin@xkablog.com进行投诉反馈，一经查实，立即处理！

转载请注明出处，原文链接：https://www.xkablog.com/qdvuejs/10862.html