一个页面多图表展示（四个div的方式）

最新推荐文章于 2023-05-31 17:59:58 发布

bagu1904

最新推荐文章于 2023-05-31 17:59:58 发布

阅读量1.1k

点赞数

文章标签： json javascript 后端 ViewUI

原文链接：http://www.cnblogs.com/huchong-bk/p/11550395.html

版权

本文展示了如何在一个页面上使用四个div展示不同的数据图表，并且共用一个图例。通过调整布局，使得页面更加整洁。文中提到了在js代码中处理字符串转浮点型的方法，并预告了后续将分享更优化的效果实现。

摘要由CSDN通过智能技术生成

效果如图所示，一个页面四个div，每个div里面展示相应的数据，因为这种效果会有点麻烦，而且不太雅观我就换了一种写法，一个div里面用四个图表，共用一个图例，先放上这个方式的效果图和源码，后期会再发布一篇文章用来展示新的效果

<!-- 产能 产量 开工率 仓储 -->

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="https://cdn.bootcss.com/echarts/4.2.1-rc1/echarts-en.common.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="js/getParam.js" type="text/javascript" charset="utf-8"></script>
    <script src="js/dark.js" type="text/javascript" charset="utf-8"></script>
    <script src="js/macarons.js" type="text/javascript" charset="utf-8"></script>
    <script src="js/wonderland.js" type="text/javascript" charset="utf-8"></script>
    <script src="js/purple-passion.js" type="text/javascript" charset="utf-8"></script>
    <script src="js/chalk.js" type="text/javascript" charset="utf-8"></script>
    <title></title>
    <style type="text/css">
        #main1{
     
            /* background: #FF0000; */
            display: inline-block;
            margin-left: 12%;
            margin-top: 40px;
        } 
        #main2{
     
             background: #000000;
            display: inline-block;
            margin-right: 12%;
            margin-left: 12%;
        }
        #main3{
     
            display: inline-block;
            background: #008000;
            margin-left: 12%;
            margin-top: 40px;
        }
        #main4{
     
            background: #808080;
            display: inline-block;
            margin-right: 12%;
            margin-left: 12%;
        }
    </style>
</head>
<body>
    <div>
        <select id="sel">
            <option value="macarons">macarons</option>
            <option value="dark">dark</option>
            <option value="wonderland">wonderland</option>
            <option value="chalk">chalk</option>
            <option value="purple-passion">purple-passion</option>
        </select>
        
        <select >
            <option value="all">全部</option>
        </select>
    </div>
    
    
    <div id="main1" style="width: 30%; height: 300px;"></div>
    <div id="main2" style="width: 30%; height: 300px;"></div>
    <div id="main3" style="width: 30%; height: 300px;"></div>
    <div id="main4" style="width: 30%; height: 300px;"></div>
    <script type="text/javascript">
        function load(){
            var myChart1 = echarts.init(document.getElementById("main1"), 'chalk');
            // var myChart2 = echarts.init(document.getElementById("main2"), 'macarons');
            //公司名称数组
            var companyRateOperation =[];
            //产量公司数组,其实这个没必要,先放着
            var companyYield =[];
            //放入X轴的时间数组
            var date=[];
            //全部的产量数组,二维
            var yield=[];
            
            $.ajax({
                url: "",
                dataType: "json",
                success: function(data){
                    
                    //全部的公司名字
                    for(key in data.nameAndRateOperation){
                        companyRateOperation.push(key);
                    }
                    // console.log(c