js和echarts封装

古月哥欠666 发布于 2017/08/21 09:35
阅读 153
收藏 0

@小q蹲街 你好,想跟你请教个问题:大神我又来打扰你了 我想请教一下用echarts绘图,我想要四个一样的图就是数据不一样,怎样能生成多个同样的div和option,而且div的id还要不同。我之前有查说可以封装成js,可是我不太懂怎么将div和option要同时封装成一套,用的时候调就行了

加载中
0
小q蹲街
<!DOCTYPE html>

<head>
    <meta charset="utf-8">
    <title>ECharts</title>
    <style>
        .Zoom {
            position: fixed;
            left: 100px;
            top: 50px;
            background-color: royalblue;
            display: block;
            z-index: 9999;
        }
    </style>
</head>

<body>
    <!-- 为ECharts准备一个具备大小(宽高)的Dom -->
    <div id="main"></div>
    <button onclick="Zoom()">放大/缩小</button>

    <div id="ditoBig" onclick="c('seconddiv');" style="height:20px;width:600px;background-color:cornflowerblue;text-align:center;">click</div>

    <div id="seconddiv" hidden style="height:200px;width:600px;background-color:blue;">slidetoggle</div>

    <script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.js"></script>
    <!-- ECharts单文件引入 -->
    <script src="http://echarts.baidu.com/build/dist/echarts.js"></script>
    <script>
        //function c(s){
        //    $("#"+s).slideToggle();
        //}
        //$("#ditoBig").click(function(){
        //    $('#seconddiv').slideToggle();
        //});
        $("#ditoBig").on('click', function () {
            $('#seconddiv').slideToggle();
        })
    </script>
    <script>
        function Zoom() {
            var ZoomArea = $("#mainZoom");
            var main = $('#main');
            //main.hide();
            if (ZoomArea.hasClass('Zoom')) {
                ZoomArea.removeClass('Zoom');
            } else {
                ZoomArea.addClass('Zoom');
            }
        }
    </script>
    <script type="text/javascript">
        // 路径配置
        require.config({
            paths: {
                echarts: 'http://echarts.baidu.com/build/dist'
            }
        });

        // 使用
        require(
            [
                'echarts',
                'echarts/chart/bar' // 使用柱状图就加载bar模块,按需加载
            ],
            function (ec) {
                var option = [{
                    backgroundColor: 'RGB(92,184,92)',
                    title: {
                        text: '某地区蒸发量和降水量',
                        subtext: '纯属虚构'
                    },
                    tooltip: {
                        trigger: 'axis'
                    },
                    legend: {
                        data: ['蒸发量', '降水量']
                    },
                    toolbox: {
                        show: true,
                        feature: {
                            mark: { show: true },
                            dataView: { show: true, readOnly: false },
                            magicType: { show: true, type: ['line', 'bar'] },
                            restore: { show: true },
                            saveAsImage: { show: true }
                        }
                    },
                    calculable: true,
                    xAxis: [
                        {
                            type: 'category',
                            data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
                        }
                    ],
                    yAxis: [
                        {
                            type: 'value'
                        }
                    ],
                    series: [
                        {
                            name: '蒸发量',
                            type: 'bar',
                            data: [2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3],
                            markPoint: {
                                data: [
                                    { type: 'max', name: '最大值' },
                                    { type: 'min', name: '最小值' }
                                ]
                            },
                            markLine: {
                                data: [
                                    { type: 'average', name: '平均值' }
                                ]
                            }
                        },
                        {
                            name: '降水量',
                            type: 'bar',
                            data: [2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3],
                            markPoint: {
                                data: [
                                    { name: '年最高', value: 182.2, xAxis: 7, yAxis: 183, symbolSize: 18 },
                                    { name: '年最低', value: 2.3, xAxis: 11, yAxis: 3 }
                                ]
                            },
                            markLine: {
                                data: [
                                    { type: 'average', name: '平均值' }
                                ]
                            }
                        }
                    ]
                },{
                    backgroundColor: 'RGB(92,18,9)',
                    title: {
                        text: '某地区蒸发量和降水量',
                        subtext: '纯属虚构'
                    },
                    tooltip: {
                        trigger: 'axis'
                    },
                    legend: {
                        data: ['蒸发量', '降水量']
                    },
                    toolbox: {
                        show: true,
                        feature: {
                            mark: { show: true },
                            dataView: { show: true, readOnly: false },
                            magicType: { show: true, type: ['line', 'bar'] },
                            restore: { show: true },
                            saveAsImage: { show: true }
                        }
                    },
                    calculable: true,
                    xAxis: [
                        {
                            type: 'category',
                            data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
                        }
                    ],
                    yAxis: [
                        {
                            type: 'value'
                        }
                    ],
                    series: [
                        {
                            name: '蒸发量',
                            type: 'bar',
                            data: [2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3],
                            markPoint: {
                                data: [
                                    { type: 'max', name: '最大值' },
                                    { type: 'min', name: '最小值' }
                                ]
                            },
                            markLine: {
                                data: [
                                    { type: 'average', name: '平均值' }
                                ]
                            }
                        },
                        {
                            name: '降水量',
                            type: 'bar',
                            data: [2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3],
                            markPoint: {
                                data: [
                                    { name: '年最高', value: 182.2, xAxis: 7, yAxis: 183, symbolSize: 18 },
                                    { name: '年最低', value: 2.3, xAxis: 11, yAxis: 3 }
                                ]
                            },
                            markLine: {
                                data: [
                                    { type: 'average', name: '平均值' }
                                ]
                            }
                        }
                    ]
                },{
                    backgroundColor: 'RGB(9,18,9)',
                    title: {
                        text: '某地区蒸发量和降水量',
                        subtext: '纯属虚构'
                    },
                    tooltip: {
                        trigger: 'axis'
                    },
                    legend: {
                        data: ['蒸发量', '降水量']
                    },
                    toolbox: {
                        show: true,
                        feature: {
                            mark: { show: true },
                            dataView: { show: true, readOnly: false },
                            magicType: { show: true, type: ['line', 'bar'] },
                            restore: { show: true },
                            saveAsImage: { show: true }
                        }
                    },
                    calculable: true,
                    xAxis: [
                        {
                            type: 'category',
                            data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
                        }
                    ],
                    yAxis: [
                        {
                            type: 'value'
                        }
                    ],
                    series: [
                        {
                            name: '蒸发量',
                            type: 'bar',
                            data: [2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3],
                            markPoint: {
                                data: [
                                    { type: 'max', name: '最大值' },
                                    { type: 'min', name: '最小值' }
                                ]
                            },
                            markLine: {
                                data: [
                                    { type: 'average', name: '平均值' }
                                ]
                            }
                        },
                        {
                            name: '降水量',
                            type: 'bar',
                            data: [2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3],
                            markPoint: {
                                data: [
                                    { name: '年最高', value: 182.2, xAxis: 7, yAxis: 183, symbolSize: 18 },
                                    { name: '年最低', value: 2.3, xAxis: 11, yAxis: 3 }
                                ]
                            },
                            markLine: {
                                data: [
                                    { type: 'average', name: '平均值' }
                                ]
                            }
                        }
                    ]
                }];
                // 基于准备好的dom,初始化echarts图表
                //数组控制数据,echarts容器
                newChart(ec,'main',option);
                //newChart(ec,'mainZoom',option1);
            }
        );
