vue3中,echarts使用(二)——柱状图之滚动条设置dataZoom、基准线-平均值markLine & calc() 函数–用于动态计算长度值
<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>
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()函数使用标准的数学运算优先级规则;
原文地址:https://blog.csdn.net/weixin_44867717/article/details/128229248
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如若转载,请注明出处:http://www.7code.cn/show_27706.html
如若内容造成侵权/违法违规/事实不符,请联系代码007邮箱:suwngjj01@126.com进行投诉反馈,一经查实,立即删除!
声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。