web数据可视化(Echarts版)5-1双y轴折现图与柱状图混搭图表(代码仅供参考)

【代码】web数据可视化(Echarts版)5-1双y轴折现图与柱状图混搭图表(代码仅供参考)

m0_63471474

767人浏览 · 2023-05-22 15:34:56

m0_63471474 · 2023-05-22 15:34:56 发布

echarts.js文件下载地址:Apache ECharts

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <script src="echarts.js"></script>
    <title>5-1双y轴折现图与柱状图混搭图表</title>
</head>
<body>
    <div id="main" style="width:600px;height: 400px;"></div>
    <script>
        var mychart = echarts.init(document.getElementById("main")); 
        var option = {
            backgroundColor:'rgba(128,128,128,0.1)',
            kegend:{data:['降水量','蒸发量'],left:'center',top:12},
            xAxis:[
                {
                    type:'category',
                    data:['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月']
                }
            ],
            yAxis:[
                {
                    type:'value',name:'降水量（ml）',
                    min:0,max:250,interval:50,
                    axisLabel:{formatter:'{value}'}
                },
                {
                    type:'value',name:'蒸发量（ml）',
                    min:0,max:200,
                    position:'right',
                    offset:0,
                    axisLine:{lineStyle:{color:'red'}},
                    axisLabel:{formatter:'{value}'}
                },
            ],
            series:[
                {
                    name:'降水量（ml）',type:'bar',
                    itemStyle:{
                        normal:{
                            color:function(params){
                                var colorList = [
                                    '#fe9f4f','#feca2b','#feca2b','#fed728','#c5ee4a',
                                    '#87ee4a','#46eda9','#47e4ed','#4bbbee','#4f8fa8',
                                    '#4586d8','#4f68d8','#f4E001','#F0805A','#26c0C0'];
                                    return colorList[params.dataIndec]
                            },
                        }
                    },
                    data:[50,75,100,150,200,248,220,180,155,130,90,75]
                },
                {
                    name:'蒸发量',type:'line',
                    yAxisIndex:1,
                    itemStyle:{normal:{color:'red'}},
                    data:[58,65,90,120,130,180,150,130,125,110,150,145]
                }
            ]
        };
        mychart.setOption(option);
    </script>
</body>
</html>

魔乐社区

魔乐社区（Modelers.cn) 是一个中立、公益的人工智能社区，提供人工智能工具、模型、数据的托管、展示与应用协同服务，为人工智能开发及爱好者搭建开放的学习交流平台。社区通过理事会方式运作，由全产业链共同建设、共同运营、共同享有，推动国产AI生态繁荣发展。

更多推荐

【计算机视觉】Pixel逐像素分类&Mask掩码分类理解摘要

魔乐社区

计算机视觉（opencv）实战三十二——CascadeClassifier 人脸微笑检测（摄像头）

本文从原理到实现，详细介绍了基于 OpenCV Haar 分类器的人脸与微笑检测：讲解了 Haar 特征和级联检测原理。对代码逐行拆解并解释参数含义。画出完整流程图，帮助理解执行过程。给出了常见问题和优化建议，甚至扩展到深度学习方法。这种方法简单、轻量、实时性好，非常适合入门和小型应用项目。但如果需要更高准确率和更强鲁棒性，建议使用深度学习检测器替代 Haar 分类器。