- <template>
- <div class="chartBox" :id="Eid"></div>
- </template>
- <script setup name="pieChartGszl">
- import { guid } from "@/utils/ruoyi";
- const { proxy } = getCurrentInstance();
- import { nowSize } from "@/utils/util.js";
- import { nextTick, reactive } from "vue";
- const props = defineProps({
- //刷新标志
- refresh: {
- type: [String, Number],
- default: 1,
- },
- //数据
- echartData: {
- type: Object,
- default: {},
- },
- });
-
- const AllData = reactive({
- Options: {},
- });
- const Eid = 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) => {
- nextTick(() => {
- intChart();
- });
- }
- );
- //自适应
- function resizeTheChart() {
- nextTick(() => {
- 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() {
- if (document.getElementById(Eid) == null) {
- return;
- }
- proxy.echarts.dispose(document.getElementById(Eid));
- myChart.value = proxy.echarts.init(document.getElementById(Eid));
- 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),
- borderRadius: 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);
- });
- onBeforeUnmount(() => {
- myChart.value && myChart.value.dispose();
- });
- </script>
-
- <style lang="scss" scoped>
- .chartBox {
- width: 100%;
- height: 100%;
- }
- </style>