shujudaping/src/views/productData/productData.vue

<template>
  <div class="chinaMap">
    <div class="map" ref="MapMountNode"></div>
  </div>
</template>

<script>
export default {
  props: ["listData"],
  data() {
    return {};
  },
  methods: {
    //先定义个方法
    myEcharts() {
      //把echarts绑定到显示元素上
      const myChart = this.$echarts.init(this.$refs.MapMountNode);
      //设置图表属性
      //   经营数据
      const option = {
        color: ["#91cc75"],
        title: {
          text: "产品数据",
          // textStyle: {
          //   color: "#6d767e",
          // },
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: [
          {
            type: "value",
          },
        ],
        yAxis: [
          {
            type: "category",
            axisTick: {
              show: false,
            },
            data: ["购买订单数", "购买人数", "购买金额"],
          },
        ],
        series: [
          {
            name: "数量",
            type: "bar",
            label: {
              show: true,
              position: "inside",
            },
            itemStyle: {
              normal: {
                label: {
                  show: true, //开启显示数值
                  position: "right", //数值在上方显示
                  textStyle: {
                    //数值样式
                    color: "#9b9ca2", //字体颜色
                    fontSize: 14, //字体大小
                  },
                },
              },
            },
            emphasis: {
              focus: "series",
            },
            data: [
              this.listData.product_data.order,
              this.listData.product_data.people,
              this.listData.product_data.money,
            ],
          },
        ],
      };

      //数据绑定到表格
      myChart.setOption(option);
      window.addEventListener("resize", function () {
        myChart.resize(); //myChart指自己定义的echartsDom对象
      });
    },
  },
  // 监听父组件传过来的值的变化
  watch: {
    listData: {
      handler(val) {
        this.myEcharts();
      },
    },
  },
  mounted() {
    this.myEcharts();
  },
};
</script>

<style scoped>
.map {
  width: 99%;
  /* height: 280px; */
  height: 20vh;
  /* border: 1px solid saddlebrown; */
}
</style>