echarts柱状图，柱体使用图片显示vue

echarts柱状图，柱体使用图片显示vue

实现效果：

rkcn_bar.js组件：

import * as echarts from 'echarts';
export function RkcnBarChart(id, xData, ydata1,ydata2,ydata3,ydata4) {
    var chartDom = document.getElementById(id);
    var myChart = echarts.init(chartDom);
    var option;
    //xData ydata1 ydata2 ydata3 ydata4都是参数
    const yname = "单位：%";
    const xdata = xData;
    const ydata_cn = ydata1;
    const ydata_mbz = ydata2
    const ydata_ddqz = ydata3
    const ydata_ydjdzs = ydata4
    option = {
        tooltip: {
            show: false
          },
        grid: {
            //与绝对定位相似，top，left，right，bottom 设定是根据上级盒子宽高来计算
            top: "20%",
            left: "16%",
            right: "4%",
            bottom: "16%"
        },
        xAxis: {
            data: xdata,
            nameTextStyle: {
              fontSize: 8
            },
            axisLabel: {
              interval: 0, // 横轴信息全部显示
              rotate: 0, // 角倾斜显示
              textStyle: {
                color: "#ffffff",
                fontSize: 8,
              },
              //x轴文字太长进行换行
              formatter:function(value)  
                    {  
                        var ret = "";//拼接加\n返回的类目项  
                        var maxLength = 4;//每项显示文字个数  
                        var valLength = value.length;//X轴类目项的文字个数  
                        var rowN = Math.ceil(valLength / maxLength); //类目项需要换行的行数  
                        if (rowN > 1)//如果类目项的文字大于5,  
                        {  
                            for (var i = 0; i < rowN; i++) {  
                                var temp = "";//每次截取的字符串  
                                var start = i * maxLength;//开始截取的位置  
                                var end = start + maxLength;//结束截取的位置  
                           //这里也可以加一个是否是最后一行的判断，但是不加也没有影响，那就不加吧  
                                temp = value.substring(start, end) + "\n";  
                                ret += temp; //凭借最终的字符串  
                            }  
                            return ret;  
                        }  
                        else {  
                                   return value;  
                        }  
                    }
            },
            axisLine: {
              show:false
            },
  
            axisTick: {
              show:false
            },
            
            splitArea: {
              show: true,
              areaStyle: {
                color: ["rgba(216,216,216,0)", "rgba(216,216,216,0)"],
              },
            },
          },
          yAxis: {
            name: "单位：吨",
            axisLabel: {
              textStyle: {
                color: "#ffffff",
                fontSize: 7,
              },
            },
            nameTextStyle: {
              align: "right",
              fontSize:6,
              color: "#FFFFFF"
            },
            axisTick: {
              show: false,
            },
  
            splitLine: {
              lineStyle: {
                // 使用深浅的间隔色
                color: "RGBA(32, 43, 82, 0.5)",
              },
            },
            axisLine: {
              lineStyle: {
                width: 10,
              },
            },
          },
  
          series: [{
              type: "pictorialBar",
              label: {
                show: true,
                position: "top",
                textStyle: {
                  color: "#00E5FF",
                  fontSize: 8,
                  fontFamily: "Furore-Regular",
                },
              },
              data: [
                {
				//value使用传过来的ydata_cn
                  value: ydata_cn,
                  //传照片
                  symbol:
                    "image://" +
                    require("@/assets/images/KJYCQ/kjycq_ydjd_rkcn-1.png"),
                    //设置图片的宽度
                  symbolSize: [19, "100%"],
                },
                {
                //value使用传过来的ydata_mbz
                  value: ydata_mbz,
                  symbol:
                    "image://" +
                    require("@/assets/images/KJYCQ/kjycq_ydjd_rkcn-1.png"),
                  symbolSize: [18, "100%"],
                },
                {
                 //value使用传过来的ydata_ddqz
                  value: ydata_ddqz,
                  symbol:
                    "image://" +
                    require("@/assets/images/KJYCQ/kjycq_ydjd_rkcn-1.png"),
                  symbolSize: [18, "100%"],
                },
                {
                //value使用传过来的ydata_ydjdzs
                  value: ydata_ydjdzs,
                  symbol:
                    "image://" +
                    require("@/assets/images/KJYCQ/kjycq_ydjd_rkcn-1.png"),
                  symbolSize: [18, "100%"],
                },
              ],
            }
          ]

    };

    option && myChart.setOption(option);
}

父组件：

 <div id="ydjd-rkcn-chart" style="margin:0 0;width: 100%;height: 215px;"></div>

<script>
//import
import { RkcnBarChart } from "./layout/components/rkcn_bar";
export default {
  components: {
    RkcnBarChart,
  },
  
  mounted() {
    this.getKJYCQydjd();
  },
 methods: {
 // 调用接口接收数据
    getKJYCQydjd(){ 
    // getKJYCQydjdrykc()是自己写的接口 传过来的数据有cn、mbz、ddqz、ydjdzs、khzl
      getKJYCQydjdrykc().then((res) => {
        // console.log(" 月度接单-入库产能",res);
        if(res.flag === "1") {
          var data1 = res.data;
          if(data1.length != 0 ){
          //x轴
            let xd = ["产能", "目标值", "生产中吨位","月度接单总数"];
            //调用js组件
            RkcnBarChart('ydjd-rkcn-chart',xd,data1.cn,data1.mbz,data1.ddqz,data1.ydjdzs);
            this.$message.success("入库产能数据加载成功")
          }else{
            this.$message.success("入库产能为空")
          }     
        } else{
          this.$message.error(res.msg)
        }       
      })
    },
 }
}
</script>