vent-forewarn-micro/src/views/vent/common/basicEchartLine.vue

<template>
  <div class="basicEchartLine">
    <div class="echart-box" ref="line"></div>
  </div>
</template>

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

let props = defineProps({
  //距离边缘的距离
  gridV: {
    type: Object,
    default: () => {
      return {};
    },
  },
  echartData: {
    type: Object,
    default: () => {
      return {}
    }
  }
});

//获取don元素节点
let line = ref();

let gridVs = reactive({
  top: '',
  left: '',
  right: '',
  bottom: '',
})

let echartDatas = reactive({
  xData: [],
  yData: [],
  yData1: [],
  legendName: []
})

function getOption() {
  nextTick(() => {
    let myChart = echarts.init(line.value);
    let option = {
      tooltip: {
        trigger: 'axis',
        backgroundColor: 'rgba(0, 0, 0, .6)',
        borderColor: '#2395c8',
        textStyle: {
          color: '#fff',
          fontSize: 12,
        },
        axisPointer: {
          type: 'line',
          lineStyle: {
            color: {
              type: 'linear',
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [
                {
                  offset: 0,
                  color: 'rgba(31, 179, 247,0)',
                },
                {
                  offset: 0.5,
                  color: 'rgba(31, 179, 247,1)',
                },
                {
                  offset: 1,
                  color: 'rgba(31, 179, 247,0)',
                },
              ],
              global: false,
            },
          },
        },
      },
      legend: {
        align: 'left',
        right: 'center',
        top: '2%',
        type: 'plain',
        textStyle: {
          color: '#7ec7ff',
          fontSize: 14,
        },
        // icon:'rect',
        itemGap: 25,
        itemWidth: 18,
        icon: 'path://M0 2a2 2 0 0 1 2 -2h14a2 2 0 0 1 2 2v0a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2z',
        data: [
          {
            name: echartDatas.legendName.length != 0 ? echartDatas.legendName[0] : '',
          },
          {
            name: echartDatas.legendName.length > 1 ? echartDatas.legendName[1] : '',
          },
        ],
      },
      grid: gridVs,
      xAxis: [
        {
          //x轴
          type: 'category', //数据类型为不连续数据
          boundaryGap: false, //坐标轴两边是否留白
          axisLine: {
            //坐标轴轴线相关设置。数学上的x轴
            show: true,
            lineStyle: {
              color: 'rgba(100, 99, 99,.5)',
              type: 'dashed',
            },
          },
          axisLabel: {
            fontSize: 14,
            margin: 10,
            textStyle: {
              color: '#b3b8cc',
            },
            formatter: function (params) {
              let newParamsName = ref('')  // 最终拼接成的字符串
              let paramsNameNumber = ref(params.length) // 实际标签的个数
              let provideNumber = ref(10)  // 每行能显示的字的个数
              let rowNumber = Math.ceil(paramsNameNumber.value / provideNumber.value) // 换行的话，需要显示几行，向上取整
              /**
               * 判断标签的个数是否大于规定的个数， 如果大于，则进行换行处理 如果不大于，即等于或小于，就返回原标签
               */
              // 条件等同于rowNumber>1
              if (paramsNameNumber.value > provideNumber.value) {
                /** 循环每一行,p表示行 */
                for (var p = 0; p < rowNumber; p++) {
                  var tempStr = '' // 表示每一次截取的字符串
                  var start = p * provideNumber.value // 开始截取的位置
                  var end = start + provideNumber.value // 结束截取的位置
                  // 此处特殊处理最后一行的索引值
                  if (p == rowNumber - 1) {
                    // 最后一次不换行
                    tempStr = params.substring(start, paramsNameNumber.value)
                  } else {
                    // 每一次拼接字符串并换行
                    tempStr = params.substring(start, end) + '\n'
                  }
                  newParamsName.value += tempStr // 最终拼成的字符串
                }
              } else {
                // 将旧标签的值赋给新标签
                newParamsName.value = params
              }
              //将最终的字符串返回
              return newParamsName.value
            }
          },
          axisTick: { show: true }, //刻度点数轴
          splitLine: {
            show: false,
          },
          data: echartDatas.xData.length != 0 ? echartDatas.xData : [],
        },
      ],
      yAxis: [
        {
          //y轴的相关设置
          type: 'value', //y轴数据类型为连续的数据
          min: 0, //y轴上的刻度最小值
          // splitNumber: 7,//y轴上的刻度段数
          splitLine: {
            show: true,
            lineStyle: {
              color: 'rgba(100, 99, 99,.5)',
              type: 'dashed',
            },
          },
          axisLine: {
            //y轴的相关设置
            show: false,
          },
          axisLabel: {
            show: true,
            margin: 20,
            textStyle: {
              color: '#b3b8cc',
            },
          },
          axisTick: { show: true }, //刻度点数轴
        },
      ],
      series: [
        {
          name: echartDatas.legendName.length != 0 ? echartDatas.legendName[0] : '',
          type: 'line', //统计图类型为折线图
          smooth: false, //是否平滑曲线显示
          symbolSize: 0, //数据点的大小，[0,0]//b表示宽度和高度
          lineStyle: {
            //线条的相关设置
            normal: {
              color: '#1faef0', // 线条颜色
            },
          },
          itemStyle: {
            color: "#1faef0",
            borderColor: "#1faef0",
            borderWidth: 1

          },
          areaStyle: {
            //区域填充样式
            normal: {
              //线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
              color: new echarts.graphic.LinearGradient(
                0,
                0,
                0,
                1,
                [
                  { offset: 0, color: 'rgba(31, 174, 240, 0.7)' },
                  { offset: 0.7, color: 'rgba(31, 174, 240, 0)' },
                ],
                false,
              ),

              shadowColor: 'rgba(31, 174, 240, 0.6)', //阴影颜色
              shadowBlur: 20, //shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。
            },
          },
          data: echartDatas.yData.length != 0 ? echartDatas.yData : [],
        },
        {
          name: echartDatas.legendName.length > 1 ? echartDatas.legendName[1] : '',
          type: 'line', //统计图类型为折线图
          smooth: false, //是否平滑曲线显示
          symbolSize: 0, //数据点的大小，[0,0]//b表示宽度和高度
          lineStyle: {
            //线条的相关设置
            normal: {
              color: '#1ef49f', // 线条颜色
            },
          },
          itemStyle: {
            color: "#1ef49f",
            borderColor: "#1ef49f",
            borderWidth: 1

          },
          areaStyle: {
            //区域填充样式
            normal: {
              //线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
              color: new echarts.graphic.LinearGradient(
                0,
                0,
                0,
                1,
                [
                  { offset: 0, color: 'rgba(31, 237, 155, 0.7)' },
                  { offset: 0.7, color: 'rgba(31, 237, 155, 0)' },
                ],
                false,
              ),

              shadowColor: 'rgba(31, 237, 155, 0.6)', //阴影颜色
              shadowBlur: 20, //shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。
            },
          },
          data: echartDatas.yData1.length != 0 ? echartDatas.yData1 : [],
        },
      ],
    };
    myChart.setOption(option);
    window.onresize = function () {
      myChart.resize();
    };
  });
}

watch(() => props.gridV, (newV, oldV) => {
  console.log(newV, 'gird--------')
  gridVs.top = newV.top
  gridVs.left = newV.left
  gridVs.right = newV.right
  gridVs.bottom = newV.bottom
}, { immediate: true, deep: true })

watch(() => props.echartData, (newE, oldE) => {
  console.log(newE, 'echartData---------')
  echartDatas.xData = newE.xData
  echartDatas.yData = newE.yData
  echartDatas.yData1 = newE.yData1
  echartDatas.legendName = newE.legendName
  getOption();
}, { immediate: true, deep: true })


onMounted(() => {
  getOption();
});
</script>

<style lang="less" scoped>
.basicEchartLine {
  position: relative;
  width: 100%;
  height: 100%;

  .echart-box {
    width: 100%;
    height: 100%;
  }
}
</style>