12

13693261870

2024-05-14 6c882b9487a8f0c1b55d768c0e58f3ba87b21bf4

 Terra.YaoGan.Web/Terra.YaoGan.Web/chart/R1.html

@@ -46,7 +46,8 @@

        window.onload = function () {
            init1();
            init2();
            //init2();
            init3();
        }

        function init1() {
@@ -55,7 +56,20 @@
                toolbox: {
                    show: false,
                },
                title: {
                    text: '配套设施',
                    left: 'left',
                    show: true,
                    textStyle: {
                        color: '#fff',
                        fontSize: 15
                    }
                },
                calculable: true,
                color: ['#ff7f50', '#87cefa', '#da70d6', '#32cd32', '#6495ed',
                    '#ff69b4', '#ba55d3', '#cd5c5c', '#ffa500', '#40e0d0',
                    '#1e90ff', '#ff6347', '#7b68ee', '#00fa9a', '#ffd700',
                    '#6b8e23', '#ff00ff', '#3cb371', '#b8860b', '#30e0e0'],
                series: [
                    {
                        name: "c1",
@@ -83,12 +97,9 @@
                            }
                        },
                        data: [
                            { value: 15, name: '专业大户' },
                            { value: 23, name: '民宿' },
                            { value: 0, name: '家族农场' },
                            { value: 2, name: '农民合作社' },
                            { value: 0, name: '产业化企业' },
                            { value: 8, name: '其它' }
                            { value: 20, name: '井' },
                            { value: 4, name: '电' },
                            { value: 1000, name: '围栏' }
                        ]
                    }
                ],
@@ -101,7 +112,7 @@
                        fontSize: 14
                    },
                    itemHeight: 22,
                    data: ['专业大户', '民宿', '家族农场', '农民合作社', '产业化企业', '其它']
                    data: ['井', '电', '围栏']
                }
            };
            c1.setOption(option);
