<template>
<div class="chartBox" :id="id"></div>
</template>
<script setup name="pieChartGszl">
import { guid } from '@/utils/ruoyi';
const { proxy } = getCurrentInstance();
import { nowSize } from '@/utils/util.js';
import moment from 'moment';
import { reactive } from 'vue';
const props = defineProps({
//刷新标志
refresh: {
type: [String, Number],
default: 1,
},
//数据
echartData: {
type: Object,
default: {},
},
});
const AllData = reactive({
Options: {},
});
const id = guid();
const myChart = shallowRef('');
watch(
() => props.refresh,
value => {
//先销毁实例
if (props.echartData.activeIndex > 0) {
// myChart.value.resize();
reasizeFun();
} else {
myChart.value && myChart.value.dispose();
intChart();
}
}
);
watch(
() => props.echartData,
value => {
intChart();
}
);
//自适应
function resizeTheChart() {
if (myChart.value) {
myChart.value.resize();
}
}
// 重绘之前的样式填充
function reasizeFun() {
// debugger;
if (props.echartData.rainTrend[props.echartData.activeIndex - 1] == '中雨') {
// AllData.Options.visualMap.pieces[
// (Number(props.echartData.activeIndex) - 1) * 2
// ].color = "rgba(222, 230, 0, 1)";
// AllData.Options.visualMap.pieces[
// (Number(props.echartData.activeIndex) - 1 + 1) * 2
// ].color = "rgba(222, 230, 0, 1)";
AllData.Options.visualMap.pieces[Number(props.echartData.activeIndex) - 1].color = 'rgba(222, 230, 0, 1)';
} else if (props.echartData.rainTrend[props.echartData.activeIndex - 1] == '小雨') {
// AllData.Options.visualMap.pieces[
// (Number(props.echartData.activeIndex) - 1) * 2
// ].color = "rgba(0, 191, 253, 1)";
// AllData.Options.visualMap.pieces[
// (Number(props.echartData.activeIndex) - 1 + 1) * 2
// ].color = "rgba(0, 191, 253, 1)";
AllData.Options.visualMap.pieces[Number(props.echartData.activeIndex) - 1].color = 'rgba(0, 191, 253, 1)';
} else if (props.echartData.rainTrend[props.echartData.activeIndex - 1] == '大雨') {
// AllData.Options.visualMap.pieces[
// (Number(props.echartData.activeIndex) - 1) * 2
// ].color = "rgba(255, 184, 15, 1)";
// AllData.Options.visualMap.pieces[
// (Number(props.echartData.activeIndex) - 1 + 1) * 2
// ].color = "rgba(255, 184, 15, 1)";
AllData.Options.visualMap.pieces[Number(props.echartData.activeIndex) - 1].color = 'rgba(255, 184, 15, 1)';
} else if (props.echartData.rainTrend[props.echartData.activeIndex - 1] == '暴雨') {
// AllData.Options.visualMap.pieces[
// (Number(props.echartData.activeIndex) - 1) * 2
// ].color = "rgba(255, 26, 26, 1)";
// AllData.Options.visualMap.pieces[
// (Number(props.echartData.activeIndex) - 1 + 1) * 2
// ].color = "rgba(255, 26, 26, 1)";
AllData.Options.visualMap.pieces[Number(props.echartData.activeIndex) - 1].color = 'rgba(255, 26, 26, 1)';
} else if (props.echartData.rainTrend[props.echartData.activeIndex - 1] == '大暴雨') {
// AllData.Options.visualMap.pieces[
// (Number(props.echartData.activeIndex) - 1) * 2
// ].color = "rgba(255, 26, 26, 1)";
// AllData.Options.visualMap.pieces[
// (Number(props.echartData.activeIndex) - 1 + 1) * 2
// ].color = "rgba(255, 26, 26, 1)";
AllData.Options.visualMap.pieces[Number(props.echartData.activeIndex) - 1].color = 'rgba(255, 26, 26, 1)';
} else if (props.echartData.rainTrend[props.echartData.activeIndex - 1] == '特大暴雨') {
// AllData.Options.visualMap.pieces[
// (Number(props.echartData.activeIndex) - 1) * 2
// ].color = "rgba(255, 26, 26, 1)";
// AllData.Options.visualMap.pieces[
// (Number(props.echartData.activeIndex) - 1 + 1) * 2
// ].color = "rgba(255, 26, 26, 1)";
AllData.Options.visualMap.pieces[Number(props.echartData.activeIndex) - 1].color = 'rgba(255, 26, 26, 1)';
} else {
// AllData.Options.visualMap.pieces.push({
// gt: props.echartData.activeIndex,
// lte: props.echartData.activeIndex,
// color: "rgba(121, 159, 200, 1)",
// });
}
console.log(AllData.Options.visualMap);
myChart.value.setOption(AllData.Options, true);
// myChart.value.resize();
// intChart();
// myChart.value = proxy.echarts.init(document.getElementById(id));
// myChart.value.clear();
// myChart.value.setOption(AllData.Options);
}
//初始化
function intChart() {
myChart.value = proxy.echarts.init(document.getElementById(id));
myChart.value.clear();
// 处理数据
let XData = [];
props.echartData.rainTrend.forEach((element, index) => {
if (index == 0) {
XData.push('');
XData.push(element);
XData.push('');
} else {
XData.push(element);
XData.push('');
}
});
console.log(`1231`, XData);
let Servers = [];
props.echartData.history.forEach((element, index) => {
if (index == 0) {
Servers.push(Number(element));
Servers.push(Number(element));
} else {
Servers.push((Number(element) + Number(props.echartData.history[index - 1])) / 2);
Servers.push(Number(element));
}
});
console.log(`1232`, Servers);
// 绘制图表
// 设置图形配置项
AllData.Options = {
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow',
},
formatter: function (params) {
console.log(params);
let str = '';
if (params[0].name == '') {
str = '';
} else {
str =
"<div style='padding:0 5px;width:100%;height:32px;line-height:16px;border-radius:3px;'>" +
params[0].name +
'<br />' +
params[0].data +
'(mm)</div>';
}
return str;
},
},
grid: {
top: nowSize(20, 1920),
bottom: nowSize(6, 1920), //也可设置left和right设置距离来控制图表的大小
left: nowSize(50, 1920),
right: nowSize(20, 1920),
},
xAxis: {
// data: props.echartData.rainTrend,
data: XData,
axisLine: {
show: false, //隐藏X轴轴线
lineStyle: {
color: 'rgba(44, 110, 189, 1)',
},
},
axisTick: {
show: false, //隐藏X轴刻度
lineStyle: {
color: 'rgba(44, 110, 189, 1)',
},
},
axisLabel: {
show: false,
},
boundaryGap: false,
},
yAxis: {
type: 'value',
axisTick: {
show: false, //隐藏X轴刻度
lineStyle: {
color: 'rgba(44, 110, 189, 1)',
},
},
axisLine: {
show: false,
},
axisLabel: {
show: true,
color: '#FFFFFF',
fontSize: nowSize(12, 1920),
},
splitLine: {
//网格线
lineStyle: {
type: 'dashed',
color: 'rgba(255, 255, 255, 0.2)', //设置网格线类型 dotted：虚线 solid:实线
},
show: true, //隐藏或显示
},
},
visualMap: {
type: 'piecewise',
show: false,
dimension: 0,
seriesIndex: 0,
pieces: [],
zlevel: 4,
},
series: [
{
type: 'line',
// data: props.echartData.history,
data: Servers,
barWidth: nowSize(10, 1920),
areaStyle: {},
// itemStyle: {},
zlevel: 1,
symbol: 'circle',
symbolSize: nowSize(6, 1920),
// lineStyle: {
// shadowColor: "rgba(0, 0, 0, .5)",
// shadowBlur: nowSize(5, 1920),
// shadowOffsetY: nowSize(5, 1920),
// shadowOffsetX: nowSize(5, 1920),
// // color: (parms) => {
// // debugger;
// // let yanse = "";
// // let colorType = props.echartData.rainTrend[value.dataIndex];
// // if (value.dataIndex <= props.echartData.activeIndex && colorType == "小雨") {
// // yanse = "rgba(0, 191, 253, 1)";
// // } else if (
// // value.dataIndex <= props.echartData.activeIndex &&
// // colorType == "中雨"
// // ) {
// // yanse = "rgba(222, 230, 0, 1)";
// // } else if (
// // value.dataIndex <= props.echartData.activeIndex &&
// // colorType == "大雨"
// // ) {
// // yanse = "rgba(255, 184, 15, 1)";
// // } else if (
// // (value.dataIndex <= props.echartData.activeIndex && colorType == "暴雨") ||
// // colorType == "大暴雨" ||
// // colorType == "特大暴雨"
// // ) {
// // yanse = "rgba(255, 26, 26, 1)";
// // } else {
// // yanse = "rgba(121, 159, 200, 1)";
// // }
// // console.log("lineStyle", yanse);
// // return yanse;
// // },
// color: "rgba(255, 26, 26, 1)",
// },
itemStyle: {
borderColor: 'rgba(57, 247, 255, 0.3)',
borderWidth: nowSize(6, 1920),
barBorderRadius: nowSize(6, 1920),
// color: "rgba(255, 255, 255, 1)",
color: value => {
// let yanse=''
// let colorType=props.echartData.rainTrend[value.dataIndex]
// if(value.dataIndex<=props.echartData.activeIndex&&colorType=='小雨'){
// yanse="rgba(0, 191, 253, 1)"
// }else if(value.dataIndex<=props.echartData.activeIndex&&colorType=='中雨'){
// yanse= "rgba(222, 230, 0, 1)"
// }else if(value.dataIndex<=props.echartData.activeIndex&&colorType=='大雨'){
// yanse= "rgba(255, 184, 15, 1)"
// }else if(value.dataIndex<=props.echartData.activeIndex&&colorType=='暴雨'||colorType=='大暴雨'||colorType=='特大暴雨'){
// yanse= "rgba(255, 26, 26, 1)"
// }else{
// yanse= "rgba(121, 159, 200, 1)"
// }
// console.log('lineStyle',yanse)
// return yanse
let colorType = props.echartData.rainTrend[value.dataIndex];
let color1 = new proxy.echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: 'rgba(0, 191, 253, 1)',
},
{
offset: 1,
color: 'rgba(0, 191, 253, 0.2)',
},
]);
let color2 = new proxy.echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: 'rgba(222, 230, 0, 1)',
},
{
offset: 1,
color: 'rgba(222, 230, 0, 0.2)',
},
]);
let color3 = new proxy.echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: 'rgba(255, 184, 15, 1)',
},
{
offset: 1,
color: 'rgba(255, 184, 15, 0.2)',
},
]);
let color4 = new proxy.echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: 'rgba(255, 26, 26, 1)',
},
{
offset: 1,
color: 'rgba(255, 26, 26, 0.2)',
},
]);
let color5 = new proxy.echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: 'rgba(121, 159, 200, 1)',
},
{
offset: 1,
color: 'rgba(121, 159, 200, 0.2)',
},
]);
let yanse = '';
if (value.dataIndex < props.echartData.activeIndex && colorType == '小雨') {
yanse = color1;
} else if (value.dataIndex < props.echartData.activeIndex && colorType == '中雨') {
yanse = color2;
} else if (value.dataIndex < props.echartData.activeIndex && colorType == '大雨') {
yanse = color3;
} else if (
value.dataIndex < props.echartData.activeIndex &&
(colorType == '暴雨' || colorType == '大暴雨' || colorType == '特大暴雨')
) {
yanse = color4;
} else {
yanse = color5;
}
// console.log(yanse)
return yanse;
},
},
// areaStyle: {
// // color: new proxy.echarts.graphic.LinearGradient(0, 0, 0, 1, [
// // {
// // offset: 0,
// // color: "rgba(0, 191, 253, 1)",
// // },
// // {
// // offset: 1,
// // color: "rgba(0, 191, 253, 0.2)",
// // },
// // ]),
// color: (value) => {
// debugger;
// let colorType = props.echartData.rainTrend[value.dataIndex];
// let color1 = new proxy.echarts.graphic.LinearGradient(0, 0, 0, 1, [
// {
// offset: 0,
// color: "rgba(0, 191, 253, 1)",
// },
// {
// offset: 1,
// color: "rgba(0, 191, 253, 0.2)",
// },
// ]);
// let color2 = new proxy.echarts.graphic.LinearGradient(0, 0, 0, 1, [
// {
// offset: 0,
// color: "rgba(222, 230, 0, 1)",
// },
// {
// offset: 1,
// color: "rgba(222, 230, 0, 0.2)",
// },
// ]);
// let color3 = new proxy.echarts.graphic.LinearGradient(0, 0, 0, 1, [
// {
// offset: 0,
// color: "rgba(255, 184, 15, 1)",
// },
// {
// offset: 1,
// color: "rgba(255, 184, 15, 0.2)",
// },
// ]);
// let color4 = new proxy.echarts.graphic.LinearGradient(0, 0, 0, 1, [
// {
// offset: 0,
// color: "rgba(255, 26, 26, 1)",
// },
// {
// offset: 1,
// color: "rgba(255, 26, 26, 0.2)",
// },
// ]);
// let color5 = new proxy.echarts.graphic.LinearGradient(0, 0, 0, 1, [
// {
// offset: 0,
// color: "rgba(121, 159, 200, 1)",
// },
// {
// offset: 1,
// color: "rgba(121, 159, 200, 0.2)",
// },
// ]);
// let yanse = "";
// if (value.dataIndex <= props.echartData.activeIndex && colorType == "小雨") {
// yanse = color1;
// } else if (
// value.dataIndex <= props.echartData.activeIndex &&
// colorType == "中雨"
// ) {
// yanse = color2;
// } else if (
// value.dataIndex <= props.echartData.activeIndex &&
// colorType == "大雨"
// ) {
// yanse = color3;
// } else if (
// (value.dataIndex <= props.echartData.activeIndex && colorType == "暴雨") ||
// colorType == "大暴雨" ||
// colorType == "特大暴雨"
// ) {
// yanse = color4;
// } else {
// yanse = color5;
// }
// console.log(yanse);
// return yanse;
// },
// },
},
],
};
for (let index = 0; index < XData.length; index++) {
AllData.Options.visualMap.pieces.push({
gte: index * 2,
lte: (index + 1) * 2,
color: 'rgba(121, 159, 200, 1)',
});
}
myChart.value.setOption(AllData.Options, true);
}
onMounted(() => {
// intChart();
window.addEventListener('resize', resizeTheChart);
});
</script>
<style lang="scss" scoped>
.chartBox {
width: 100%;
height: 100%;
}
</style>
