vue echarts 柱形图封装

vue组件柱形图封装
效果图

在需要页面引入传参数就行

import CylindricalY from '@/components/EchartsModule/CylindricalY.vue'

components: {CylindricalY},
  data() {
    return {
      echartsList: [
        { title: '平台分析', IdName: 'Platform', XTitle: '', YTitle: '' },
        { title: '城市分析', IdName: 'City', XTitle: '数量', YTitle: '城市' },
        { title: '商品品牌分析', IdName: 'ProductBrand', XTitle: '数量', YTitle: '商品品牌' },
        { title: '店铺品牌分析', IdName: 'StoreBrand', XTitle: '数量', YTitle: '店铺品牌' },
      ],
      platformList: [{ key: "pupu", doc_count: 8978, percent: "0.10%", title: "朴朴超市" },
      { key: "ddmaicai", doc_count: 18377, percent: "0.21%", title: "叮咚买菜" },
      { key: "missfresh", doc_count: 23800, percent: "0.27%", title: "每日优鲜" },
      { key: "hema", doc_count: 27003, percent: "0.31%", title: "盒马" },
      { key: "rtmart", doc_count: 99820, percent: "1.15%", title: "大润发" },
      { key: "vanguard", doc_count: 168429, percent: "1.95%", title: "华润万家" },
      { key: "pdj", doc_count: 463149, percent: "5.35%", title: "京东到家" },
      { key: "dmall", doc_count: 743144, percent: "8.58%", title: "多点" },
      { key: "ele", doc_count: 3311648, percent: "38.25%", title: "饿了么" },
      { key: "meituanwm", doc_count: 3793943, percent: "43.82%", title: "美团" },
      ],
      CityList: [
        { key: 110000, doc_count: 996548, percent: "28.84%", title: "北京" },
        { key: 310000, doc_count: 487520, percent: "14.11%", title: "上海" },
        { key: 440300, doc_count: 384457, percent: "11.13%", title: "深圳" },
        { key: 441900, doc_count: 283428, percent: "8.20%", title: "东莞" },
        { key: 120000, doc_count: 260665, percent: "7.54%", title: "天津" },
        { key: 440100, doc_count: 236849, percent: "6.86%", title: "广州" },
        { key: 320100, doc_count: 211581, percent: "6.12%", title: "南京" },
        { key: 330100, doc_count: 209894, percent: "6.08%", title: "杭州" },
        { key: 320500, doc_count: 203020, percent: "5.88%", title: "苏州" },
        { key: 420100, doc_count: 181021, percent: "5.24%", title: "武汉1回答武2汉3武汉" },
      ]
    }
  },

        <div class="echarts-box flexColumn" v-for="item, index in echartsList" :key="index">
          <div class="title-box flexRow">
            <p class="title-name">{{ item.title }}</p>
            <p class="flexRow" @click="OpenRegister">
              <span><svg class="icon" aria-hidden="true">
                  <use xlink:href="#iconiconmore"></use>
                </svg></span>
              <span>全部数据</span>
            </p>
          </div>
          <div class="picture" :id="item.IdName">
            <Ring :ListData="platformList" :id="item.IdName" v-if="index == 0"></Ring>
            <CylindricalY v-else :ListData="CityList" :id="item.IdName" :XName="item.XTitle" :YName="item.YTitle">
            </CylindricalY>
          </div>
        </div>

封装组件代码如下:

<template>
  <div
    class="Ring-box"
    :id="id"
  >

  </div>
</template>