@@ -111,13 +122,17 @@
            var c2 = echarts.init(document.getElementById('c2'));
            var option = {
                title: {
                    text: "            接待游客数（人次）",
                    show: true,
                    text: "               接待游客数（人次）",
                    show: false,
                    textStyle: {
                        color: '#41C2E1',
                        fontSize: 16
                    }
                },
                color: ['#87cefa', '#da70d6', '#32cd32', '#6495ed',
                    '#ff69b4', '#ba55d3', '#cd5c5c', '#ffa500', '#40e0d0',
                    '#1e90ff', '#ff6347', '#7b68ee', '#00fa9a', '#ffd700',
                    '#6b8e23', '#ff00ff', '#3cb371', '#b8860b', '#30e0e0'],
                tooltip: {
                    trigger: 'axis'
                },
@@ -164,7 +179,7 @@
                ],
                series: [
                    {
                        name: "接待人次",
                        name: "",
                        type: 'line',
                        smooth: true,
                        itemStyle: {
@@ -180,30 +195,113 @@
            };
            c2.setOption(option);
        }

        function init3() {
            var c3 = echarts.init(document.getElementById('c3'));
            var option = {
                grid: {
                    left: 0,
                    top: 0,
                    right: 0,
                    bottom: 0,
                    borderWidth: 0,
                    containLabel: false
                },
                title: {
                    text: "               治理类型",
                    show: false,
                    textStyle: {
                        color: '#41C2E1',
                        fontSize: 16
                    }
                },
                tooltip: {
                    trigger: 'axis'
                },
                calculable: true,
                xAxis: [
                    {
                        type: 'value',
                        splitLine: {
                            show: false
                        },
                        axisLabel: {
                            show: false,
                            textStyle: {
                                color: '#fff',
                                fontSize: 14
                            }
                        }
                    }
                ],
                yAxis: [
                    {
                        type: 'category',
                        barHeight: 54,
                        data: ['围封管护', '飞播草种', '人为干预'],
                        splitLine: {
                            show: false
                        },
                        smooth: true,
                        label: {
                            normal: {
                                show: true,
                                position: "right",
                                offset: [5, -2],
                                textStyle: {
                                    color: "#fff",
                                    fontSize: 12
                                }
                            }
                        },
                        axisLabel: {
                            show: true,
                            textStyle: {
                                color: '#fff',
                                fontSize: 14
                            }
                        },
                        scale: true,
                        inverse: true,
                        nameTextStyle: {
                            color: '#fff',
                            fontSize: 18
                        }
                    }
                ],
                series: [{
                    type: 'bar',
                    data: [1000, 2000, 1325]
                }]
            };
            c3.setOption(option);
        }
    </script>
</head>
<body>
    <div id="main">
        <div style="height: 35px; width: 100%; float: left; line-height: 35px; border-left: solid 5px #2186C8; background-color: #023852; padding-left: 10px; box-sizing: border-box; border-bottom: dashed 1px #2186C8;">
            <span style="font-size: 20px; color: white; font-weight:600;">乡村产业概况</span>
            <span style="font-size: 20px; color: white; font-weight:600;">北宝力皋图嘎查盐渍化草原修复区</span>
        </div>

        <div style="height: 110px; width: 100%; float: left; background-color: #023852; padding-left: 10px; box-sizing: border-box;">
            <div style=" float: left; box-sizing: border-box; padding: 20px 0 0 20px;">
                <div style="color: white; width: 150px; float: left; box-sizing: border-box;">
                    <span>经济总产值</span><br /><br />
                    <span style="font-size: 25px; color: #41C2E1; font-weight: bolder;">120</span> <span>万元</span>
                    <span>总面积</span><br /><br />
                    <span style="font-size: 25px; color: #41C2E1; font-weight: bolder;">6683</span> <span>亩</span>
                </div>
                <div style="color: white; width: 150px; float: left; box-sizing: border-box;">
                    <span>植被覆盖</span><br /><br />
                    <span style="font-size: 25px; color: #41C2E1; font-weight: bolder;">25</span> <span>亩</span>
                </div>
                <div style="color: white; width: 150px; float: left; box-sizing: border-box;">
                    <span>党组织数</span><br /><br />
                    <span style="font-size: 25px; color: #41C2E1; font-weight: bolder;">1.1</span> <span>个</span>
                    <span>PH</span><br /><br />
                    <span style="font-size: 25px; color: #41C2E1; font-weight: bolder;">8.5-9</span> <span></span>
                </div>
            </div>
        </div>

        <div style="height: 250px; width: 100%; float: left; background-color: #023852; padding-left: 10px; box-sizing: border-box;">
        <div style="height: 200px; width: 100%; float: left; background-color: #023852; padding-left: 10px; box-sizing: border-box;">
            <div id="c1" style="float: left; box-sizing: border-box; padding: 0 35px 0 20px; width: 100%; height: 100%;">
            </div>
        </div>
@@ -211,22 +309,46 @@
        <div style="height: 110px; width: 100%; float: left; background-color: #023852; padding-left: 10px; box-sizing: border-box;">
            <div style=" float: left; box-sizing: border-box; padding: 20px 0px 0 20px;">
                <div style="color: white; width: 150px; float: left; box-sizing: border-box;">
                    <span>民宿总收入</span><br /><br />
                    <span style="font-size: 25px; color: #41C2E1; font-weight: bolder;">1200</span> <span>万元</span>
                    <span>井</span><br /><br />
                    <span style="font-size: 25px; color: #41C2E1; font-weight: bolder;">20</span> <span>口</span>
                </div>
                <div style="color: white; width: 150px; float: left; box-sizing: border-box;">
                    <span>接待游客</span><br /><br />
                    <span style="font-size: 25px; color: #41C2E1; font-weight: bolder;">28</span> <span>万人</span>
                    <span>电</span><br /><br />
                    <span style="font-size: 25px; color: #41C2E1; font-weight: bolder;">5</span> <span>个</span>
                </div>
                <div style="color: white; width: 150px; float: left; box-sizing: border-box;">
                    <span>民宿</span><br /><br />
                    <span style="font-size: 25px; color: #41C2E1; font-weight: bolder;">23</span> <span>家</span>
                    <span>围栏</span><br /><br />
                    <span style="font-size: 25px; color: #41C2E1; font-weight: bolder;">1000</span> <span>米</span>
                </div>
            </div>
        </div>

        <div style="height: 200px; width: 100%; float: left; padding-left: 0px; box-sizing: border-box;">
            <div id="c2" style="width: 110%; height: 120%; margin: 0 0 0 -30px;">
        <!--<div style="height: 150px; width: 100%; float: left; padding-left: 0px; box-sizing: border-box; margin-top: -50px;">
            <div id="c2" style="width: 110%; height: 130%; margin: 0 0 0 -40px;">
            </div>
        </div>-->

        <div style="height: 35px; width: 100%; float: left; line-height: 35px; border-left: solid 5px #2186C8; background-color: #023852; padding-left: 10px; box-sizing: border-box; border-bottom: dashed 1px #2186C8; margin-top: 30px;">
            <span style="font-size: 20px; color: white; font-weight:600;">查布嘎图嘎查</span>
        </div>

        <div style="height: 110px; width: 100%; float: left; background-color: #023852; padding-left: 10px; box-sizing: border-box;">
            <div style=" float: left; box-sizing: border-box; padding: 20px 0 0 20px;">
                <div style="color: white; width: 150px; float: left; box-sizing: border-box;">
                    <span>总面积</span><br /><br />
                    <span style="font-size: 25px; color: #41C2E1; font-weight: bolder;">4325</span> <span>亩</span>
                </div>
                <div style="color: white; width: 150px; float: left; box-sizing: border-box;">
                    &nbsp;
                </div>
                <div style="color: white; width: 150px; float: left; box-sizing: border-box;">
                    <span>土壤类型</span><br /><br />
                    <span style="font-size: 25px; color: #41C2E1; font-weight: bolder;">风沙土</span> <span></span>
                </div>
            </div>
        </div>
        <div style="height: 180px; width: 100%; float: left; padding-left: 10px; margin-top: -50px; box-sizing: border-box; border: 0px solid red;">
            <div id="c3" style="width: 100%; height: 150%; margin: 0 0 0 0px;">
            </div>
        </div>
    </div>