當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

Echarts图表没数据的时候，用图片代替暂无数据(图片自适应)

發布時間：2023/12/14 编程问答 33 豆豆

生活随笔收集整理的這篇文章主要介紹了 Echarts图表没数据的时候，用图片代替暂无数据(图片自适应) 小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

有數據時：

沒數據時：

<!DOCTYPE html> <html><head><meta charset="utf-8"><title>Echarts圖表沒數據的時候，用圖片代替暫無數據</title><script src="js/echarts.min.js"></script><script src="js/jquery.min.js"></script> </head><body><div id="main" style="width: 600px;height:400px;"></div><script type="text/javascript">var obj = {aoiBadList: [{ AOI_NO: "1H", AOIBAD_NUM: "250", AOIBAD_RATE: "50" },{ AOI_NO: "2H", AOIBAD_NUM: "200", AOIBAD_RATE: "70" },{ AOI_NO: "3H", AOIBAD_NUM: "160", AOIBAD_RATE: "85" },{ AOI_NO: "4H", AOIBAD_NUM: "120", AOIBAD_RATE: "97" },],}var aoiBad;aoiBad = obj.aoiBadList;//aoiBad = [];var aoiNo = aoiBad.map(x => { return x.AOI_NO });var aoiBadNum = aoiBad.map(x => { return x.AOIBAD_NUM });var aoiBadRate = aoiBad.map(x => { return x.AOIBAD_RATE });// 基于準備好的dom，初始化echarts實例var myChart = echarts.init(document.getElementById('main'));var option;if (aoiBad.length == '0' || aoiBad.length == 0) {// option = {// title: {// text: '暫無數據',// x: 'center',// y: 'center',// textStyle: {// color: '#65ABE7',// fontWeight: 'normal',// fontSize: 16// }// }// }option = {};let elementImg='http://img.mp.itc.cn/upload/20170724/cf678e09eb384401aa616ba134126357_th.jpg';//圖表的容器$('#main').css({'width':600+'px','height':400+'px','border':'1px solid #ccc','display':'flex','justify-content':'center','align-items':'center'});//創建標簽let mainImg = document.createElement("img");main.appendChild(mainImg);$('#main img').css({'width':'auto','height':'auto','max-width':'100%','max-height':'100%'});//加上src屬性$("#main img").attr("src",""+elementImg+""); $('#main div').remove();} else {option = {"grid": {"top": "15%","bottom": "15%","right": "15%","left": "12%"},tooltip: {trigger: 'axis',formatter: function (param) {let str = "";let dada = 0;for (let i = param.length - 1; i >= 0; i--) {if (param[i].seriesName === 'AOI不良率') {param[i].data = param[i].data + "%";}str = str + param[i].marker + param[i].seriesName + " : " + param[i].data + '<br>';}return str},axisPointer: {type: 'cross',label: {backgroundColor: '#6a7985'}}},xAxis: {//data: ["1H", "2H", "3H", "4H", "5H", "6H","7H"],data: aoiNo,axisLine: { show: false },axisTick: {show: false},axisLabel: { //X軸標簽show: true,textStyle: {color: '#65ABE7',//字體顏色fontSize: 12 //字體大小}}},yAxis: [{type: 'value',name: '（數量）',nameTextStyle: {color: "#65ABE7",fontSize: 12,},min: 0,max: 500,interval: 100,axisLabel: {textStyle: {color: '#65ABE7',//字體顏色fontSize: 12 //字體大小}},axisTick: { show: false },axisLine: { show: false }},{type: 'value',name: '（周轉率%）',nameTextStyle: {color: "#65ABE7",fontSize: 12,},min: 0,max: 100,interval: 20,lineStyle: {color: '#65ABE7',},axisLabel: {formatter: '{value} %',textStyle: {color: '#65ABE7',//字體顏色fontSize: 12 //字體大小}},axisTick: { show: false },axisLine: { show: false },splitLine: { //Y軸分隔符show: true,lineStyle: {color: '#65ABE7',}}},],series: [{name: 'AOI不良數量',type: 'bar',stack: '總量',//data: [250, 200, 180, 150, 120, 80,60],data: aoiBadNum,itemStyle: {color: new echarts.graphic.LinearGradient(0, 0, 0, 1,[{ offset: 0, color: '#07eff2' },{ offset: 1, color: '#093553' }])}},{yAxisIndex: 1,//根據右邊軸顯示name: 'AOI不良率',smooth: true,type: 'line',//data: [50, 60, 70, 77,85, 90,97],data: aoiBadRate,itemStyle: {normal: {color: '#5b7fee',label: {show: false, //開啟顯示formatter: '{c}%',position: 'bottom', //在下方顯示textStyle: { //數值樣式color: '#65ABE7',fontSize: 16}}}}}]};}// 使用剛指定的配置項和數據顯示圖表。myChart.setOption(option);</script> </body></html>

總結

以上是生活随笔為你收集整理的Echarts图表没数据的时候，用图片代替暂无数据(图片自适应)的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇：如何把生活过程升级打怪？
下一篇： win10系统怎么禁用某个程序联网，阻止