</script>
<script>
        function newChart(ec, id, option) {
            var div1 = document.getElementById(id);
            if (div1 != null) {
                for (var i = 0; i < option.length; i++) {
                    $('#' + id).append('<div id="' + id + i + '" style="height:200px;width:600px"></div>');
                    ec.init(document.getElementById(id + i)).setOption(option[i]);
                }
            }
        }
</script>
</body>

我代码写的也很烂,你将就看一下。option是个动态数组,根据数组去动态生成div

古月哥欠666
古月哥欠666
谢谢!至少比较明确告诉我怎么用嘛,麻烦你了,谢谢!!
1
东兴帅哥
东兴帅哥

做这个要去看看 js的class 实现。。   简单思路 是做一个 继承方法 , 使用的时候 new 一个实例出来, 继承方法里面 随即生成个 字符串 作为html id,  html的代码也写在里面 ,直接生成到html里面 ,最后调用echarts 实例化该id

东兴帅哥
东兴帅哥
回复 @古月哥欠666 : 是呀
古月哥欠666
古月哥欠666
可是我有的div的onclick里的参数是上一级div的id,如果都是随机生成的id,我要怎么用啊?你的意思是说拼html吗?
0
小q蹲街
<!DOCTYPE html>

<head>
    <meta charset="utf-8">
    <title>ECharts</title>
    <style>
        .Zoom {
            position: fixed;
            left: 100px;
            top: 50px;
            background-color: royalblue;
            display: block;
            z-index: 9999;
        }
    </style>
</head>

