vue3中，echarts在柱形图上加基准线，自定义tooltip
效果图
代码
index.vue
<template> <div class="content"> <!-- <titleHeader :src="img" :title="title" @is-dialog="handleEvery" class="header-style" /> <div ref="echartsRef" class="attendance-data"></div> <!-- 二级页面 --> <everyday-material :is-show="showEveryday" @is-close="handleCloseEveryday"></everyday-material> </div> </template> <script setup lang="ts" name="absenteeism"> import * as echarts from "echarts"; import { useEcharts } from "@/hooks/useEcharts"; import img from "@/assets/svg/more.svg"; import titleHeader from "@/components//header/titleHeader.vue"; import everydayMaterial from "./modules/everydayMaterial.vue"; import { ref, onMounted, nextTick } from "vue"; const title = ref("模块题目名称"); const echartsRef = ref<HTMLElement>(); // 二级页面 const showEveryday = ref(false); const handleCloseEveryday = () => { showEveryday.value = false; }; const handleEvery = () => { showEveryday.value = true; }; const chartsView = () => { let myChart: echarts.ECharts = echarts.init(echartsRef.value as HTMLElement); let option: echarts.EChartsCoreOption = { title: { text: "达成率", left: 20, top: 10, textStyle: { color: "#ccc", fontSize: 16 } }, tooltip: { trigger: "axis", backgroundColor: "rgba(0, 0, 0, 1)", borderColor: "rgba(0, 0, 0, 1)", padding: [16, 24], textStyle: { color: "#fff" }, // 改造弹框 formatter: (params: any) => { // console.log(params); // 打印数据 let ele: string = ``; ele += `<div style="font-size:16px;margin-bottom:5px;">达成率</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].name}<div style="font-size:20px;font-weight:bold;color:${params[i].color};margin:0 0px 0 10px;">${params[i].data}</div> %</div>`; } return ele; } }, xAxis: { type: "category", data: ["大型材料", "支护用品", "五小电器", "坑木类", "其他"] }, yAxis: { size: "16px", type: "value", axisLabel: { formatter(value: string | number | any) { if (value > 0) { return value + "%"; } return Math.abs(value) + "%"; } } }, series: [ { type: "bar", data: [80, 65, 80, 90, 110], // data: [80, 65, 80, 90, 110].map(item => { // if (item > 80) { // return { // value: item, // itemStyle: { // color: "#F33" // } // }; // } // return item; // }), itemStyle: { normal: { color: "#0075FF", barBorderRadius: [10, 10, 0, 0] } }, showBackground: true, backgroundStyle: { color: "rgba(180, 180, 180, 0.2)" }, markLine: { symbol: ["none", "none"], //去掉箭头 lineStyle: { normal: { type: "dashed", color: "#00FFBB" //基准线颜色 } }, data: [ { name: "基准线名称", yAxis: 45 // 基准线数据 } ], label: { show: true, // position: "insideStartBottom", color: "#00FFBB" // 基准线文字颜色 } } } ] }; useEcharts(myChart, option); }; onMounted(() => { nextTick(() => { chartsView(); }); }); </script> <style scoped lang="scss"> .content { 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% - 54px); overflow-y: auto; } </style> 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/10858.html