样式
custom.png
需求
1.导弹、飞机、无人机等 一个图表中展示多个实体
2.每个实体有有效干扰时间段、无效干扰时间段
3.根据数据，在图表显示时间段
例子
图表样式在父组件中
xAxis要有时间的最大、最小值 要不然不准确
type :time
x轴的label显示：自定义 要不然不准
//父组件
<div >
//子组件
<custom :name='filter'></custom>
</div>
<template>
<div id="multiple-y5" class="multiple-y1"></div>
</template>
<script>
let myChart = null;
export default {
props: {
barData: {
type: Array,
},
name: {
type: String,
},
},
watch: {
name: {
handler: async function (newVal, oldVal) {
/// let { data } = await this.$api.getData(newVal);
//监听从父组件传来的值 虽然mounted加载过一次 但是当此函数走的时候，数据可能还没有 所以来监听
this.drawgraph(data);
},
deep: true,
immediate: true,
},
},
data() {
return {
option: {
tooltip: {
//parmas 与data一一对应
formatter: function (params) {
return (
'<span style="color:rgb(43, 159, 226)">' +
params.name +
"</span>" +
"</br>" +
'<span style="color:#99CCFF">开始时间：</span>' +
params.value[1] +
'</br><span style="color:#99CCFF">结束时间：</span>' +
params.value[2] +
'</br><span style="color:#99CCFF">时间间隔：</span>' +
params.value[3] +
"H"
);
},
},
title: {
text: "干扰时间段",
textStyle: {
//主标题文本样式{"fontSize": 18,"fontWeight": "bolder","color": "#333"}
fontStyle: "normal",
fontWeight: "normal",
color: "rgba(43, 159, 226,.8)",
},
},
dataZoom: [
{
type: "slider",
filterMode: "weakFilter",
showDataShadow: false,
top: 400,
labelFormatter: "",
},
{
type: "inside",
filterMode: "weakFilter",
},
],
xAxis: {
scale: true,
type: "time",
// interval: 4 * 3600 * 1000, //以一个小时递增
// min:0, //将data里最小时间的整点时间设为min,否则min会以data里面的min为开始进行整点递增
axisLabel: {
textStyle: {
fontSize: 12,
color: "#fff",
},
interval: 0,
rotate: 30, //旋转角度，为0表示水平
margin: 8,
},
},
yAxis: {
data: [],
axisLabel: {
interval: 0,
rotate: 30, //旋转角度，为0表示水平
margin: 8,
textStyle: {
fontSize: 10,
color: "#fff",
},
},
},
series: [
{
type: "custom",
renderItem: this.renderItem,
itemStyle: {
opacity: 0.8,
},
encode: {
x: [1, 2],
y: 0,
},
data: [],
},
],
},
};
},
// components: {bar2Chart},
methods: {
renderItem(params, api) {
var categoryIndex = api.value(0);
var start = api.coord([api.value(1), categoryIndex]);
var end = api.coord([api.value(2), categoryIndex]);
var height = api.size([0, 1])[1] * 0.6;
//2个矩形 相裁的结果
var rectShape = this.$echarts.graphic.clipRectByRect(
{
x: start[0],
y: start[1] - height / 2,
width: end[0] - start[0],
height: height,
},
{
x: params.coordSys.x,
y: params.coordSys.y,
width: params.coordSys.width,
height: params.coordSys.height,
}
);
return (
rectShape && {
type: "rect",
transition: ["shape"],
shape: rectShape,
style: api.style(),
}
);
},
drawgraph(r) {
// 绘制图表
let data = [],
minList = [],
minNum = 0;
//根据官网的数据类型 结合后台人员传的类型 来调整数据结构
r.forEach((r, index) => {
r.effInterperiod.forEach((rr, index1) => {
if(rr.min!=='null') minList.push(new Date(rr.min).getTime());
data.push({
name: "有效时间段",
value: [
index, //代表y轴对应实体
rr.min,
rr.max,
//时间段差值
(
(new Date(rr.max).getTime() - new Date(rr.min).getTime()) /
1000 /
60 /
60
).toFixed(2),
],
itemStyle: {
normal: {
color: "red",
},
},
});
});
r.invInterperiod.forEach((rr, index1) => {
if(rr.min!=='null') minList.push(new Date(rr.min).getTime());
data.push({
name: "无效时间段",
value: [
index,
rr.min,
rr.max,
(
(new Date(rr.max).getTime() - new Date(rr.min).getTime()) /
1000 /
60 /
60
).toFixed(2),
],
itemStyle: {
normal: {
color: "blue",
},
},
});
});
});
//options X轴时间需要有个最小值 此过程求后台传来的最小时间
minNum = Math.min(...minList);
let year = new Date(minNum).getFullYear();
let month =
parseInt(new Date(minNum).getMonth() + 1) < 10
? "0" + parseInt(new Date(minNum).getMonth() + 1)
: parseInt(new Date(minNum).getMonth() + 1);
let date =
new Date(minNum).getDate() < 10
? "0" + new Date(minNum).getDate()
: new Date(minNum).getDate();
let hours =
new Date(minNum).getHours() < 10
? "0" + new Date(minNum).getHours()
: new Date(minNum).getHours();
let mm =
new Date(minNum).getMinutes() < 10
? "0" + new Date(minNum).getMinutes()
: new Date(minNum).getMinutes();
let s =
new Date(minNum).getSeconds() < 10
? "0" + new Date(minNum).getSeconds()
: new Date(minNum).getSeconds();
this.option.xAxis.min =
year + "-" + month + "-" + date + " " + hours + ":" + mm + ":" + s;
console.log(
year + "-" + month + "-" + date + " " + hours + ":" + mm + ":" + s
);
this.option.yAxis.data = r.map((r) => r.objectName);
this.option.series[0].data = data;
myChart.setOption(this.option);
},
},
// created(){
// console.log(this.barData)
// },
async mounted() {
// 基于准备好的dom，初始化echarts实例
let { data } = await this.$api.getData(name);
myChart = this.$echarts.init(document.getElementById("multiple-y5"));
//console.log(data,'custom');
this.drawgraph(data);
// 窗口改变时重新绘制
window.addEventListener("resize", this.$debounce(myChart.resize, 500));
},
};
</script>
<style scoped>
.multiple-y1 {
width: 100%;
height: 100%;
}
</style>
后台数据类型
"invInterperiod": [
{
"min":"2021-07-13 05:00:00",
"max":"2021-07-13 05:20:00"
},
{
"min":"2021-07-13 05:40:00",
"max":"2021-07-13 06:00:00"
},
{
"min":"2021-07-13 07:00:00",
"max":"2021-07-13 08:20:00"
},
{
"min":"2021-07-13 09:00:00",
"max":"2021-07-13 10:20:00"
},
{
"min":"2021-07-13 11:40:00",
"max":"2021-07-13 12:20:00"
}
],
"effInterperiod": [
{
"min":"2021-07-14 05:00:00",
"max":"2021-01-14 05:20:00"
},
{
"min":"2021-07-14 05:40:00",
"max":"2021-07-14 06:00:00"
},
{
"min":"2021-07-14 07:00:00",
"max":"2021-07-14 08:20:00"
},
{
"min":"2021-07-15 09:00:00",
"max":"2021-07-14 10:20:00"
},
{
"min":"2021-07-14 12:40:00",
"max":"2021-07-14 13:20:00"
}
]
网友评论