echarts 象形柱图

实现效果

实现思路

和常规柱图类似，配置项type: "bar" ，只有图片路径需要注意下。

实现代码

customBarCharts() {
      this.$api.dataDeck.manStructure().then(res => {
        var customBar = this.$echarts.init(
          document.getElementById("customBar")
        );
        var img2 = {
          a: "../../../static/girl.png",  //要写静态路径，否则会拿不到图片
          b: "../../../static/lightG.png"
        };

        var img1 = {
          a: "../../../static/boy.png",
          b: "../../../static/lightM.png"
        };

        var value = 1; // >0
        var option = {
          title: {
            text: "",
            subtext: "",
            textStyle: {
              color: "#000",
              fontSize: 16
            },
            left: "5%",
            top: "5%"
          },
          backgroundColor: "#fff",
          grid: {
            left: "10%",
            top: "5%",
            bottom: "10%",
            right: "10%",
            containLabel: true
          },
          tooltip: {
            trigger: "item"
          },
          xAxis: {
            splitLine: {
              show: false
            },
            axisLine: {
              show: false
            },
            axisLabel: {
              show: false
            },
            axisTick: {
              show: false
            }
          },
          yAxis: [
            {
              type: "category",
              inverse: false,
              data: [
                "男  " + (res.data.malePercent * 100).toFixed(2) + "%",
                "女  " + (res.data.femalePercent * 100).toFixed(2) + "%"
              ],
              axisLine: {
                show: false
              },
              axisTick: {
                show: false
              },
              splitLine: {
                show: false,
                lineStyle: {
                  type: "dotted",
                  color: "#000"
                }
              },
              axisLabel: {
                margin: 20,
                textStyle: {
                  color: "#000",
                  fontSize: 14
                }
              }
            }
          ],
          series: [
            {
              tooltip: {
                show: false
              },
              z: 2,
              type: "pictorialBar",
              symbolSize: ["10", "14"],
              symbolRepeat: "fixed",
              data: [
                {
                  value: value,
                  symbol: "image://" + img1.b  //图片前要加’image://‘，否则也不会显示图片
                },
                {
                  value: value,
                  symbol: "image://" + img2.b
                }
              ]
            },
            {
              z: 3,
              type: "pictorialBar",
              symbolSize: ["10", "14"], //上下图大小
              animation: true,
              symbolRepeat: "fixed",
              symbolClip: true,
              symbolPosition: "start",
              symbolOffset: [0, 0],
              data: [
                {
                  value: res.data.maleCount,
                  symbol: "image://" + img1.a
                },
                {
                  value: res.data.femaleCount,
                  symbol: "image://" + img2.a
                }
              ],
              label: {
                normal: {
                  show: true,
                  textStyle: {
                    color: "#000",
                    fontSize: 14
                  },
                  position: "right",
                  offset: [6, 0]
                }
              }
            },
            {
              type: "bar"
            }
          ]
        };
        customBar.setOption(option);
      });
    }