当前位置：首页 > web >正文

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

web 2025/6/30 2:28:45

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 = ydata2const ydata_ddqz = ydata3const ydata_ydjdzs = ydata4option = {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_cnvalue: ydata_cn,//传照片symbol:"image://" +require("@/assets/images/KJYCQ/kjycq_ydjd_rkcn-1.png"),//设置图片的宽度symbolSize: [19, "100%"],},{//value使用传过来的ydata_mbzvalue: ydata_mbz,symbol:"image://" +require("@/assets/images/KJYCQ/kjycq_ydjd_rkcn-1.png"),symbolSize: [18, "100%"],},{//value使用传过来的ydata_ddqzvalue: ydata_ddqz,symbol:"image://" +require("@/assets/images/KJYCQ/kjycq_ydjd_rkcn-1.png"),symbolSize: [18, "100%"],},{//value使用传过来的ydata_ydjdzsvalue: 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、khzlgetKJYCQydjdrykc().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>