| | |
|---|
| | | <!DOCTYPE html> |
|---|
| | | <html> |
|---|
| | | <head> |
|---|
| | | <title>chart.html</title> |
|---|
| | | <title>R1.html</title> |
|---|
| | | <meta http-equiv="Expires" content="0" /> |
|---|
| | | <meta http-equiv="Cache" content="no-cache" /> |
|---|
| | | <meta http-equiv="Pragma" content="no-cache" /> |
|---|
| | |
|---|
| | | <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> |
|---|
| | | <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"> |
|---|
| | | <style> |
|---|
| | | html, body, #main { |
|---|
| | | html, body { |
|---|
| | | margin: 0; |
|---|
| | | padding: 0; |
|---|
| | | width: 100%; |
|---|
| | | height: 100%; |
|---|
| | | overflow: hidden; |
|---|
| | | font-family: "Microsoft YaHei", sansserif; |
|---|
| | | } |
|---|
| | | |
|---|
| | | #main { |
|---|
| | | width: 530px; |
|---|
| | | height: 100%; |
|---|
| | | padding: 10px; |
|---|
| | | box-sizing: border-box; |
|---|
| | | background-color: #023852; |
|---|
| | | } |
|---|
| | | |
|---|
| | | #yulian img:hover { |
|---|
| | | box-sizing: border-box; |
|---|
| | | border-bottom: 2px solid #3DC2E1; |
|---|
| | | } |
|---|
| | | </style> |
|---|
| | | <script src="js/jquery-1.11.3.min.js"></script> |
|---|
| | | <script src="js/echarts.js"></script> |
|---|
| | | <script src="../js/echarts.js"></script> |
|---|
| | | <script> |
|---|
| | | function getQueryString(name) { |
|---|
| | | var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i"); |
|---|
| | |
|---|
| | | return null; |
|---|
| | | } |
|---|
| | | |
|---|
| | | $(function () { |
|---|
| | | init(); |
|---|
| | | }); |
|---|
| | | window.onload = function () { |
|---|
| | | init1(); |
|---|
| | | //init2(); |
|---|
| | | init3(); |
|---|
| | | } |
|---|
| | | |
|---|
| | | function init() { |
|---|
| | | // 基于准备好的dom，初始化echarts图表 |
|---|
| | | var myChart = echarts.init(document.getElementById('main')); |
|---|
| | | |
|---|
| | | function init1() { |
|---|
| | | var c1 = echarts.init(document.getElementById('c1')); |
|---|
| | | var option = { |
|---|
| | | tooltip: { |
|---|
| | | show: true |
|---|
| | | 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", |
|---|
| | | type: 'pie', |
|---|
| | | radius: ['100%', '70%'], |
|---|
| | | center: ['30%', '50%'], |
|---|
| | | itemStyle: { |
|---|
| | | normal: { |
|---|
| | | label: { |
|---|
| | | show: false |
|---|
| | | }, |
|---|
| | | labelLine: { |
|---|
| | | show: false |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | emphasis: { |
|---|
| | | label: { |
|---|
| | | show: true, |
|---|
| | | position: 'center', |
|---|
| | | textStyle: { |
|---|
| | | fontSize: '15', |
|---|
| | | fontWeight: 'bold' |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | data: [ |
|---|
| | | { value: 20, name: '井' }, |
|---|
| | | { value: 4, name: '电' }, |
|---|
| | | { value: 1000, name: '围栏' } |
|---|
| | | ] |
|---|
| | | } |
|---|
| | | ], |
|---|
| | | legend: { |
|---|
| | | data: ['销量'] |
|---|
| | | orient: 'vertical', |
|---|
| | | x: 'right', |
|---|
| | | y: 'center', |
|---|
| | | textStyle: { |
|---|
| | | color: '#fff', |
|---|
| | | fontSize: 14 |
|---|
| | | }, |
|---|
| | | itemHeight: 22, |
|---|
| | | data: ['井', '电', '围栏'] |
|---|
| | | } |
|---|
| | | }; |
|---|
| | | c1.setOption(option); |
|---|
| | | } |
|---|
| | | |
|---|
| | | function init2() { |
|---|
| | | var c2 = echarts.init(document.getElementById('c2')); |
|---|
| | | var option = { |
|---|
| | | title: { |
|---|
| | | 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' |
|---|
| | | }, |
|---|
| | | grid: { |
|---|
| | | left: '0%', |
|---|
| | | top: '0%', |
|---|
| | | right: '0%', |
|---|
| | | bottom: '0%', |
|---|
| | | borderWidth: 0, |
|---|
| | | containLabel: false |
|---|
| | | }, |
|---|
| | | calculable: true, |
|---|
| | | xAxis: [ |
|---|
| | | { |
|---|
| | | type: 'category', |
|---|
| | | data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"] |
|---|
| | | boundaryGap: false, |
|---|
| | | splitLine: { |
|---|
| | | show: false |
|---|
| | | }, |
|---|
| | | axisLabel: { |
|---|
| | | show: true, |
|---|
| | | textStyle: { |
|---|
| | | color: '#fff', |
|---|
| | | fontSize: 14 |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | data: ['2023-10', '2023-11', '2023-12', '2024-01', '2024-02', '2024-03'] |
|---|
| | | } |
|---|
| | | ], |
|---|
| | | yAxis: [ |
|---|
| | | { |
|---|
| | | type: 'value' |
|---|
| | | type: 'value', |
|---|
| | | splitLine: { |
|---|
| | | show: false |
|---|
| | | }, |
|---|
| | | axisLabel: { |
|---|
| | | show: false, |
|---|
| | | textStyle: { |
|---|
| | | color: '#fff', |
|---|
| | | fontSize: 14 |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | ], |
|---|
| | | series: [ |
|---|
| | | { |
|---|
| | | "name": "销量", |
|---|
| | | "type": "bar", |
|---|
| | | "data": [5, 20, 40, 10, 10, 20] |
|---|
| | | name: "", |
|---|
| | | type: 'line', |
|---|
| | | smooth: true, |
|---|
| | | itemStyle: { |
|---|
| | | normal: { |
|---|
| | | areaStyle: { |
|---|
| | | type: 'default' |
|---|
| | | } |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | data: [2080, 1320, 1407, 1720, 1636, 1901] |
|---|
| | | } |
|---|
| | | ] |
|---|
| | | }; |
|---|
| | | c2.setOption(option); |
|---|
| | | } |
|---|
| | | |
|---|
| | | // 为echarts对象加载数据 |
|---|
| | | myChart.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> |
|---|
| | | </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;">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>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: 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> |
|---|
| | | |
|---|
| | | <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;">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;">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;">1000</span> <span>米</span> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | |
|---|
| | | <!--<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;"> |
|---|
| | | |
|---|
| | | </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> |
|---|
| | | </body> |
|---|
| | | </html> |
|---|
