vue-elemen-admin 嵌入echarts 图标数据可视化

我这边使用的echarts图表，是从vue-element-admin中图表地址找的模版: Gallery.这里用的是vue组建引入的方式。

<mainr-chart :msgval1="msgval1"/>

<template>
  <div ref="myChart" :style="{ height: height, width: width }" />
</template>

<script>
import echarts from "echarts";
import resize from "../../components/Charts/mixins/resize";
export default {
  mixins: [resize],
  props: {
    className: {
      type: String,
      default: "chart",
    },
    width: {
      type: String,
      default: "100%",
    },
    msgval1: {
      type: Object,
    },
    height: {
      type: String,
      default: "760px",
    },
  },
  data() {
    return {
      chart: null,
      option: {},
      dateValue: [],
      CityList: [
        "带料停机(h)",
        "故障停机(h)",
        "洗换修模(h)",
        "计划停机(h)",
        "工艺停台(h)",
        "换胶囊(h)",
        "生产等待(h)",
      ],
      CityData: [],
      CityData1: [],
      CityDataSum: ["0/0", "0/0", "0/0", "0/0", "0/0", "0/0", "0/0"],
      lineY: [],
      lineY1: [],
    };
  },
  mounted() {
    this.$nextTick(() => {
      // this.datavalue();
      // this.datavalue1();
      this.initChart();
    });
  },
  watch: {
    msgval1(value) {
      this.CityData = this.msgval1.lhData;
      console.log(this.CityData);
      this.CityData1 = this.msgval1.cxData;
      this.CityDataSum = this.msgval1.lhAcxData;
      this.datavalue();
      this.datavalue1();
      this.initChart();
    },
  },
  created() {},
  methods: {
    initChart() {
      this.chart = echarts.init(this.$refs.myChart);
      this.chart.setOption({
        backgroundColor: "#031054",
        tooltip: {
          trigger: "axis",
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: "line", // 默认为直线，可选为：'line' | 'shadow'
          },
          textStyle: {
            fontSize: 34,
          },
        },
        grid: {
          top: "10%",
          left: "5%",
          right: "12%",
          bottom: "3%",
        },
        yAxis: [
          {
            type: "category",
            inverse: true, //是否反转
            axisTick: {
              show: false,
            },
            axisLine: {
              show: false,
            },
            axisLabel: {
              show: false,
              inside: true,
            },
            data: this.CityList,
          },
          {
            type: "category",
            inverse: true, //是否反转
            axisLine: {
              show: false,
            },
            axisTick: {
              show: false,
            },
            axisLabel: {
              show: true,

              inside: false,
              textStyle: {
                color: "#fff",
                fontSize: "10",
                align: "right",
                padding: [0, -50, 0, 0],
              },
              formatter: function (val, index) {
                var strs = val.split("/"); //字符串数组
                var str = "";
                // for (var i = 0, s; (s = strs[i++]); ) {
                //   //遍历字符串数组
                //   str += s;
                //   if (!(i % 8)) str += "\n"; //按需要求余
                // }
                str = strs[0]+ '   ' + "\n" +strs[1];
                return "{a| " + str + "   }";
                //  return '{a| ' + (val) + '} {f| ' + unit + '}';
              },
              rich: {
                a: {
                  color: "#ffffff",
                  fontSize: 18,
                  fontWeight: "bolder",
                },
                f: {
                  color: "#ffffff",
                  fontSize: 16,
                },
              },
            },
            data: this.CityDataSum,
          },
        ],
        xAxis: [
          {
            show: false,
          },
        ],
        series: [
          {
            name: "",
            type: "bar",
            zlevel: 2,
            barWidth: "20",
            barCategoryGap: "30%" /*多个并排柱子设置柱子之间的间距*/,
            data: this.lineY,
            itemStyle: {
              normal: {
                label: {
                  show: true, //开启显示
                  position: "right", //在上方显示
                  textStyle: {
                    //数值样式
                    color: "#fff",
                    fontSize: 24,
                    fontWeight: "bolder",
                  },
                },
              },
            },
            label: {
              normal: {
                color: "#E7E182",
                show: true,
                position: [0, "-24px"],
                textStyle: {
                  color: "#fff",
                  fontSize: 20,
                  fontWeight: "bolder",
                },
                formatter: function (a, b) {
                  return a.name;
                },
              },
            },
          },
          {
            // name: "",
            type: "bar",
            zlevel: 2,
            barWidth: "20",
            barCategoryGap: "30%" /*多个并排柱子设置柱子之间的间距*/,
            data: this.lineY1,
          },
        ],
      });
    },
    datavalue() {
      for (var i = 0; i < this.CityList.length; i++) {
        var data = {
          name: this.CityList[i],
          value: this.CityData[i],
          itemStyle: {
            normal: {
              barBorderRadius: [10, 10, 10, 10],
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: "rgba(0,205,0,1)",
                },
                {
                  offset: 1,
                  color: "rgba(0,205,0,0.5)",
                },
              ]),
            },
          },
        };
        this.lineY.push(data);
      }
    },
    datavalue1() {
      for (var i = 0; i < this.CityList.length; i++) {
        var data = {
          name: this.CityList[i],
          value: this.CityData1[i],
          itemStyle: {
            normal: {
              barBorderRadius: [10, 10, 10, 10],
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: "rgba(0,197,205,1)",
                },
                {
                  offset: 1,
                  color: "rgba(0,197,205,0.5)",
                },
              ]),
            },
          },
        };
        this.lineY1.push(data);
      }
    },
  },
};
</script>