hsgy/src/components/BarEchart1.vue

<template>
  <div class="echart-div">
    <div class="top-title">
      <div class="title">{{echartData.title}}</div>
    </div>
    <div class="echart" :id="echartData.id">
    </div>
  </div>
</template>
<script>
import { onMounted, reactive, ref, toRefs } from "vue";
import moment from "moment";
import { useStore } from "vuex";
import * as echarts from "echarts";
import bus from '../utils/bus.js'

export default {
  name: "LineEchart",
  props: {
    echartData: Object
  },
  setup(props) {
    const store = useStore();
    let myChart = null;
    let data = {};
    const state = reactive({
    });
    onMounted(() => {
      bus.on('foo', e => {
        console.log(e)
        getEchart();
      })
      getEchart();
    });
    const getEchart = () => {
      if (store.state.selectDate === 1) {
        data = {
          legend: props.echartData.legend,
          color: props.echartData.color,
          xData: [
            "1",
            "2",
            "3",
            "4",
            "5",
            "6",
            "7",
            "8",
            "9",
            "10",
            "11",
            "12",
            "13",
            "14",
            "15",
            "16",
            "17",
            "18",
            "19",
            "20",
            "21",
            "22",
            "23",
            "24",
            "25",
            "26",
            "27",
            "28",
            "29",
            "30",
          ],
          Values: [
            2.3, 5.3, 8.3, 5, 2.3, 5.3, 8.3, 5, 4, 5, 6, 7, 2.3, 5.3, 8.3, 5,
            2.3, 5.3, 8.3, 5, 4, 5, 6, 7, 8.3, 5, 4, 5, 6, 7,
          ],
          type: ["bar"],
        };
      } else if (store.state.selectDate === 2) {
        data = {
          legend: props.echartData.legend,
          color: props.echartData.color,
          xData: [
            "1",
            "2",
            "3",
            "4",
            "5",
            "6",
            "7",
            "8",
            "9",
            "10",
            "11",
            "12",
          ],
          Values: [
            2.3, 5.3, 8.3, 5, 2.3, 5.3, 8.3, 5, 4, 5, 6, 7
          ],
          type: ["bar"],
        };
      } else if (store.state.selectDate === 0) {
        var data = {
          legend: props.echartData.legend,
          color: props.echartData.color,
          xData: [
            "00",
            "01",
            "02",
            "03",
            "04",
            "05",
            "06",
            "07",
            "08",
            "09",
            "10",
            "11",
            "12",
            "13",
            "14",
            "15",
            "16",
            "17",
            "18",
            "19",
            "20",
            "21",
            "22",
            "23",
          ],
          Values: [
            2.3, 5.3, 8.3, 5, 2.3, 5.3, 8.3, 5, 4, 5, 6, 7, 2.3, 5.3, 8.3, 5,
            2.3, 5.3, 8.3, 5, 4, 5, 6, 7,
          ],
          type: ["bar"],
        };
      }
      let dom = document.getElementById(props.echartData.id);
      if (dom) {
        myChart = echarts.init(dom);
        loadlineChart(myChart, data);
      }
    };
    const loadlineChart = (myChart, data) => {
      console.log(data);
      var option = {
        grid: {
          left: "8%", //画布左移位置
          top: "10",
          width: "90%", //画布宽度
          height: "75%", //画布高度
        },
        tooltip: {
          trigger: "axis",
        },
        xAxis: {
          type: "category",
          axisLabel: {
            margin: 10, //X轴标签与轴线之间的距离
            interval: 0, //X轴0强制显示所有标签，1，隔一个显示
            rotate: -60,
            textStyle: {
              color: "#303133", //X轴字体颜色
              fontSize: "12", //X轴字体大小
            },
          },
          axisLine: {
            lineStyle: {
              color: "#dfe4ed", //X轴线颜色
            },
          },
          axisTick: {
            show: false, //X轴刻度线隐藏
          },
          data: data.xData,
        },
        yAxis: {
          type: "value",
          axisLabel: {
            interval: 0, //X轴0强制显示所有标签，1，隔一个显示
            textStyle: {
              color: "#303133", //X轴字体颜色
              fontSize: "12", //X轴字体大小
            },
          },
          axisTick: {
            show: false, //X轴刻度线隐藏
          },
          axisLine: {
            lineStyle: {
              color: "#dfe4ed", //y轴线颜色
            },
          },
          // 网格线
          splitLine: {
            show: true,
            lineStyle: {
              color: ["#dfe4ed"],
              width: 1,
              type: "dotted",
            },
          },
        },
        series: [
          {
            name: data.legend[0],
            data: data.Values,
            type: data.type[0],
            symbolSize: 8,
            barWidth: "10",
            barGap: "20%",
            itemStyle: {
              normal: {
                color: data.color[0],
                lineStyle: {
                  color: data.color[0],
                },
              },
            },
          }
        ],
      };
      myChart.setOption(option);
    };

    return {
      ...toRefs(state),
      getEchart,
      loadlineChart
    };
  },
};
</script>
<style lang="scss" scoped>
.echart-div {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;

  .top-title {
    height: 10%;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .title {
      border-left: 3px solid #5dcbed;
      padding-left: 10px;
    }
  }

  .echart {
    height: 85%;
    width: 100%;

    #myChart {
      width: 100%;
      height: 100%;
    }
  }
}
</style>