<body>
    <!-- 为ECharts准备一个具备大小(宽高)的Dom -->
    <div id="main" style="height:200px;width:600px"></div>
    <div id="mainZoom" hidden style="height:400px;width:1000px"></div>
    <button onclick="Zoom()">放大/缩小</button>

    <div id="ditoBig" onclick="c('seconddiv');" style="height:20px;width:600px;background-color:cornflowerblue;text-align:center;">click</div>

    <div id="seconddiv" hidden style="height:200px;width:600px;background-color:blue;">slidetoggle</div>

    <script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.js"></script>
    <!-- ECharts单文件引入 -->
    <script src="http://echarts.baidu.com/build/dist/echarts.js"></script>
    <script>
        //function c(s){
        //    $("#"+s).slideToggle();
        //}
        //$("#ditoBig").click(function(){
        //    $('#seconddiv').slideToggle();
        //});
        $("#ditoBig").on('click', function () {
            $('#seconddiv').slideToggle();
        })
    </script>
    <script>
        function Zoom() {
            var ZoomArea = $("#mainZoom");
            var main = $('#main');
            //main.hide();
            if (ZoomArea.hasClass('Zoom')) {
                ZoomArea.removeClass('Zoom');
            } else {
                ZoomArea.addClass('Zoom');
            }
        }
    </script>
    <script type="text/javascript">
        // 路径配置
        require.config({
            paths: {
                echarts: 'http://echarts.baidu.com/build/dist'
            }
        });

        // 使用
        require(
            [
                'echarts',
                'echarts/chart/bar' // 使用柱状图就加载bar模块,按需加载
            ],
            function (ec) {
                var option = {
                    backgroundColor: 'RGB(92,184,92)',
                    title: {
                        text: '某地区蒸发量和降水量',
                        subtext: '纯属虚构'
                    },
                    tooltip: {
                        trigger: 'axis'
                    },
                    legend: {
                        data: ['蒸发量', '降水量']
                    },
                    toolbox: {
                        show: true,
                        feature: {
                            mark: { show: true },
                            dataView: { show: true, readOnly: false },
                            magicType: { show: true, type: ['line', 'bar'] },
                            restore: { show: true },
                            saveAsImage: { show: true }
                        }
                    },
                    calculable: true,
                    xAxis: [
                        {
                            type: 'category',
                            data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
                        }
                    ],
                    yAxis: [
                        {
                            type: 'value'
                        }
                    ],
                    series: [
                        {
                            name: '蒸发量',
                            type: 'bar',
                            data: [2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3],
                            markPoint: {
                                data: [
                                    { type: 'max', name: '最大值' },
                                    { type: 'min', name: '最小值' }
                                ]
                            },
                            markLine: {
                                data: [
                                    { type: 'average', name: '平均值' }
                                ]
                            }
                        },
                        {
                            name: '降水量',
                            type: 'bar',
                            data: [2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3],
                            markPoint: {
                                data: [
                                    { name: '年最高', value: 182.2, xAxis: 7, yAxis: 183, symbolSize: 18 },
                                    { name: '年最低', value: 2.3, xAxis: 11, yAxis: 3 }
                                ]
                            },
                            markLine: {
                                data: [
                                    { type: 'average', name: '平均值' }
                                ]
                            }
                        }
                    ]
                };
                var option1 = {
                    backgroundColor: 'RGB(92,18,9)',
                    title: {
                        text: '某地区蒸发量和降水量',
                        subtext: '纯属虚构'
                    },
                    tooltip: {
                        trigger: 'axis'
                    },
                    legend: {
                        data: ['蒸发量', '降水量']
                    },
                    toolbox: {
                        show: true,
                        feature: {
                            mark: { show: true },
                            dataView: { show: true, readOnly: false },
                            magicType: { show: true, type: ['line', 'bar'] },
                            restore: { show: true },
                            saveAsImage: { show: true }
                        }
                    },
                    calculable: true,
                    xAxis: [
                        {
                            type: 'category',
                            data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
                        }
                    ],
                    yAxis: [
                        {
                            type: 'value'
                        }
                    ],
                    series: [
                        {
                            name: '蒸发量',
                            type: 'bar',
                            data: [2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3],
                            markPoint: {
                                data: [
                                    { type: 'max', name: '最大值' },
                                    { type: 'min', name: '最小值' }
                                ]
                            },
                            markLine: {
                                data: [
                                    { type: 'average', name: '平均值' }
                                ]
                            }
                        },
                        {
                            name: '降水量',
                            type: 'bar',
                            data: [2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3],
                            markPoint: {
                                data: [
                                    { name: '年最高', value: 182.2, xAxis: 7, yAxis: 183, symbolSize: 18 },
                                    { name: '年最低', value: 2.3, xAxis: 11, yAxis: 3 }
                                ]
                            },
                            markLine: {
                                data: [
                                    { type: 'average', name: '平均值' }
                                ]
                            }
                        }
                    ]
                };
                //调用生成函数
                newChart(ec,'main',option);
                newChart(ec,'mainZoom',option1);
            }
        );
</script>
<script>
    function newChart(ec,id,option){
        ec.init(document.getElementById(id)).setOption(option);
    }
</script>
</body>

不知道你要的是不是这种

古月哥欠666
古月哥欠666
这出来后是一个图,我是想就是从后台的过来的数据判断应该有几条数据就绘制几个图,然后一次性加载出好几个的这种的图。我之前做的四个的图是写死的,想改灵活点,因为代码都差不多所以想应该有个办法啥的,但前端只是学过皮毛,想法很美好但做不出来,大神,求带!
返回顶部
顶部