gas-injection/src/views/vent/home/configurable/components/preset/gasInjectChart.vue

<template>
  <div ref="gasInjectChart" class="inject-echart-box"></div>
</template>

<script setup lang="ts">
import { nextTick, ref, onMounted, reactive, watch } from 'vue'
import * as echarts from 'echarts';

let props = defineProps({
  option: {
    type: Object as any
  },
  echartData: {
    type: Object as any
  }
})

let gasInjectChart = ref(null)
//图表数据
let echartDatas = reactive({}) as any

let xLabel = ['3.26', '3.27', '3.28', '3.29', '3.30', '3.31']
let goToSchool = ["40", "60", "22", "85", "50", "40"]
let goOutSchool = ["20", "50", "12", "65", "30", "60"]

function getOption() {
  nextTick(() => {
    let myChart = echarts.init(gasInjectChart.value);
    let option
    if (props.option.type == 'bar_lt') {
      option = {
        tooltip: props.option.tooltip,
        grid: props.option.grid,
        legend: props.option.legend,
        xAxis: [{
          data: echartDatas.xData,
          axisLabel: {
            textStyle: {
              color: 'rgba(181, 185, 191)',
              fontSize: 12
            },
            margin: 10, //刻度标签与轴线之间的距离。
          },

          axisLine: {
            lineStyle: {
              color: 'rgba(1, 63, 97)',
            },
          },
          axisTick: {
            show: false //不显示刻度
          },
          boundaryGap: true,
          splitLine: {
            show: false,
          },
        }],
        yAxis: props.option.yAxis,
        series: props.option.series.map(el => {
          return {
            ...el,
            data: echartDatas[el.data]
          }
        })
      };
    } else if (props.option.type == 'line-area') {
      option = {
        tooltip: props.option.tooltip,
        grid: props.option.grid,
        xAxis: [{
          type: 'category',
          boundaryGap: false,
          axisLine: { //坐标轴轴线相关设置。数学上的x轴
            show: true,
            lineStyle: {
              color: 'rgba(1, 63, 97)',
            },
          },
          axisLabel: { //坐标轴刻度标签的相关设置
            textStyle: {
              color: 'rgba(181, 185, 191)',
              padding: 5,
              fontSize: 12
            },
            formatter: function (data) {
              return data
            }
          },
          splitLine: {
            show: false,
          },
          axisTick: {
            show: false,
          },
          data: xLabel
        }],
        yAxis: [{
          name: '(MPa)',
          nameTextStyle: {
            color: 'rgba(181, 185, 191)',
            fontSize: 12,
            padding: 0
          },
          min: 0,
          splitLine: {
            show: true,
            lineStyle: {
              color: 'rgba(1, 63, 97)',
            },
          },
          axisLine: {
            show: false,
          },
          axisLabel: {
            show: true,
            textStyle: {
              color: 'rgba(181, 185, 191)',
              padding: 12
            },
            formatter: '{value}',
          },
          axisTick: {
            show: false,
          },
        }],
        series: [{
          name: '',
          type: 'line',
          symbol: 'circle', // 默认是空心圆（中间是白色的），改成实心圆
          showAllSymbol: true,
          symbolSize: 0,
          smooth: true,
          lineStyle: {
            normal: {
              width: 3,
              color: props.option.colorLine, // 线条颜色
            },
            borderColor: 'rgba(0,0,0,.4)',
          },
          itemStyle: {
            color: props.option.colorLine,
            borderColor: "#646ace",
            borderWidth: 2

          },
          areaStyle: { //区域填充样式
            normal: {
              //线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                offset: 0,
                color: props.option.colorArea[0]
              },
              {
                offset: 1,
                color: props.option.colorArea[1]
              }
              ], false),
              shadowColor: 'rgba(255, 157, 29, 0.5)', //阴影颜色
              shadowBlur: 20 //shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。
            }
          },
          data: goToSchool
        },
        ]
      };
    }

    myChart.setOption(option);
    window.onresize = function () {
      myChart.resize();
    };
  });
}

watch(() => props.echartData, (newV, oldV) => {
  console.log(newV, '单元抽采数据')
  if (newV) {
    echartDatas.xData = newV.map(el => el.typeName)
    echartDatas.yData = newV.map(el => el.datalist[0].readData.mixStdInstant)
    echartDatas.yData1 = newV.map(el => el.datalist[0].readData.gasConcentration)
    getOption()
  }
}, { immediate: true })

</script>

<style lang="less" scoped>
.inject-echart-box {
  width: 100%;
  height: 100%;
}
</style>