代码拉取完成，页面将自动刷新
<!DOCTYPE html>
<html lang="en">
<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">
<title>任城统计大数据平台</title>
<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<link rel="stylesheet" href="//at.alicdn.com/t/font_1460471_28h1ax8hlh.css">
<link rel="stylesheet" href="./css/base.css">
<!-- 引入组件库 -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
<!--引入echarts-->
<script src='js/echarts.min.js'></script>
</head>
<body>
<div id="canvas">
<div class="work-header over">
<a href="./index.html" class="work-header__logo flf" style="display: block;">
<img src="./img/logo.png" style="display:block;height: 100%;" alt="">
</a>
<div class="work-header__position">
</div>
<div class="work-header__user flr">
<div class="work-header__message over">
<i class="flf iconfont icon-xiaoxi1"></i>
<p class="flf work-header__message__button">消息</p>
</div>
<div class="work-header__my">
<el-dropdown>
<img src="./img/head.jpg" alt="">
<el-dropdown-menu slot="dropdown">
<el-dropdown-item>用户信息</el-dropdown-item>
<el-dropdown-item>用户信息</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</div>
<div class="work-header__logout">
<i class=" iconfont icon-tuichu1"></i>
</div>
</div>
</div>
<div class="work-content">
<el-row :gutter="20">
<el-col :span="4" class="work-content__menu">
<el-card class="box-card">
<h4><b>系统管理</b><span> (任城平台)</span></h4>
<a :href="info.href" style="display: block;overflow: hidden;text-decoration: none;"
:class="['work-content__menu__list',info.icon == 'icon-symmetric' ? 'work-content--active' : '']"
v-for="info in menus" :key="info.icon">
<!-- <a :href="info.href" style="display: block;overflow: hidden;text-decoration: none;"> -->
<i :class="['iconfont', info.icon]"></i>
<p class="work-content__article">{{info.name}}</p>
<i class="work-content__details iconfont icon-ic_arrow_r"></i>
<!-- </a> -->
</a>
</el-card>
</el-col>
<el-col :span="20" class="work-content__body">
<div class="work-content__nav">
<a style="text-decoration: none;"><i
class="iconfont icon-fanhui work-content__nav__back"></i></a>
<p class="work-content__nav__menu work-content__nav__menu--active">对地对标</p>
</div>
<el-scrollbar style="height: calc(100% - 65px);overflow:hidden;">
<div class='technology'>
<!--新一代产业标题顶部-->
<div class='technologyTitle'>
<p>对比数据</p>
<i></i>
</div>
<!---->
<div class='OftheStandard'>
<div>
<div>
<p>济宁:</p>
<span>全市生产总值实现2121亿元全市生产总值实现2121亿元全市生产总值实现2121亿元全市生产总值实现2121亿元全市生产总值实现2121亿元全市生产总值实现2121亿元全市生产总值实现2121亿元全市生产总值实现2121亿元全市生产总值实现2121亿元全市生产总值实现2121亿元</span>
</div>
<div>
<p>徐州:</p>
<span>全市生产总值实现2121亿元全市生产总值实现2121亿元全市生产总值实现2121亿元全市生产总值实现2121亿元全市生产总值实现2121亿元全市生产总值实现2121亿元全市生产总值实现2121亿元全市生产总值实现2121亿元全市生产总值实现2121亿元全市生产总值实现2121亿元</span>
</div>
</div>
</div>
<div class='introduce'>
<ul>
<li>
<img src='img/in.png'>
<div>
<p>常驻人口</p>
<span>比徐州少<i>39万</i>人口左右</span>
</div>
</li>
<li>
<img src='img/inn.png'>
<div>
<p>GDP增速</p>
<span>比徐州低<i>2.0个</i>百分点</span>
</div>
</li>
<li>
<img src='img/innn.png'>
<div>
<p>固定资产投资</p>
<span>比徐州增速低<i>0.9个</i>百分比</span>
</div>
</li>
<li>
<img src='img/innnn.png'>
<div>
<p>财政收入</p>
<span>比徐州少<i>32.93</i>亿元</span>
</div>
</li>
<li>
<img src='img/innnnn.png'>
<div>
<p>城镇居民收入</p>
<span>年人均可支配收入比徐州高<i>334元</i></span>
</div>
</li>
<li>
<img src='img/innnnnn.png'>
<div>
<p>生产总值</p>
<span>2572.5亿元相当于徐州的<i>72%</i>差距为969.25亿元</span>
</div>
</li>
</ul>
</div>
</div>
<div class='technology economic'>
<!--新一代产业标题顶部-->
<div class='technologyTitle economic'>
<p>主要经济指标十年变化</p>
<i></i>
</div>
<div class='economics' id="growth0"></div>
<div class='economics' id="growth1"></div>
<div class='economics' id="growth2"></div>
<div class='economics' id="growth3"></div>
</div>
<div class='industrial'>
<div class='technology economic'>
<!--新一代产业标题顶部-->
<div class='technologyTitle economic economic12'>
<p>工业经济</p>
<i></i>
</div>
<div class='industrialeconomic'>
<div>
<div class='economics' id="industrial"></div>
<i class='industrialeconomicp'>
<p>济宁市</p>
<p>技改投资增幅</p>
</i>
</div>
<div>
<div class='economics' id="industrial1"></div>
<i class='industrialeconomicp'>
<p>徐州市</p>
<p>技改投资增幅</p>
</i>
</div>
</div>
</div>
<div class='technology economic economic12'>
<!--新一代产业标题顶部-->
<div class='technologyTitle economic'>
<p>双招双引</p>
<i></i>
</div>
<div class=''>
<div class='shuzngyin' id="industria2"></div>
</div>
</div>
<div class='technology economic economic12'>
<!--新一代产业标题顶部-->
<div class='technologyTitle economic'>
<p>园区经济</p>
<i></i>
</div>
<div class='technologyTitle1'>
<el-table :data="tableData" stripe style="width: 100%">
<el-table-column align="center" prop="date" label="指标" width="180">
</el-table-column>
<el-table-column align='center' prop="name" label="济宁市" width="180">
</el-table-column>
<el-table-column align="center" prop="address" label="徐州市">
</el-table-column>
</el-table>
</div>
</div>
<div class='technology economic economic12'>
<!--新一代产业标题顶部-->
<div class='technologyTitle economic'>
<p>乡村振兴</p>
<i></i>
</div>
<div class=''>
<div class='economicsgr' id="growth4"></div>
</div>
</div>
</div>
</el-scrollbar>
</el-col>
</el-row>
</div>
</div>
</body>
<style>
/* base */
* {
margin: 0px;
padding: 0px;
font-style: normal;
}
.over {
overflow: hidden;
}
.flf {
float: left;
}
.flr {
float: right;
}
body {
background: #e9ecf3;
font-size: 18px;
}
.work-header {
height: 70px;
width: 100%;
background: #2184d8;
}
/* 头部 */
.work-header {
overflow: hidden;
}
.work-header__message {
line-height: 70px;
;
}
.work-header__logo {
display: block;
height: 40px;
margin-top: 15px;
margin-left: 80px;
}
.work-header__position {
float: left;
line-height: 70px;
margin-left: 7%;
color: white;
font-size: .9rem;
}
.work-header__position a {
color: white;
}
.work-header__user {
float: right;
margin-right: 24px;
}
.work-header__user p {
float: left;
margin: 0px 6px;
}
.work-header__user i {
float: left;
line-height: 70px;
color: white;
margin: 0px 6px;
}
.work-header__message {
float: left;
height: 100%;
padding: 0px 10px;
cursor: pointer;
transition: .3s all;
}
.work-header__message:hover {
background: #1a74c0;
}
.work-header__my {
float: left;
height: 100%;
padding: 0px 10px;
cursor: pointer;
transition: .3s all;
}
.work-header__my:hover {
background: #1a74c0;
}
.work-header__my img {
width: 40px;
height: 40px;
border-radius: 1000px;
margin-top: 15px;
}
.work-header__logout {
float: left;
height: 100%;
padding: 0px 10px;
cursor: pointer;
transition: .3s all;
}
.work-header__logout:hover {
background: #1a74c0;
}
.work-header__message__button {
font-size: 1rem;
color: white;
}
/* 工作区 */
.work-content {
padding: 24px;
}
.work-content__menu h4 {
padding-top: 16px;
font-size: 1.1rem;
line-height: 35px;
margin-left: 10px;
}
.work-content__menu span {
text-indent: 1em;
font-size: .5rem;
}
.work-content .box-card .work-content__menu__list {
cursor: pointer;
overflow: hidden;
transition: .3s all;
padding: 15px 10px;
border-radius: 3px;
margin-top: 12px;
}
.work-content .iconfont {
color: #485a6a;
font-size: 1.8rem;
float: left;
line-height: 25px;
display: block;
transition: .3s all;
}
.work-content p {
line-height: 25px;
font-size: .8rem;
color: #485a6a;
float: left;
}
.work-content .work-content__article {
margin-left: 16px;
}
.work-content .work-content__details {
float: right;
}
.work-content .box-card .work-content__menu__list:hover {
background: #1a74c0;
}
.work-content .box-card .work-content__menu__list:hover p {
color: white;
}
.work-content .box-card .work-content__menu__list:hover .iconfont {
color: white;
}
.work-content--active {
background: #1a74c0;
}
.work-content--active .iconfont {
color: white;
}
.work-content--active p {
color: white;
}
/* 主体 */
.work-content__body__banner {
width: 100%;
}
.work-content__body h5 {
color: #2184d8;
font-weight: bold;
font-size: 1.4rem;
}
.work-content__body__substance {
margin-top: 16px;
}
.work-content__body__text {
margin: 10px;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
}
.work-content__body__card__box {
width: 100%;
/* margin: 0px !important; */
}
.work-content__body__card__info {
margin-top: 20px;
overflow: hidden;
cursor: pointer;
position: relative;
padding-top: 5px;
padding-bottom: 5px;
}
.work-content__body__card__warp {
border-radius: 3px;
overflow: hidden;
box-shadow: 0px 0px 4px 2px #e2e2e2;
}
.work-content__body__card__title {
position: absolute;
bottom: 0px;
left: 0px;
}
.work-content__body__card__title p {
line-height: 35px;
text-indent: 1em;
color: white;
padding-right: 12px;
position: relative;
font-size: .8rem;
z-index: 2;
}
.work-content__body__card__title .back {
position: relative;
width: 100%;
}
.work-content__body__card__title .shadow {
position: absolute;
background: black;
height: 35px;
width: 100%;
opacity: .5;
z-index: 1;
}
.work-content__body__card__message {
background: white;
overflow: hidden;
padding: 20px;
padding-bottom: 25px;
}
.work-content__body__card__message p {
font-size: .9rem;
color: #868686;
}
.work-content__body {
height: 100%;
}
/* 人物 */
.work-content__body__detail {
position: relative;
}
.work-content__body__detail .backs {
width: 100%;
display: block;
}
.work-content__body__title {
position: absolute;
padding-top: 8px;
width: 90%;
top: 0px;
left: 5%;
padding-bottom: 5px;
border-bottom: 2px solid #dcdcdc;
overflow: hidden;
}
.work-content__body__title .yellow {
float: left;
width: 5px;
height: 20px;
margin-top: 5px;
background: yellow;
}
.work-content__body__title p {
float: left;
line-height: 30px;
padding-left: 12px;
color: white;
font-size: .8rem;
}
.work-content__body__center {
overflow: hidden;
position: absolute;
top: 45px;
width: 100%;
left: 0px;
}
.work-content__body__header {
float: left;
width: 40%;
}
.work-content__body__header img {
width: 60%;
border-radius: 1000px;
margin-top: 15%;
margin-left: 20%;
display: block;
}
.work-content__body__message {
float: left;
width: 60%;
margin-top: 7%;
}
.work-content__body__message p {
width: 90%;
color: white;
font-size: .79rem;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
/* cross */
.work-content__menu .el-card__body {
padding: 14px;
}
.el-scrollbar__wrap {
overflow-x: hidden;
}
.work-content .el-row,
.work-content .el-row .work-content__menu,
.work-content .el-row .work-content__menu .box-card {
height: 100%;
}
/*新一代技术*/
.technology {
background: #fff;
padding: 20px 30px;
overflow: hidden;
}
/*标题*/
.technologyTitle {
height: 20px;
border-bottom: 1px solid #e3dfe0;
font-size: 15px;
color: #333;
padding-bottom: 17px;
position: relative;
}
.technologyTitle p {
float: left;
width: 104px;
text-align: center;
margin-right: 60px;
font-size: 16px;
}
.technologyTitle i {
width: 104px;
position: absolute;
bottom: -2px;
height: 3px;
left: 0;
background: #2184d7;
}
.Fournew {
width: 100%;
height: 300px;
}
.FournewList {
overflow: hidden;
}
.FournewList ul {
overflow: hidden;
}
.FournewList ul li {
float: left;
width: 23%;
margin-left: calc(8%/3);
background: #fff;
box-shadow: 3px 10px 10px #fbfbfb;
border: 1px solid #f5f5f5;
margin-top: 30px;
border-radius: 10px;
padding: 20px;
box-sizing: border-box;
}
.FournewList ul li:nth-child(4n+1) {
margin-left: 0;
}
.FournewList img {
float: left;
}
.FournewList ul li>div {
float: right;
width: calc(100% - 90px);
}
.FournewList div div {
float: left;
width: 50%;
text-align: center;
overflow: hidden;
margin-top: 20px;
}
.FournewList p {
float: none;
color: #f56c73;
font-size: 20px;
font-weight: 900;
}
.FournewList span {
display: block;
color: #999;
font-size: 12px;
margin-top: 10px;
}
.FournewList h6 {
font-size: 20px;
}
ul,
ol {
list-style: none;
}
/*经济占比*/
.economic {
margin-top: 20px;
}
.economic .technologyTitle p {
width: auto;
}
.economic .technologyTitle i {
width: 190px;
}
.economics {
width: 50%;
height: 300px;
float: left;
margin-top: 50px;
}
/*对地对标*/
.OftheStandard>div {
overflow: hidden;
}
.OftheStandard div div {
float: left;
width: 50%;
margin-top: 20px;
}
.OftheStandard p {
float: left;
width: 50px;
font-size: 18px;
color: #2480d3;
text-align: right;
}
.OftheStandard span {
float: left;
width: calc(90% - 50px);
display: block;
color: #333;
font-size: 14px;
margin-left: 10px;
}
.introduce ul {
overflow: hidden;
margin-top: 15px;
}
.introduce ul li {
width: calc(100% / 6);
float: left;
}
.introduce img {
float: left;
}
.introduce div {
float: left;
width: calc(100% - 90px);
}
.introduce p {
float: none;
font-size: 20px;
color: #333;
margin-top: 10px;
}
.introduce span {
color: #333;
font-size: 12px;
}
.introduce i {
color: #ff8e51;
}
.introduce ul li:nth-child(2) i {
color: #01a894;
}
.introduce ul li:nth-child(3) i {
color: #2382ee;
}
.introduce ul li:nth-child(4) i {
color: #ff916d;
}
.introduce ul li:nth-child(5) i {
color: #639fff;
}
.introduce ul li:nth-child(6) i {
color: #51ccc9;
}
/*工业*/
.industrial {
overflow: hidden;
}
.industrial>div {
width: 45%;
float: left;
margin-left: calc(10% - 120px);
}
.industrial>div:nth-child(2n+1) {
margin-left: 0;
}
.industrial .economic .technologyTitle i {
width: 90px;
}
.industrial .economics {
float: none;
margin: 0 auto;
}
.industrialeconomic>div {
float: left;
width: 50%;
}
.industrialeconomic p {
text-align: center;
float: none;
}
.industrialeconomicp {
position: relative;
margin-top: -50px;
display: block;
}
.shuzngyin {
width: 100%;
height: 300px;
}
/*园区*/
#tb2 tr {
background-color: #fff0f5;
width: 100%;
height: 30px;
line-height: 30px;
}
/*奇数行样式*/
#tb2 tr:nth-child(odd) {
background-color: #f9f9f9;
}
#tb2 tr {
background-color: #fff;
-webkit-transition: all .3s;
-moz-transition: all .3s;
-ms-transition: all .3s;
-o-transition: all .3s;
transition: all .3s;
font-size: 12px;
}
/*奇数行样式*/
#tb2 tr:nth-child(odd) {
background-color: #f9f9f9;
-webkit-transition: all .3s;
-moz-transition: all .3s;
-ms-transition: all .3s;
-o-transition: all .3s;
transition: all .3s;
border-top: 1px solid #e5e5e5;
border-bottom: 1px solid #e5e5e5;
}
#tb2 tr td,
#tb2 tr,
tr,
tr td {
border: none;
width: 30%;
}
.technologyTitle1 {
height: 300px;
}
#tb2 tr:nth-child(odd) td {
border-top: 1px solid #e5e5e5;
border-bottom: 1px solid #e5e5e5;
}
#tb1 {
border: none;
width: 100%;
text-align: center;
font-size: 12px;
}
#tb1 tr {
line-height: 50px;
}
.economicsgr {
width: 100%;
height: 300px;
}
</style>
<script>
window.onload = function () {
$(".work-content").height($(window).height() - 120)
}
window.onresize = function () {
$(".work-content").height($(window).height() - 120)
}
new Vue({
el: "#canvas",
data: {
names: "",
people: {
where: []
},
menus: [{
icon: "icon-ic_project",
name: "十强产业",
href: "./shiqiang.html"
}, {
icon: "icon-tubiaozhuzhuangtu",
name: "数据查询",
href: "./shujuchaxun.html"
}, {
icon: "icon-shishijiance",
name: "四新监测",
href: "./sixinjiance.html"
}, {
icon: "icon-fanghu",
name: "重大项目监测",
href: "./zhongdianxiangmu.html"
}, {
icon: "icon-symmetric",
name: "对地对标",
href: "./work.html"
}, {
icon: "icon-gaosugongluyunyingshujufenxi",
name: "街道概览",
href: "./street.html"
}, {
icon: "icon-yuanshigongzuozhan",
name: "工作站概览",
href: "./work.html"
}, {
icon: "icon-dizhenjiance",
name: "学习教育",
href: "./xuexi.html"
}],
tableData: [{
date: '省级以上开发区(个)',
name: '12',
address: '12'
}, {
date: '省级以上开发区(个)',
name: '12',
address: '12'
}, {
date: '一般公共预算收入(亿元)',
name: '12',
address: '12'
}]
},
mounted: function () {
var _this = this
// if (!getQueryVariable("name")) {
// history.go(-1)
// } else {
// _this.names = unescape(getQueryVariable("name"))
// $.ajax({
// url: "./map/people.json",
// success: function (req) {
// _this.people = req.filter(function (s) {
// return new RegExp(_this.names.substr(0, _this.names.length -
// 3)).test(s.lab)
// })[0]
// }
// })
// }
function getQueryVariable(variable) {
var query = window.location.search.substring(1);
var vars = query.split("&");
for (var i = 0; i < vars.length; i++) {
var pair = vars[i].split("=");
if (pair[0] == variable) {
return pair[1];
}
}
return (false);
}
//点击切换图标
$('.technologyTitle').on('click', ' p', function () {
$('.technologyTitle i').css({
'left': $(this).index() * 104 + 60 * $(this).index(),
'transition': '1s'
})
})
//
//增速
function zengsu(text1, text2, text3, text4, text5, text6, text7, color, colorq, colorr, coloo,
data1, data2, data3, data4) {
option = {
title: {
text: text7
},
tooltip: {
trigger: 'axis',
axisPointer: { // 坐标轴指示器，坐标轴触发有效
type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
},
formatter: function (params) {
var tar;
for (var i = 0; i < params.length; i++) {
if (params[i].value != '') {
tar = params[i]
break
}
}
return tar.name + ' : ' + tar.value;
}
},
legend: {
data: [text1, text2, text3, text4]
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: {
type: 'category',
splitLine: {
show: false
},
data: ['2008年', '2012年', '2013年', '2014年', '2015年', '2016年', '2017年', '2018年']
},
yAxis: [{
type: 'value',
name: text5,
position: 'left',
interval: 200,
},
{
type: 'value',
name: text6,
position: 'right',
interval: 5,
},
],
series: [{
name: text1,
type: 'bar',
itemStyle: {
normal: {
color: color,
}
},
label: {
normal: {
show: false,
position: 'top'
}
},
data: data1
},
{
name: text2,
type: 'bar',
itemStyle: {
normal: {
color: colorq,
}
},
label: {
normal: {
show: false,
position: 'bottom'
}
},
data: data2
},
{
name: text3,
type: 'line',
symbol: 'image://img/yuandia.png', //设定为实心点
symbolSize: 20, //设定实心点的大小
color: colorr,
label: {
normal: {
show: false,
position: 'bottom',
color: colorr
}
},
data: data3
},
{
name: text4,
type: 'line',
symbol: 'image://img/yuandia.png', //设定为实心点
symbolSize: 20, //设定实心点的大小
color: coloo,
label: {
normal: {
show: false,
position: 'bottom',
color: coloo
}
},
data: data4
}
]
};
return option
}
//工业有点问题
function gongye(color, color1, nub, nub1) {
option = {
tooltip: {
trigger: 'item',
formatter: "{a} <br/>{b}: {c} ({d}%)"
},
color: [color, color1],
legend: {
orient: 'vertical',
x: 'left',
data: ['山推', '徐工']
},
series: [{
name: '',
type: 'pie',
radius: ['50%', '70%'],
avoidLabelOverlap: false,
label: {
normal: {
show: true,
position: 'center',
formatter: '29%',
textStyle: {
fontSize: 15,
color: '#ee6227'
}
},
emphasis: {
show: true,
textStyle: {
fontSize: '10',
}
}
},
labelLine: {
normal: {
show: false
}
},
data: [{
value: nub,
name: '山推'
},
{
value: nub1,
name: '徐工'
},
]
}]
}
return option
}
//
var myChart5 = echarts.init(document.getElementById('industrial'));
myChart5.setOption(gongye('#efefef', '#ef6028', 80, 44));
var myChart6 = echarts.init(document.getElementById('industrial1'));
//渲染
myChart6.setOption(gongye('#efefef', '#2382f0', 0.8, 21));
//双招
function shuangzhao(text, text1, data1, data2) {
var option1 = {
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
legend: {
data: [text, text1]
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: {
type: 'value',
boundaryGap: [0, 0.01]
},
yAxis: {
type: 'category',
data: ['引进投资总额5亿元以上项目', '国家高新技术企业数量', '省级以上人才平台载体']
},
series: [{
name: '济宁市',
type: 'bar',
data: data1,
itemStyle: {
normal: {
color: '#ff8a8a',
}
}
},
{
name: '徐州市',
type: 'bar',
data: data2,
itemStyle: {
normal: {
color: '#76b1ff',
}
}
}
]
}
return option1
}
//乡村振兴
function zhengxing(text1, text2, text3, color, colorq, data1, data2) {
option = {
tooltip: {
trigger: 'axis',
axisPointer: { // 坐标轴指示器，坐标轴触发有效
type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
},
formatter: function (params) {
var tar;
for (var i = 0; i < params.length; i++) {
if (params[i].value != '') {
tar = params[i]
break
}
}
return tar.name + ' : ' + tar.value;
}
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: {
type: 'category',
splitLine: {
show: false
},
data: [text1, text2]
},
yAxis: {
type: 'value',
name: text3,
position: 'left',
interval: 200,
},
series: [{
name: text1,
type: 'bar',
itemStyle: {
normal: {
color: color,
}
},
label: {
normal: {
show: true,
position: 'top'
}
},
data: data1
},
{
name: text2,
type: 'bar',
itemStyle: {
normal: {
color: colorq,
}
},
label: {
normal: {
show: true,
position: 'top'
}
},
data: data2
}
]
};
return option
}
//GDP
var myChart2 = echarts.init(document.getElementById('growth0'));
myChart2.setOption(zengsu('任城总量', '徐州总量', '任城增长', '徐州增长', '总量(亿元)', '增长(%)', 'GDP', '#ff8a8a',
'#76b1ff', '#229ff1', '#f3a012', [200, 300, 400, 500, 600, 700, 800, 900], [100,
200, 200, 400, 200, 100, 200, 300, 600
], [50, 60, 400, 100, 200, 22, 33, 55.777], [22, 333, 555, 666, 777, 111, 222, 222,
221
]));
//一般公共预算
var myChart3 = echarts.init(document.getElementById('growth1'));
myChart3.setOption(zengsu('任城总量', '徐州总量', '任城增长', '徐州增长', '总量(亿元)', '增长(%)', '一般公共预算收入',
'#f7652a', '#f8020f', '#ff7f8f', '#b7aa97', [100, 200, 300, 400, 500, 600, 700, 800,
900
], [100, 300, 200, 340, 500, 100, 600, 800, 300], [100, 100, 100, 300, 200, 600,
100, 700, 700
], [10, 200, 300, 400, 500, 600, 700, 800, 900]));
//固定资产投资
var myChart4 = echarts.init(document.getElementById('growth2'));
myChart4.setOption(zengsu('任城总量', '徐州总量', '任城增长', '徐州增长', '总量(亿元)', '增长(%)', '固定资产投资',
'#ffdd4b', '#78a668', '#229ff1', '#f3a012', [100, 200, 300, 100, 500, 600, 700, 800,
990
], [200, 11, 300, 200, 200, 100, 300, 100, 300], [100, 200, 200, 132, 231, 234, 213,
656, 121
], [222, 333, 444, 555, 666, 77, 888, 999, 222]));
//一般公共预算
var myChart5 = echarts.init(document.getElementById('growth3'));
myChart5.setOption(zengsu('任城总量', '徐州总量', '任城增长', '徐州增长', '总量(亿元)', '增长(%)', '一般公共预算收入',
'#1c6ffb', '#07cc7a', '#cdab6c', '#aa8dbd', [111, 222, 333, 444, 555, 666, 777, 888,
999
], [999, 888, 777, 666, 555, 444, 333, 222, 222], [222, 333, 111, 444, 55, 777, 666,
888, 999
], [133, 211, 322, 433, 544, 655, 766, 888, 999]));
//双招双引
var myChart7 = echarts.init(document.getElementById('industria2'));
myChart7.setOption(shuangzhao('济宁市', '徐州市', [18203, 23489, 29034], [19325, 23438, 31000]));
//乡村振兴
var myChart8 = echarts.init(document.getElementById('growth4'));
myChart8.setOption(zhengxing('农业产业化龙头企业100强', '农业产业化龙头企业500强', '数量', '#4eaaeb', '#f8a20f', [60,
40
], [60, 80]));
}
})
</script>
</html>
此处可能存在不合适展示的内容，页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容，可点击提交进行申诉，我们将尽快为您处理。
马建仓 AI 助手
