airoptweb/src/views/echart/BarChart.vue

<template>
  <div style="width: 100%;height: 100%;">
    <!-- 横条图 -->
    <div class="echartitem" style="width: 100%;height: 100%;">
      <div id="bargraphbar" ref="chartContainer" style="width: 100%;height: 100%;"></div>
    </div>
  </div>
</template>
<script setup>
import { ref, onMounted, reactive } from "vue"
import { RouterView, RouterLink } from "vue-router"
import { request, uploadFile } from "@/utils/request"
import { ElMessage, ElButton, ElDialog, ElSelect } from "element-plus"
import * as echarts from "echarts"
import { graphic } from "echarts/core"
let myChart
let vars = ref([])
let vals = ref([])
let series = ref([])
let xdata = ref([])
let chartContainer = ref(null)
let chartDom = ref()
let option = ref(null)
let convergeDate = ref([])
let curvedata = ref("")
let state = reactive({
  instance: null
})
const getData = () => {}
onMounted(() => {
  var chartDom = document.getElementById("bargraphbar")
  myChart = echarts.init(chartDom)
  setOptionfun()
})

const props = defineProps({
  BarChartshow: {
    type: Boolean,
    default: false,
  },
});
// 监听 BarChartshow 变化
watch(() => props.BarChartshow, (newValue) => {
  if (newValue) {
    nextTick(() => {
      const chartDom = chartContainer.value;
      if (chartDom) {
        myChart = echarts.init(chartDom);
        myChart.resize();  // 手动调整图表大小
        setOptionfun();  // 设置图表配置
      }
    });
  }
}, { immediate: true });

//初始化
const echatinit = () => {
  convergeDate.value = []
  series.value = []
  xdata.value = []
}
// 从websocket取数据
// const getsockechart = (data) => {
//     curvedata.value = data;
//     series.value = [];
//     let rows = curvedata.value;
//     for (let i = 0; i < rows.length; i++) {

//         vars.value = (rows[i].vars).split(",");
//         vals.value = (rows[i].vals).split(" ");
//         let data = vals.value.map((str) => Number(str));
//         convergeDate.value.push(data);
//         xdata.value.push(rows[i].step);
//     }
//     for (let j = 0; j < vars.value.length; j++) {
//         let firstColumn = (convergeDate.value.map((row) => row[j]));
//         let item = {
//               name: vars.value[j],
//             type: 'bar',
//             data: firstColumn
//         }
//         series.value.push(item)
//     }
//     myChart.setOption({
//         legend: {
//             data: vars.value
//         },
//         yAxis: {
//             data: xdata.value,
//         },
//         series: series.value
//     });
// }
// 数据 从接口处取
const getsockechart = (data) => {
  curvedata.value = data
  convergeDate.value = []
  series.value = []
  xdata.value = []
  let rows = JSON.parse(curvedata.value)
  let num = 0
  for (let i = 0; i < rows.length; i++) {
    num += 1
    vars.value = rows[i].vars.split(",")
    vals.value = rows[i].vals.split(" ")
    let data = vals.value.map((str) => Number(str))
    convergeDate.value.push(data)
    xdata.value.push(num)
  }
  console.log(convergeDate.value)
  // console.log( convergeDate.value);
  for (let j = 0; j < vars.value.length; j++) {
    let firstColumn = convergeDate.value.map((row) => row[j])
    let item = {
      name: vars.value[j],
      type: "bar",
      data: firstColumn
    }
    series.value.push(item)
  }
  myChart.setOption({
    legend: {
      data: vars.value
    },
    xAxis: {
      data: xdata.value
    },
    series: series.value
  })
}
const setOptionfun = () => {
  option.value = {
    title: {
      text: "横条图"
    },
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "shadow"
      }
    },
    grid: {
      left: "3%",
      right: "4%",
      bottom: "3%",
      containLabel: true
    },
    legend: {
      data: vars.value
    },
    toolbox: {
      feature: {
        saveAsImage: {}
      }
    },

    xAxis: {
      type: "value"
    },
    yAxis: {
      type: "category",
      data: xdata.value
    },
    series: series.value
  }

  option.value && myChart.setOption(option.value)
}
defineExpose({ getsockechart, echatinit })
</script>
<style lang="scss" scoped></style>