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

有数据时：

没数据时：

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>Echarts图表没数据的时候，用图片代替暂无数据</title><!-- 引入 echarts.js --><script src="js/echarts.min.js"></script><script src="js/jquery.min.js"></script>
</head><body><!-- 为ECharts准备一个具备大小（宽高）的Dom --><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图表没数据的时候，用图片代替暂无数据(图片自适应)相关推荐

Echarts图表及数据刷新问题
1.Echarts切换数据后,原数据还在图表上可以详见ECharts官网对setOption的解释:https://echarts.apache.org/zh/api.html#echartsIns ...
ECharts图表坐标轴数据超出显示范围，以及坐标轴刻度标签显示不全解决方法
1.在使用ECharts图表时,比较常见到坐标轴数据超出显示范围的情况,如下解决办法:添加配置 2.坐标轴刻度标签显示不全就简单描述一下,比如你的数据横坐标有15个,但是默认不会显示全部解决方法 ...
针对Echarts图表存在数据缓存问题的解决方法
在项目中发现,使用一个echarts图表切换不同数据是,有时会莫名的多出数据组. 1.针对这个问题可以在切换事件中清空echarts的画布数据. var myChart = echarts.init( ...
Django中引入echarts图表做数据可视化
本篇博客将详细介绍Django中如何引入echarts库: 从echarts官网中选择所需要的图表的样式选择好样式打开此页面,将红框中代码放入前端页面中需要放入的位置: <script ty ...
echarts图表没有数据的时候，在页面显示暂无数据
if(arr.length=='0'){option = {title: {text: '暂无数据',x: 'center',y: 'center',textStyle: {color: '#65AB ...
echarts图表坐标轴数据标签添加下划线
说在前面
iOS 如果刷新TableViewCell上得数据是空的添加尾部暂无数据提示
其实很简单只需要给tableView底部添加一个View 然后View上添加一个Label就可以了做个衣服判断数组为空的话则给一个这样的View 转载于:https://www.cnblogs. ...
layui在搜索的时候没有数据，在表格中显示暂无数据
layui在搜索的时候没有数据,在表格中显示暂无数据网上有很多教程,都是说要改变table.js,但是我发现不需要,只需要在返回json数据的时候做一下判断即可. php给layui返回json数据 ...
关于Echart图没有数据的时候显示暂无数据思路
Echart 没有数据的时候显示暂无数据思路 : 1. 通过设置 title 就可以处理了 2. 通过判断,后台传给我们的数据是否有值,将 title 这个属性设置成两个,一个是有数据的时候显示的标 ...
echarts 图表导出PDF(带滚动条)/图片导出PDF
echarts 图表导出PDF[带滚动条]/图片导出PDF 效果展示提出问题思考问题解决问题导出PDF 里面的页头中文乱码问题参数说明效果展示提出问题在开发过程中,有需求是将展示出来的 ...

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

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

最新文章

热门文章