<script>
export default {
  data() {
    return {}
  },
  props: {
    ListData: {
      type: Array,
      default: () => []
    },
    id: {
      type: String,
      default: () => ''
    },
    XName: {
      type: String,
      default: () => '数量'
    },
    YName: {
      type: String,
      default: () => ''
    }
  },
  mounted() {
    var list = [...this.ListData].reverse();
    //取最大值
    var Max = Math.max.apply(Math, list.map(item => { return item.doc_count }));
    this.Drawing(this.id, this.ListTidy(list), this.XName, this.YName, Max);
  },
  methods: {
    //画柱形图
    Drawing(id, list, XName, YName, Max) {
      var colorList = [
        "#c2e3e2",
        "#73deb3",
        "#e689ee",
        "#f7c739",
        "#eb7e65",
        "#83d0ef",
        "#a285d2",
        "#ffab67",
        "#46a9a8",
        "#ffa8cc",
        "#8787C0",
      ];
      var that = this;
      // var chartDom = this.$refs[name];
      var chartDom = document.getElementById(id);
      var myChart = this.$echarts.init(chartDom);
      var option;
      var obj = {};

      var DataX = [];
      var DataY = [];
      //判断是否有数据
      if (list) {
        list.forEach((item, i) => {
          obj[item.key] = item.value;
          DataX.push(item.value);
          DataY.push(item.key)
        });
      }
      var builderJson = {
        all: Max,
        charts: obj,
      };

      var canvas = document.createElement("canvas");
      var ctx = canvas.getContext("2d");
      canvas.width = canvas.height = 200;
      ctx.textAlign = "center";
      ctx.textBaseline = "middle";
      ctx.globalAlpha = 0.08;
      ctx.font = "20px Microsoft Yahei";
      ctx.translate(50, 50);
      ctx.rotate(-Math.PI / 5);

      option = {
        backgroundColor: {
          type: "pattern",
          image: canvas,
          repeat: "repeat",
        },
        tooltip: {
          show: true, // 是否显示
          trigger: "item",
          textStyle: {
            fontSize: 12,
          },
          extraCssText: "padding:6px 10px", // 额外附加到浮层的 css 样式
          formatter: function (value) {
            var { value, name } = value
            value = that.NumberDealWith(value);
            return name + " : " + value;
          },
        },
        grid: {
          top: '50',
          left: '24',
          bottom: '30',
          containLabel: true,
        },
        xAxis: [
          {
            type: "value",
            name: XName,
            data: DataX,
            min: 0,
            // interval: 10,
            axisLabel: {
              formatter: function (value) {
                value = that.NumberDealWith(value);
                return value;
              },
              textStyle: {
                color: "#8c8c8c",
                fontSize: 12,
              },
            },
            axisLine: {
              show: true, //坐标轴显示
              lineStyle: {
                color: "#C1C1C1",
                fontSize: 12,
              },
            },
            axisTick: {
              show: false, //刻度显示
            },
            splitLine: {
              show: true,
            },
          },
        ],
        yAxis: [
          {
            type: "category",
            data: DataY,
            name: YName,
            // nameLocation: 'center',
            // nameGap: 40,
            axisLabel: {
              formatter: function (value, index) {
              //超出文本区域展示...
                if (value[7]) {
                  value = value.slice(0, 6) + '...'
                }
                return value;
              },
              align: "right",
              margin: 8,
              textStyle: {
                color: "#8c8c8c",
                fontSize: 12,
              },
            },
            axisLine: {
              show: true, //坐标轴显示
              lineStyle: {
                color: "#C1C1C1",
                fontSize: 12,
              },
            },
            splitLine: {
              show: false, //y轴里面线
            },

            axisTick: {
              show: false, //刻度显示
            },
          },
        ],
        series: [
          {
            type: "bar",
            stack: "chart",
            z: 3,
            data: DataX,
            label: {
              position: "right",
              show: true,
              normal: {
                show: true,
                position: "right",
                formatter: function (value) {
                  var { value } = value;
                  value = that.NumberDealWith(value);
                  return value;
                },
              },
            },
            itemStyle: {
              color: function (params) {
                var index = params.dataIndex;
                var multiple = parseInt(params.dataIndex / colorList.length);
                if (params.dataIndex >= colorList.length) {
                  index = params.dataIndex - multiple * colorList.length;
                }
                return colorList[index];
              },
              // emphasis: {
              //   // 普通图表的高亮颜色
              //   color: "#009999",
              //   // 地图区域的高亮颜色
              //   // "areaColor": "blue"
              // },
            },
          },
        ],
      };
      option && myChart.setOption(option);

      window.addEventListener('resize', (() => {
        myChart.resize();
      }))
      this.isLoading = false;
    },
    //数据值处理
    NumberDealWith(number) {
      if (number < 9999.99) {
        number = parseFloat(number.toFixed(2));
      } else if (number < 9999.9 * 10000) {
        number = parseFloat((number / 10000).toFixed(1)) + "万";
      } else {
        number = parseFloat((number / 10000 / 10000).toFixed(1)) + "亿";
      }
      return number;
    },
    //数组按需整理
    ListTidy(list) {
      var Larr = [];
      if (list) {
        list.forEach((item) => {
          var obj = {};
          obj.key = item.title;
          obj.value = item.doc_count;
          Larr.push(obj);
        });
      }
      return Larr;
    },
  }
}
</script>
<style>

<style>
.Ring-box{
  width: 100%;
  height: 100%;
}
</style>