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

最新推荐文章于 2023-12-21 13:44:03 发布
最新推荐文章于 2023-12-21 13:44:03 发布
阅读量3.9k 收藏 3
点赞数 2
分类专栏： Echarts 文章标签： js javascript
@曾超缘的博客
本文链接：https://blog.csdn.net/weixin_42995083/article/details/109297136
版权

有数据时：

没数据时：

<!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>

 

走到天涯海角
关注
  • 2
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Java后台批量生产echarts图表并保存图片
08-19
主要介绍了Java后台批量生产echarts图表并保存图片,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
eCharts当请求数据为空时将图重绘
qq_44316317的博客
02-07 1006
在echarts中如果请求数据为空时候需要将echarts图进行清空，但是在正常情况下会发现echarts图并没有进行清空，其实setOption中还有第二个参数，如下： //将数据中的第二个参数设置为true就能在请求不到数据的时候将echarts图进行清空 option && chart.setOption(option,true); ...
使用echarts当数据为空时展示空状态占位图
qq_43586648的博客
06-30 6382
在开发echarts的时候我们不得不考虑数据为空的情况，其实有很多种解决办法，我自己是这样做的，有更好的办法请私信我，共同学习。 大概长这样： 创建你的utils: export const setNotopt = (demo,subtext = '暂无数据')=> { var option = { title: { text: ' {a|}', x: 'center', y: 'center',
echarts无数据时显示背景图
曾小超的博客
10-16 1691
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>echarts无数据时显示背景图</title> <!-- 引入 echarts.js --> <script src="js/jquery/1.10.2/jquery.min.js"></script> <script src="j.
echarts无数据时显示暂无数据或者用图片代替
qq_54089372的博客
08-25 3806
echarts无数据处理方法
echarts 中图表实例 和 暂无数据切换，图表不显示问题
Y_Cfeng的博客
08-17 1027
echarts 中 图表无数据于自定义暂无数据实现来回切换，图表不显示问题。最终暂无数据效果，这样就解决了来回切换，图表正常展示问题。
echarts树图图标修改成图片以及自定义图片首次加载不显示的问题的修改＜js＞
笑到世界都狼狈的博客
08-25 5067
首先看一下显示效果，如下图所示： 1.首先修改图片，在option对象中加入 下方代码就可实现图片的修改，但是存在bug symbol:'image://https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=3857605647,1610745729&fm=26&gp=0.jpg',//修改图片 symbolSize: [30, 30],//修改图片大小 2.图片修改后，只有点击节点的时候才会显示图片，刚加载进去不显
Echarts 无数据时显示“暂无数据”
JIA_CHENG的博客
02-13 1561
那我要是连那个「Access From」这几个字都不要了呢，把name也去掉哈哈哈哈哈哈哈，不过这只是文字版的，如果要更换成图片，要另外尝试了，我也没试过～在series中配置「showEmptyCircle」为false就可以了，这里是以pie为例，它就变成这样。当我们的图表遇到接口数据为空或者筛选之后无数据的情况，会显示成这样。就比较丑，所以需要更换成指定的某些文字做提示。通过配置title，曲线救国。那我连这个圆都不想要了呢？
echarts 图表无数据/空数据 展示“暂无数据”
热门推荐
细节怪的博客
08-15 2万+
我们从后端获取数据动态渲染图表时，难免会遇到数据为空的情况（虽然实际应用中这样的bug极少遇到），但考虑周全一点也好，看如何实现吧。
完美解决vue 中多个echarts图表自适应的问题
12-28
看代码吧~ <div class=echarts> 　<IEcharts option=bar ref=echarts>... //echarts自适应 selfAdaption () { const self = this； setTimeout(() => { [removed] = function () { self.$refs.echarts.resize()
可控制管道内动态水流及左侧融合echarts图表（并自适应屏幕）
10-13
适应工业互联网数据大屏，可自行创建管道及动态水流(自适应屏幕),左侧echarts图表自适应，很难在网上找到控制管道水流的完整示例，于是自己耗费几天时间写了一下
Echarts数据可视化图表案例+数据可视化大屏模板
06-21
18个Echarts数据可视化图表案例，每个案例都有代码注释，简单易懂。 还有三套echarts可视化大屏模板，案例下载后在编辑器内打开html，可以根据需求修改样式和数据，学习echarts绘图，也可以制作新的数据可视化大屏。
Echarts 设置 图标 默认平铺 数据为零时绘画
weixin_30295091的博客
06-17 276
好久没写了 最近接了一个统计的功能 以前写的都是一些最基础的统计 废话少说 我先把自己遇到的问题列出来 仅供参考 __________________我是分割线___________________ 这次是做的折线图line和柱状图bar切换的功能 可能泥萌都知道bar堆叠是类似“累加”的效果（反正以前我是不知道，cai） 会出现这种情况（后端数据突然没了。效果不是很明显，请放大图...
echarts“暂无数据”添加图片出不来
最新发布
cxl1191628698的博客
12-21 787
graphic中图片设置的相对路径，echarts报错图片404，显示不出来。点击红色的报错，显示图片格式是json格式。1.找个可在线转为base64的网站，然后将码贴到image后。2.在HTML中引入图片，用JS去获取img元素。
echarts自定义图表
前端与计算机相关知识的分享，博主的qq523235674
03-02 1877
效果：//得到下面线的中心坐标//得到上面线的中心坐标//根据x轴索引为1的数值得到所在的映射宽度*0.1fill: null});return {type: 'group', //上面那条线shape: {},},//中间垂直线shape: {},},//下面那条线shape: {},option = {tooltip: {},title: {text: '血压'},legend: {data: ['血压']},xAxis: {},
Echarts 空数据时展示自定义矢量图
wyz_memory的博客
09-09 695
话不多说，直接贴配置~~ options = { title: { show: isEmpty, // 是否要展示“暂无数据”矢量图 text: ' {a|}', // 写入占位符a，以便后续填充内容 x: 'center', y: 'center', subtext: '暂无数据', // 子标题 itemGap: -10, // 设置主副标题间隔 textStyle: { rich: { a: {
echarts 无数据时显示暂无数据的相关处理（这里用的一张图片来显示，图片提示或文字可根据个人需求）
qq_35030421的博客
12-06 5099
1、首先是一个图表的容器div，在图表div后边跟一个div用来盛放表示“暂无数据”的图片或文字，如下： <div id="noDataImg" style="text-align:center; margin-right:20px; margin-top:10%; display:none;"><img src="${ctx}/mainframe/images/no-d...
echarts 修改y轴name的颜色
曾小超的博客
09-23 1万+
yAxis: [ { type: 'value', name:'（投入/产出）', nameTextStyle:{ color:"#65ABE7", fontSize:12, }, min: 0, ...
在vue中使用echarts实现动态数据展示,以及echarts图表自适应
05-19
使用ECharts实现动态数据展示可以通过以下步骤： 1. 引入ECharts库和Vue-ECharts组件库。 ```javascript import echarts from 'echarts' import 'echarts-gl' import 'vue-echarts/components/ECharts.vue' ``` 2. 在Vue组件中注册ECharts组件。 ```javascript export default { name: 'EChartsDemo', components: { 'v-chart': ECharts }, data() { return { option: {...} // ECharts配置项 } } } ``` 3. 在Vue组件中定义一个定时器，用于动态更新ECharts数据。 ```javascript mounted() { setInterval(() => { // 更新ECharts数据 this.option.series[0].data = [Math.random() * 100, Math.random() * 100, Math.random() * 100, Math.random() * 100] }, 1000) } ``` 至于ECharts图表自适应，可以通过以下方法实现： 1. 在ECharts配置项中使用`grid`属性设置图表布局。 ```javascript option: { grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true }, ... } ``` 2. 在Vue组件中通过CSS样式设置ECharts图表容器的宽度和高度。 ```css .echarts-container { width: 100%; height: 100%; } ``` 3. 在Vue组件的`mounted`钩子函数中监听窗口大小变化事件，并重新渲染ECharts图表。 ```javascript mounted() { window.addEventListener('resize', this.handleResize) }, methods: { handleResize() { this.$refs.chart.resize() } } ```

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值