shujudaping_yidong/src/views/BprogramAmount/BprogramAmount.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: ["#fc8452"],
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
        },
        grid: {
          left: "7%",
          right: "4%",
          bottom: "3%",
          top: "1%",
          containLabel: true,
        },
        xAxis: [
          {
            type: "value",
          },
        ],
        yAxis: [
          {
            type: "category",
            axisTick: {
              show: false,
            },
            data: [
              "单次三个项目",
              "单次两个项目",
              "三次到店用户数",
              "两次到店用户数",
              "美妆购买总用户数",
              "总用户数",
            ],
          },
        ],
        series: [
          {
            name: "数量",
            type: "bar",
            label: {
              show: true,
              position: "inside",
            },
            emphasis: {
              focus: "series",
            },
            itemStyle: {
              normal: {
                label: {
                  show: true, //开启显示数值
                  position: "right", //数值在上方显示
                  textStyle: {
                    //数值样式
                    color: "#9b9ca2", //字体颜色
                    fontSize: 14, //字体大小
                  },
                },
              },
            },
            data: [
              this.listData.three_project,
              this.listData.two_project,
              this.listData.user_three,
              this.listData.user_two,
              this.listData.beauty_products,
              this.listData.total_user,
            ],
          },
        ],
      };

      //数据绑定到表格
      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: 160%;
  height: 300px;
}
</style>