vue3中，echarts使用（二）——柱状图之滚动条设置dataZoom、基准线-平均值markLine & calc() 函数-用于动态计算长度值

vue3中，echarts使用（二）——柱状图之滚动条设置dataZoom、基准线-平均值markLine & calc() 函数-用于动态计算长度值

效果-柱状图-基准值-滚动条

代码

index.vue

<template> <div class="content"> <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 { ref, onMounted, nextTick } from "vue"; const dataNum = ref([930, 820, 780, 590, 410, 130, 220, 380, 510, 210, 430, 620, 180, 390, 210]); const echartsRef = ref<HTMLElement>(); // 数组的平均值 const avr = (arr: any) => { let sum = 0, avrVal = 0; for (let i = 0; i < arr.length; i++) { sum += arr[i]; } avrVal = sum / arr.length; return avrVal; }; const chartsView = () => { let myChart: echarts.ECharts = echarts.init(echartsRef.value as HTMLElement); let option: echarts.EChartsCoreOption = { // 标题组件，包含主标题和副标题 title: { text: "月度材料费统计", padding: 5, textStyle: { color: "#fff" }, left: 20, top: 10 }, // 提示框组件 鼠标经过 tip提示 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;">${params[0].name}</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>耗电量<div style="font-size:20px;font-weight:bold;color:${params[i].color};margin:0 0px 0 10px;">${params[i].data}</div></div>`; } return ele; } }, // 上下左右及大小-设置图表占总面积的地方 grid: { x: 70, // 距离左侧 y: 60, // 距离上方 x2: 60, // 距离右侧 y2: 40 // 距离下方 }, // grid坐标系的x轴 xAxis: { type: "category", data: [ "1号风机", "2号风机", "3号风机", "4号风机", "5号风机", "12号风机", "21号风机", "32号风机", "45号风机", "52号风机", "121号风机", "212号风机", "322号风机", "415号风机", "152号风机" ], axisLine: { lineStyle: { type: "solid", color: "rgb(64, 94, 134)", width: "1" } }, axisTick: { show: false // 不显示坐标轴刻度线 } }, // grid坐标系的y轴 yAxis: { size: "16px", type: "value", axisLabel: { formatter(value: string | number | any) { if (value > 0) { return value; } return Math.abs(value); } }, splitLine: { //分割线配置 show: true, lineStyle: { color: "rgb(64, 94, 134)", width: 1 } } }, // 区域缩放 dataZoom: [ { // orient: "vertical", //水平显示 show: true, //显示滚动条 height: 1, bottom: 5, startValue: 0, //起始值 endValue: 5, //结束值 showDetail: false } ], // 系列列表。每个系列通过 type 决定自己的图表类型 series: [ { type: "bar", // data: [930, 820, 780, 590, 410], data: dataNum.value, //显示数值 itemStyle: { normal: { color: "#0075FF", barBorderRadius: [6, 6, 0, 0], // 圆角（左上、右上、右下、左下） label: { show: true, //开启显示数值 position: "top", //在上方显示 textStyle: { //数值样式 color: "#fff", //字体颜色 fontSize: 12, //字体大小 distance: 8 // 距离 // formatter: "{c} 平方米" // 这里是数据展示的时候显示的数据 } } } }, showBackground: true, backgroundStyle: { color: "rgba(180, 180, 180, 0.2)" }, //图表标线 markLine: { symbol: ["none", "none"], //去掉箭头 lineStyle: { normal: { type: "dashed", color: "#00FFBB" //基准线颜色 } }, data: [ { yAxis: avr(dataNum.value) } ], label: { show: true, position: "end", // 表现内容展示的位置 // position: "insideStartBottom", color: "#00FFBB", // 基准线文字颜色 normal: { formatter: "平均值" // 这儿设置安全基线 } } } } ] }; useEcharts(myChart, option); }; onMounted(() => { nextTick(() => { chartsView(); }); }); </script> <style scoped lang="scss"> .content { margin-bottom: 8px; background: rgb(0 0 0 / 30%); border-radius: 10px; padding-bottom: 10px; span { font-size: 16px; color: #ffffff; } } .attendance-data { height: calc(100% - 26px); } </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); }); }; 

calc() 函数用于动态计算长度值

#div1 { 
    position: absolute; left: 50px; width: calc(100% - 100px); border: 1px solid black; background-color: yellow; padding: 5px; text-align: center; } 

• 需要注意的是，运算符前后都需要保留一个空格，例如：width: calc(100% - 10px)；
• 任何长度值都可以使用calc()函数进行计算；
• calc()函数支持 “+”, “-”, “*”, “/” 运算；
• calc()函数使用标准的数学运算优先级规则；

版权声明：

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

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