vent-template/src/views/vent/home/colliery/components/EchartLineCharacter3.vue

<template>
  <div style="width: 100%; height: 100%">
    <!-- <div id="echartsMain" style="width: 100%; height: 100%"></div> -->
  </div>
</template>

<script lang="ts" setup>
  import { ref, reactive, onMounted, nextTick, defineProps, watch } from 'vue';
  // import Utils from '@/utils/utils'
  // const echarts = require('echarts')
  import * as echarts from 'echarts';

  let props = defineProps({
    setid: String,
  });

  let myChart = ref<any>(null);
  let title1 = ref<any>('');
  let title2 = ref('');
  let legend = reactive(['风阻', '负压']);
  let min = 0;
  let yname = ref('负压(Pa)');
  let xname = ref('风量\r\n(m³/min)\r\n');
  let ymax = ref(3000);
  let ymax2 = ref(200);
  let xMax = ref(300);
  let xMin = ref(0);
  let xdata1 = reactive([]);
  let xdata2 = reactive([]);
  let xdata3 = reactive([]);
  let xdata4 = reactive([]);
  let xdata5 = reactive([]);
  let xdata6 = reactive([]);
  let ynametextcolor = ref('#3df6ff');
  let linecolor = ref('#0092d5');
  let gridlinecolor = ref('#006c9d');
  let textcolor = ref('#ffffff');
  let myWidth = ref(window.innerWidth - 500 + 'px');
  let padding = reactive(['auto', 'auto', '40', '50']);

  // 风速曲线图各种参数设置
  function optionFun() {
    var option = {
      title: {
        textStyle: {
          color: textcolor.value,
          fontSize: 14, // 字体颜色
        },
        text: title.value,
      },
      grid: {
        top: '20%',
        left: '3%',
        right: '16%',
        bottom: '5%',
        containLabel: true,
      },
      legend: {
        // x:'right',
        top: '1%',
        textStyle: {
          color: '#ffffff',
          fontSize: 14, // 字体颜色
        },
        data: legend,
      },
      tooltip: {
        backgroundColor: 'rgba(0,0,0,0.8)',
        textStyle: {
          color: textcolor.value,
          fontSize: 14, // 字体颜色
        },
        formatter: function (params, ticket, callback) {
          console.log(params, 'params1');
          // var res = '风量' + ' : ' + Math.round(params.data[0] * 60 * 10) / 10 + '(m³/min)<br/>'
          // res = res + '&emsp;&emsp;&emsp;' + params.data[0] + '(m³/s)<br/>'
          var res = '风量' + ' : ' + params.data[0] * 60 + '(m³/min)<br/>';
          res = res + '&emsp;&emsp;&emsp;' + params.data[0].toFixed(2) + '(m³/s)<br/>';
          res = res + '负压' + ' : ' + params.data[1] + '(Pa)<br/>';
          // lxh
          // var res = '风量' + ' : ' + 13600 + '(m³/min)<br/>'
          // res = res + '&emsp;&emsp;&emsp;' + (13600 / 60).toFixed(2) + '(m³/s)<br/>'
          // res = res + '负压' + ' : ' + params.data[1] + '(Pa)<br/>'

          return res;
        },
        trigger: 'item',
      },
      color: ['#00bb00', '#ffbb00', '#ff0000', '#0000ff'],
      xAxis: [
        {
          name: xname.value,
          nameTextStyle: {
            color: ynametextcolor.value,
            fontSize: 14,
          },
          axisLine: {
            lineStyle: {
              color: linecolor.value,
              width: 1, // 这里是为了突出显示加上的
            },
          },
          splitLine: {
            show: false, // 网格线
            lineStyle: {
              color: gridlinecolor.value,
              type: 'dashed', // 设置网格线类型 dotted：虚线   solid:实线
            },
          },
          axisLabel: {
            show: true,
            position: 'bottom',
            textStyle: {
              color: textcolor.value,
              fontSize: 14,
            },
          },
          type: 'value',
          min: xMin.value * 60,
          max: xMax.value * 60,
        },
        {
          name: '',
          nameTextStyle: {
            color: ynametextcolor.value,
            fontSize: 14,
          },
          axisTick: {
            show: false,
          },
          axisLine: {
            show: false,
            lineStyle: {
              color: linecolor.value,
              width: 1, // 这里是为了突出显示加上的
            },
          },
          splitLine: {
            show: false, // 网格线
            lineStyle: {
              color: gridlinecolor.value,
              type: 'dashed', // 设置网格线类型 dotted：虚线   solid:实线
            },
          },
          axisLabel: {
            show: false,
            textStyle: {
              color: textcolor.value,
              fontSize: 14,
            },
          },
          type: 'value',
          min: xMin.value,
          max: xMax.value,
        },
      ],
      yAxis: [
        {
          name: yname.value,
          splitNumber: 5,
          nameTextStyle: {
            color: ynametextcolor.value,
            fontSize: 14,
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: linecolor.value,
              width: 1, // 这里是为了突出显示加上的
            },
          },
          splitLine: {
            show: true, // 网格线
            lineStyle: {
              color: gridlinecolor.value,
              type: 'dashed', // 设置网格线类型 dotted：虚线   solid:实线
            },
          },
          axisLabel: {
            show: true,
            textStyle: {
              color: textcolor.value,
              fontSize: 14,
            },
          },
          type: 'value',
          min: 0,
          max: ymax.value,
        },
      ],
      series: [
        {
          name: legend[0],
          yAxisIndex: 0,
          xAxisIndex: 1,
          type: 'line',
          smooth: true,
          animationDuration: 1000,
          showSymbol: false,
          data: xdata1,
        },
        {
          name: legend[1],
          yAxisIndex: 0,
          xAxisIndex: 1,
          type: 'line',
          smooth: true,
          animationDuration: 1000,
          showSymbol: false,

          data: xdata2,
        },

        {
          name: legend[2],
          yAxisIndex: 0,
          xAxisIndex: 1,
          type: 'line',
          smooth: true,
          animationDuration: 1000,
          symbolSize: 10,
          data: xdata3,
        },
        // {
        //   name: this.legend[3],
        //   yAxisIndex: 0,
        //   type: "line",
        //   smooth: true,
        //   animationDuration: 1000,
        //   showSymbol: false,
        //   data: this.xdata4
        // },
      ],
    };
    // 将option返回
    return option;
  }

  function initCharts() {
    // 图表控件
    myChart.value = echarts.init(document.getElementById('echartsMain'));
    // document.getElementById(this.setid).style.width = this.myWidth;
    // document.getElementById(this.setid).style.height = "100px";
    // 每个仪表盘参数设置
    // let option = optionFun()
    // 绘制图表，设置参数信息
    myChart.value.setOption(optionFun());
  }
  function setYMax(data, data2) {
    ymax.value = data;
    ymax2.value = data2;
    // let option = optionFun()
    // 绘制图表，设置参数信息
    myChart.value.setOption(optionFun());
  }
  function setLegend(data) {
    legend = data;
    // let option = optionFun()
    // 绘制图表，设置参数信息
    myChart.value.setOption(optionFun());
  }
  function setXMax(data) {
    xMax.value = data;
    // let option = optionFun()
    // 绘制图表，设置参数信息
    myChart.value.setOption(optionFun());
  }
  function setXMin(data) {
    xMin.value = data;
    // let option = optionFun()
    // 绘制图表，设置参数信息
    myChart.value.setOption(optionFun());
  }
  function setXData(data) {
    xdata1 = data;
    // let option = optionFun()
    // 绘制图表，设置参数信息
    myChart.value.setOption(optionFun());
  }
  function setXData1(data) {
    xdata1 = data;
    // let option = optionFun()
    // 绘制图表，设置参数信息
    myChart.value.setOption(optionFun());
  }
  function setXData2(data) {
    xdata2 = data;
    // let option = optionFun()
    // 绘制图表，设置参数信息
    myChart.value.setOption(optionFun());
  }
  function setXData3(data) {
    xdata3 = data;
    // let option = optionFun()
    // 绘制图表，设置参数信息
    myChart.value.setOption(optionFun());
  }
  function setXData4(data) {
    xdata4 = data;
    // let option = optionFun()
    // 绘制图表，设置参数信息
    myChart.value.setOption(optionFun());
  }
  function clear() {
    myChart.value.clear();
  }
  function setTextColor(color) {
    textcolor.value = color;
    // let option = optionFun()
    // 绘制图表，设置参数信息
    myChart.value.setOption(optionFun());
  }
  function setTitle(title1) {
    title1.value = title1;
    // let option = optionFun()
    // 绘制图表，设置参数信息
    myChart.value.setOption(optionFun());
  }
  function resize() {
    myChart.value.resize();
  }

  // computed: {
  //   scale () {
  //     return [
  //       {
  //         dataKey: 'y',
  //         alias: this.yaxisText
  //       }
  //     ]
  //   }
  // },

  onMounted(() => {
    // initCharts()
  });

  defineExpose({
    setXMax,
    setYMax,
    setXData,
  });
</script>