master
zhy521521
9 months ago
parent
6469c68fae
commit
abcd6bae25
|
After Width: | Height: | Size: 7.3 KiB |
|
After Width: | Height: | Size: 81 KiB |
|
After Width: | Height: | Size: 31 KiB |
|
After Width: | Height: | Size: 29 KiB |
|
After Width: | Height: | Size: 1.3 MiB |
|
After Width: | Height: | Size: 18 KiB |
|
After Width: | Height: | Size: 114 KiB |
|
After Width: | Height: | Size: 123 KiB |
@ -0,0 +1,488 @@
|
||||
<template>
|
||||
<div class="main">
|
||||
<div class="title">功能农业大数据平台</div>
|
||||
<div class="loginContainer">
|
||||
<div class="loginBox">
|
||||
<div class="topZS"></div>
|
||||
<el-tabs v-model="activeName" @tab-click="handleClick">
|
||||
<el-tab-pane label="账号密码登录" name="first">
|
||||
<el-form class="loginForm">
|
||||
<el-form-item class="user">
|
||||
<img src="../../assets/login/password.png" />
|
||||
<el-input class="eInput" v-model="ruleForm.username" placeholder="请输入用户名" />
|
||||
</el-form-item>
|
||||
<br />
|
||||
<el-form-item class="user">
|
||||
<img src="../../assets/login/user.png" />
|
||||
<el-input class="eInput" type="password" v-model="ruleForm.password" autocomplete="off"
|
||||
placeholder="请输入密码" />
|
||||
</el-form-item>
|
||||
<el-form-item class="userKey">
|
||||
<div class="userKeybox">
|
||||
<img src="../../assets/login/code01.png" />
|
||||
<el-input class="keyInput" v-model="ruleForm.checkcode" placeholder="请输入验证码" />
|
||||
</div>
|
||||
<div ref="img" @click="getCode()" class="codeimgBox">
|
||||
<img :src="pic" class="yanzheng" />
|
||||
</div>
|
||||
</el-form-item>
|
||||
<el-form-item class="loginbtn">
|
||||
<el-button @click="login">登录</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-tab-pane>
|
||||
<!-- <el-tab-pane label="数字证书登录" name="second">
|
||||
<div class="shuziZS_box">
|
||||
<div class="keyBox">
|
||||
<div class="keyText">请输入电子数字证书</div>
|
||||
|
||||
<div class="huanhang"></div>
|
||||
<div class="keyIcon">
|
||||
<img src="../assets/login/key.png" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="loginbtn">
|
||||
<el-button>登录</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</el-tab-pane> -->
|
||||
</el-tabs>
|
||||
<div class="bottomZS"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// import { getCheckCode } from "@/utils/login";
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
activeName: "first",
|
||||
ruleForm: {},
|
||||
pic: "",
|
||||
};
|
||||
},
|
||||
created() {
|
||||
// this.getCode();
|
||||
},
|
||||
methods: {
|
||||
// getCode() {
|
||||
// let random = Math.random();
|
||||
// getCheckCode({ type: "math", s: random }).then((res) => {
|
||||
// // console.log(res.data);
|
||||
// this.pic = "data:image/gif;base64," + res.img;
|
||||
// this.ruleForm.uuid = res.uuid;
|
||||
// });
|
||||
// },
|
||||
login() {
|
||||
if (!this.ruleForm.username) {
|
||||
this.$message.error("请输入用户名");
|
||||
return;
|
||||
}
|
||||
if (!this.ruleForm.password) {
|
||||
this.$message.error("请输入密码");
|
||||
return;
|
||||
}
|
||||
if (!this.ruleForm.checkcode) {
|
||||
this.$message.error("请输入验证码");
|
||||
return;
|
||||
}
|
||||
const param = {
|
||||
username: this.ruleForm.username,
|
||||
password: this.ruleForm.password,
|
||||
code: this.ruleForm.checkcode,
|
||||
uuid: this.ruleForm.uuid,
|
||||
};
|
||||
this.$store
|
||||
.dispatch("Login", param)
|
||||
.then((res) => {
|
||||
if (res.code === 200) {
|
||||
sessionStorage.setItem("activeIndex", "1");
|
||||
this.$router.push({
|
||||
path: "/home/compositeIndex",
|
||||
});
|
||||
} else {
|
||||
this.$message.error(res.msg);
|
||||
return;
|
||||
}
|
||||
})
|
||||
.catch(() => {
|
||||
//this.$message.error(err.msg)
|
||||
this.getCode();
|
||||
});
|
||||
},
|
||||
handleClick() { },
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.main {
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
background: url("../../../public/images/login-bg.png") no-repeat;
|
||||
background-size: 100% 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
|
||||
.title {
|
||||
position: absolute;
|
||||
top: 10vh;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
font-family: YouSheBiaoTiHei;
|
||||
font-size: 56px;
|
||||
color: #59ffda;
|
||||
letter-spacing: 4.6px;
|
||||
text-align: justify;
|
||||
line-height: 57px;
|
||||
text-shadow: 0 8px 8px rgba(0, 0, 0, 0.3);
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.loginContainer {
|
||||
width: 95%;
|
||||
height: 95%;
|
||||
// background: url("~@/assets/login/loginback02.png") no-repeat;
|
||||
background-size: 100% 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
.loginBox {
|
||||
width: 790px;
|
||||
height: 540px;
|
||||
background: url("~@/assets/login/loginback03.png") no-repeat;
|
||||
background-size: 100% 100%;
|
||||
position: relative;
|
||||
|
||||
.topZS {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 30px;
|
||||
top: 0;
|
||||
left: 0;
|
||||
background: url("~@/assets/login/loginback04.png") no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
.buttonBox {
|
||||
width: 700px;
|
||||
height: 74px;
|
||||
background-image: linear-gradient(90deg,
|
||||
rgba(238, 238, 238, 0) 0%,
|
||||
rgba(53, 206, 150, 0.4) 50%,
|
||||
rgba(216, 216, 216, 0) 100%);
|
||||
}
|
||||
|
||||
.bottomZS {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 30px;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
background: url("~@/assets/login/loginback04.png") no-repeat;
|
||||
background-size: 100% 100%;
|
||||
transform: rotateX(180deg);
|
||||
}
|
||||
|
||||
/deep/.el-tabs {
|
||||
width: 790px;
|
||||
height: 540px;
|
||||
padding: 30px 45px;
|
||||
box-sizing: border-box;
|
||||
|
||||
.el-tabs__header {
|
||||
width: 700px;
|
||||
height: 72px;
|
||||
background-image: linear-gradient(90deg,
|
||||
rgba(238, 238, 238, 0) 0%,
|
||||
rgba(53, 206, 150, 0.4) 50%,
|
||||
rgba(216, 216, 216, 0) 100%);
|
||||
|
||||
.el-tabs__nav-wrap {
|
||||
height: 72px;
|
||||
border: 0;
|
||||
|
||||
.el-tabs__nav-scroll {
|
||||
height: 72px;
|
||||
|
||||
.el-tabs__nav {
|
||||
height: 72px;
|
||||
width: 100%;
|
||||
|
||||
.el-tabs__active-bar {
|
||||
background: #32ff9f;
|
||||
width: 50% !important;
|
||||
}
|
||||
|
||||
.el-tabs__item {
|
||||
height: 72px;
|
||||
width: 50%;
|
||||
line-height: 72px;
|
||||
text-align: center;
|
||||
font-family: AlimamaShuHeiTi;
|
||||
font-size: 30px;
|
||||
color: #edfaff;
|
||||
letter-spacing: 2.86px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.is-active {
|
||||
color: #32ff9a;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.el-tabs__nav-wrap::after {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.el-tabs__content {
|
||||
width: 700px;
|
||||
height: calc(100% - 87px);
|
||||
|
||||
.loginForm {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.shuziZS_box {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
flex-wrap: wrap;
|
||||
|
||||
.keyBox {
|
||||
width: 600px;
|
||||
height: 182px;
|
||||
background: rgba(8, 44, 47, 0.81);
|
||||
border: 1px solid rgba(38, 170, 123, 1);
|
||||
border-radius: 3px;
|
||||
margin-top: 40px;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
|
||||
.keyText {
|
||||
margin-top: 30px;
|
||||
width: 100%;
|
||||
height: 33px;
|
||||
text-align: center;
|
||||
line-height: 33px;
|
||||
opacity: 0.8;
|
||||
font-family: PingFangSC-Regular;
|
||||
font-size: 24px;
|
||||
color: #ffffff;
|
||||
letter-spacing: 2px;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.huanhang {
|
||||
width: 100%;
|
||||
height: 1px;
|
||||
}
|
||||
|
||||
.keyIcon {
|
||||
margin-top: -40px;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
background: #f14141;
|
||||
box-shadow: 0px 0px 8px 1px rgba(188, 37, 37, 0.76);
|
||||
border-radius: 8px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
img {
|
||||
width: 17px;
|
||||
height: 31px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.user {
|
||||
width: 600px;
|
||||
height: 66px;
|
||||
background: rgba(8, 44, 47, 0.81);
|
||||
border: 1px solid rgba(38, 170, 123, 1);
|
||||
border-radius: 3px;
|
||||
display: flex;
|
||||
margin-top: 15px;
|
||||
|
||||
.el-form-item__content {
|
||||
display: flex !important;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
img {
|
||||
margin-left: 10px;
|
||||
width: 24px;
|
||||
height: 26px;
|
||||
}
|
||||
|
||||
.eInput {
|
||||
display: inline-block;
|
||||
width: 550px;
|
||||
height: 66px;
|
||||
|
||||
background: rgba(0, 0, 0, 0);
|
||||
color: #cfe9ff;
|
||||
font-size: 19px;
|
||||
padding-left: 10px;
|
||||
border: 0;
|
||||
letter-spacing: 1.65px;
|
||||
font-weight: 400;
|
||||
|
||||
.el-input__inner {
|
||||
height: 65px;
|
||||
line-height: 65px;
|
||||
background: rgba(0, 0, 0, 0);
|
||||
border: 0;
|
||||
color: #eeeeee;
|
||||
}
|
||||
}
|
||||
|
||||
.keyInput {
|
||||
height: 65px;
|
||||
width: 321px;
|
||||
background-color: rgba(0, 0, 0, 0.05);
|
||||
opacity: 0.5;
|
||||
color: #cfe9ff;
|
||||
font-size: 19px;
|
||||
padding-left: 10px;
|
||||
border: 0;
|
||||
letter-spacing: 1.65px;
|
||||
font-weight: 400;
|
||||
}
|
||||
}
|
||||
|
||||
.user:hover {
|
||||
background: rgba(8, 44, 47, 0.81);
|
||||
border: 1px solid rgba(79, 255, 141, 1);
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.userKey {
|
||||
width: 600px;
|
||||
height: 66px;
|
||||
|
||||
display: flex;
|
||||
margin-top: 15px;
|
||||
|
||||
.el-form-item__content {
|
||||
display: flex !important;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.userKeybox {
|
||||
width: 475px;
|
||||
height: 65px;
|
||||
background: rgba(8, 44, 47, 0.81);
|
||||
border: 1px solid rgba(38, 170, 123, 1);
|
||||
border-radius: 3px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
img {
|
||||
margin-left: 10px;
|
||||
width: 24px;
|
||||
height: 26px;
|
||||
}
|
||||
|
||||
.keyInput {
|
||||
height: 65px;
|
||||
width: 321px;
|
||||
background-color: rgba(0, 0, 0, 0);
|
||||
|
||||
color: #cfe9ff;
|
||||
font-size: 19px;
|
||||
padding-left: 10px;
|
||||
border: 0;
|
||||
letter-spacing: 1.65px;
|
||||
font-weight: 400;
|
||||
|
||||
.el-input__inner {
|
||||
height: 65px;
|
||||
line-height: 65px;
|
||||
background: rgba(0, 0, 0, 0);
|
||||
border: 0;
|
||||
color: #eeeeee;
|
||||
}
|
||||
|
||||
.keyInput {
|
||||
height: 65px;
|
||||
width: 321px;
|
||||
background-color: rgba(0, 0, 0, 0.05);
|
||||
opacity: 0.5;
|
||||
color: #cfe9ff;
|
||||
font-size: 19px;
|
||||
padding-left: 10px;
|
||||
border: 0;
|
||||
letter-spacing: 1.65px;
|
||||
font-weight: 400;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.userKeybox:hover {
|
||||
background: rgba(8, 44, 47, 0.81);
|
||||
border: 1px solid rgba(79, 255, 141, 1);
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.codeimgBox {
|
||||
width: 123px;
|
||||
height: 66px;
|
||||
|
||||
.yanzheng {
|
||||
width: 123px;
|
||||
height: 66px;
|
||||
|
||||
background-image: linear-gradient(90deg,
|
||||
#0a2340 0%,
|
||||
rgba(18, 64, 105, 0.04) 100%);
|
||||
border-image: linear-gradient(to right, #124169, #7bf3fc) 1 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.loginbtn {
|
||||
width: 600px;
|
||||
height: 66px;
|
||||
margin-top: 15px;
|
||||
background: url("~@/assets/login/loginbackbtn.png") no-repeat;
|
||||
background-size: 100% 100%;
|
||||
|
||||
button {
|
||||
width: 600px;
|
||||
height: 66px;
|
||||
border: 0;
|
||||
font-size: 20px;
|
||||
color: #edfaff;
|
||||
letter-spacing: 6px;
|
||||
font-weight: 500;
|
||||
background-color: rgba(0, 0, 0, 0);
|
||||
}
|
||||
}
|
||||
|
||||
.loginbtn:hover {
|
||||
background: url("~@/assets/login/loginbackbtn02.png") no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -1,16 +0,0 @@
|
||||
<template>
|
||||
<div>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {}
|
||||
},
|
||||
created() {
|
||||
this.$store.commit('SET_ROUTERINFO', this.$route.meta)
|
||||
},
|
||||
}
|
||||
</script>
|
||||
<style lang="less" scoped></style>
|
||||
@ -0,0 +1,88 @@
|
||||
<template>
|
||||
<div class="fwfb-wrap">
|
||||
<titleCard>全球发文省直辖市分布(篇)
|
||||
</titleCard>
|
||||
<div class="fwfb-chart">
|
||||
<div id="fwfb" style="width: 100%;height: 100%;"></div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
option: {
|
||||
title: {
|
||||
text: '',
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'item'
|
||||
},
|
||||
legend: {
|
||||
show: false
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: '详情',
|
||||
type: 'pie',
|
||||
center: ['50%', '50%'],
|
||||
emphasis: {
|
||||
itemStyle: {
|
||||
shadowBlur: 10,
|
||||
shadowOffsetX: 0,
|
||||
shadowColor: 'rgba(0, 0, 0, 0.5)'
|
||||
}
|
||||
},
|
||||
|
||||
label: {
|
||||
normal: {
|
||||
show: true,
|
||||
textStyle: {
|
||||
fontSize: 12,
|
||||
fontFamily: 'PingFangSC, PingFang SC',
|
||||
fontWeight: 400,
|
||||
color: '#ECF4F9'
|
||||
},
|
||||
formatter: "{b}({c}篇)"
|
||||
},
|
||||
},
|
||||
|
||||
},
|
||||
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.getfwfbEchart()
|
||||
},
|
||||
methods: {
|
||||
getfwfbEchart() {
|
||||
var chartDom = document.getElementById('fwfb');
|
||||
var myChart = this.$echarts.init(chartDom);
|
||||
this.option.series[0].data = [
|
||||
{ value: 104, name: '湖北' },
|
||||
{ value: 735, name: '四川' },
|
||||
{ value: 580, name: '陕西' },
|
||||
{ value: 484, name: '上海' },
|
||||
{ value: 300, name: '其他省份' },
|
||||
{ value: 200, name: '北京' },
|
||||
{ value: 200, name: '江苏' },
|
||||
{ value: 200, name: '广东' },
|
||||
{ value: 400, name: '浙江' },
|
||||
{ value: 200, name: '上海' },
|
||||
],
|
||||
this.option && myChart.setOption(this.option);
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
.fwfb-wrap {
|
||||
|
||||
.fwfb-chart {
|
||||
height: 140px;
|
||||
}
|
||||
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,153 @@
|
||||
<template>
|
||||
<div class="fwqs-wrap">
|
||||
<titleCard>中国功能农业领域年度发文趋势</titleCard>
|
||||
<div class="fwqs-zx">
|
||||
<div id="fxqs" style="width: 100%;height: 100%;">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
option: {
|
||||
title:{
|
||||
show:false
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
type: 'shadow'
|
||||
}
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
data: ['2001', '2002', '2003', '2004', '2001', '2002', '2003', '2004', '2001', '2002', '2003', '2004', '2003', '2004', '2001'],
|
||||
axisLabel: {
|
||||
interval: 0, //0 表示所有标签都显示
|
||||
color: '#fff',
|
||||
rotate: 45, //旋转角度为01
|
||||
// align: 'center',
|
||||
fontSize: 12,
|
||||
lineHeight: 14,
|
||||
textStyle: {
|
||||
with: '30px',
|
||||
wordBreak: 'break-all'
|
||||
}
|
||||
},
|
||||
axisTick: {//坐标轴刻度设置
|
||||
show: false, //是否显示坐标轴刻度
|
||||
inside: true, //坐标轴刻度指向(true表示向上 false表示向下)
|
||||
alignWithLabel: true,//刻度线是否和标签对齐
|
||||
length: 5,//坐标轴刻度长度
|
||||
lineStyle: {//坐标轴刻度的样式
|
||||
color: 'black',//坐标轴刻度的颜色
|
||||
width: 2,//坐标轴刻度的粗细程度(用数字表示)
|
||||
type: 'solid'//坐标轴刻度的类型(可选solid dotted dashed)
|
||||
}
|
||||
},
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
show: true,
|
||||
name: '发文量:篇',
|
||||
nameTextStyle: { //坐标轴名称的文字样式
|
||||
color: '#ECF4F9', //坐标轴名称的颜色
|
||||
fontSize: 12, //坐标轴名称的大小 (用数字表示)
|
||||
// fontWeight: 'bold', //坐标轴文字加粗程度 (可选bold bolder lighter normal)
|
||||
// fontstyle: 'normal', //坐标轴文字样式 (可选normal italic oblique)
|
||||
// fontFamily: '华文行楷', //坐标轴文字风格 (可选楷体 宋体 华文行楷等等)
|
||||
// padding: [5, 24, 0, 0] //坐标轴文字边距 (上右下左)
|
||||
},
|
||||
splitLine: { //网格线
|
||||
show: true, //是否显示
|
||||
lineStyle: { //网格线样式
|
||||
color: '#ECF4F9',//网格线颜色
|
||||
width: 1,//网格线的加粗程度
|
||||
type: 'dashed',//网格线类型
|
||||
opacity: 0.2
|
||||
}
|
||||
},
|
||||
// min: 'dataMin', // 取数据的最小值
|
||||
// scale: true, //取消强制包含0刻度
|
||||
axisLine: { show: true, },
|
||||
axisLabel: {
|
||||
// interval: 0, //0 表示所有标签都显示
|
||||
color: '#fff',
|
||||
// rotate: 0, //旋转角度为01
|
||||
// align:'center',
|
||||
fontSize: 12,
|
||||
}
|
||||
},
|
||||
series: [
|
||||
{
|
||||
data: [100, 200, 600, 80, 70, 100, 200, 600, 80, 70, 100, 200, 600, 80, 70],
|
||||
type: 'bar',
|
||||
// barWidth: 10, // 柱子的宽度
|
||||
showBackground: true,
|
||||
// 每根柱子的样式
|
||||
itemStyle: {
|
||||
// 圆角
|
||||
// normal: {
|
||||
// barBorderRadius: [5, 5, 0, 0]
|
||||
// },
|
||||
color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{ offset: 0, color: '#2378f7' },
|
||||
{ offset: 0.7, color: '#2378f7' },
|
||||
{ offset: 1, color: '#83bff6' }
|
||||
])
|
||||
},
|
||||
// 鼠标悬浮
|
||||
// emphasis: {
|
||||
// itemStyle: {
|
||||
// color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
// { offset: 0, color: '#2378f7' },
|
||||
// { offset: 0.7, color: '#2378f7' },
|
||||
// { offset: 1, color: '#83bff6' }
|
||||
// ])
|
||||
// }
|
||||
// },
|
||||
// 顶部文字
|
||||
label: {
|
||||
show: true,
|
||||
opacity: 0.5,
|
||||
position: 'inside',
|
||||
textStyle: {
|
||||
color: '#fff',
|
||||
fontSize: 12
|
||||
}
|
||||
}
|
||||
}
|
||||
],
|
||||
grid: {
|
||||
top: '22%', // 上边界距离容器顶部的百分比或像素值
|
||||
bottom: '18.5%', // 下边界距离容器底部的百分比或像素值
|
||||
left: '10%',
|
||||
right: '0'
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.getfwqsEchart()
|
||||
},
|
||||
methods: {
|
||||
getfwqsEchart() {
|
||||
var chartDom = document.getElementById('fxqs');
|
||||
var myChart = this.$echarts.init(chartDom);
|
||||
this.option && myChart.setOption(this.option);
|
||||
window.addEventListener("resize", () => {
|
||||
this.mapChart.resize();
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
.fwqs-wrap {
|
||||
.fwqs-zx {
|
||||
height: 160px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,124 @@
|
||||
<template>
|
||||
<div class="fwyj-wrap">
|
||||
<titleCard>全球功能农业领域发文研究分支分布</titleCard>
|
||||
<div class="fwyj-zx">
|
||||
<div id="fxyj" style="width: 100%;height: 100%;">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
option: {
|
||||
title: {
|
||||
show: false
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
type: 'shadow'
|
||||
}
|
||||
},
|
||||
legend: {
|
||||
show: false
|
||||
},
|
||||
grid: {
|
||||
top: "5%",
|
||||
left: '0%',
|
||||
right: '8%',
|
||||
bottom: '3%',
|
||||
containLabel: true
|
||||
},
|
||||
xAxis: {
|
||||
type: 'value',
|
||||
|
||||
name: '篇',
|
||||
nameTextStyle: { //坐标轴名称的文字样式
|
||||
color: '#ECF4F9', //坐标轴名称的颜色
|
||||
fontSize: 12, //坐标轴名称的大小 (用数字表示)
|
||||
// fontWeight: 'bold', //坐标轴文字加粗程度 (可选bold bolder lighter normal)
|
||||
// fontstyle: 'normal', //坐标轴文字样式 (可选normal italic oblique)
|
||||
// fontFamily: '华文行楷', //坐标轴文字风格 (可选楷体 宋体 华文行楷等等)
|
||||
},
|
||||
fontSize: 12,
|
||||
axisLabel: {
|
||||
// interval: 0, //0 表示所有标签都显示
|
||||
color: '#fff',
|
||||
fontSize: 12,
|
||||
},
|
||||
splitLine: { //网格线
|
||||
show: true, //是否显示
|
||||
lineStyle: { //网格线样式
|
||||
color: '#ECF4F9',//网格线颜色
|
||||
width: 1,//网格线的加粗程度
|
||||
type: 'dashed',//网格线类型
|
||||
opacity: 0.2
|
||||
}
|
||||
},
|
||||
},
|
||||
yAxis: {
|
||||
type: 'category',
|
||||
data: ['规划', '万法学', '标准', '精准营养', '精准加工', '养殖', '功能种子', '功能肥料', '功能土壤', '功能成分'],
|
||||
fontSize: 12,
|
||||
axisLabel: {
|
||||
interval: 0, //0 表示所有标签都显示
|
||||
color: '#fff',
|
||||
fontSize: 12,
|
||||
},
|
||||
splitLine: { //网格线
|
||||
show: true, //是否显示
|
||||
lineStyle: { //网格线样式
|
||||
color: '#ECF4F9',//网格线颜色
|
||||
width: 1,//网格线的加粗程度
|
||||
type: 'dashed',//网格线类型
|
||||
opacity: 0.2
|
||||
}
|
||||
},
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: '发文量',
|
||||
type: 'bar',
|
||||
data: [20, 200, 300, 150, 320, 450, 100, 600, 500, 200],
|
||||
// 顶部文字
|
||||
label: {
|
||||
show: true,
|
||||
position: 'inside',
|
||||
opacity: 0.5,
|
||||
textStyle: {
|
||||
color: '#fff',
|
||||
fontSize: 12
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
|
||||
]
|
||||
}
|
||||
}
|
||||
|
||||
},
|
||||
mounted() {
|
||||
this.getfwyjEchart()
|
||||
},
|
||||
methods: {
|
||||
getfwyjEchart() {
|
||||
var chartDom = document.getElementById('fxyj');
|
||||
var myChart = this.$echarts.init(chartDom);
|
||||
this.option && myChart.setOption(this.option);
|
||||
window.addEventListener("resize", () => {
|
||||
this.mapChart.resize();
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
.fwyj-wrap {
|
||||
.fwyj-zx {
|
||||
height: 180px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,242 @@
|
||||
<template>
|
||||
<div class="smzq-wrap">
|
||||
<titleCard>全球功能农业领域专利技术生命周期图
|
||||
</titleCard>
|
||||
<div class="smzq-chart">
|
||||
<div id="smzq" style="width: 100%;height: 100%;"></div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
option: {
|
||||
title: {
|
||||
text: ''
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
type: 'cross',
|
||||
label: {
|
||||
backgroundColor: '#6a7985'
|
||||
}
|
||||
}
|
||||
},
|
||||
legend: {
|
||||
show: false,
|
||||
data: ['年综合产值'],
|
||||
right: '5%',
|
||||
itemStyle: {
|
||||
},
|
||||
textStyle: {
|
||||
color: '#E0E0E0'
|
||||
},
|
||||
fontSize: 12
|
||||
},
|
||||
grid: {
|
||||
top: '20%',
|
||||
left: '0',
|
||||
right: '17%',
|
||||
bottom: '3%',
|
||||
containLabel: true
|
||||
},
|
||||
xAxis: [
|
||||
{
|
||||
type: 'category',
|
||||
boundaryGap: false,
|
||||
// data: [], 可在series定义
|
||||
name: '专利权人\n数数量/个',
|
||||
nameTextStyle: { //坐标轴名称的文字样式
|
||||
color: '#ECF4F9', //坐标轴名称的颜色
|
||||
fontSize: 12, //坐标轴名称的大小 (用数字表示)
|
||||
// fontWeight: 'bold', //坐标轴文字加粗程度 (可选bold bolder lighter normal)
|
||||
// fontstyle: 'normal', //坐标轴文字样式 (可选normal italic oblique)
|
||||
// fontFamily: '华文行楷', //坐标轴文字风格 (可选楷体 宋体 华文行楷等等)
|
||||
},
|
||||
axisTick: { //坐标轴刻度设置
|
||||
show: false, //是否显示坐标轴刻度
|
||||
inside: true, //坐标轴刻度指向 (true表示向上 false表示向下)
|
||||
alignWithLabel: true, //刻度线是否和标签对齐
|
||||
length: 5, //坐标轴刻度长度
|
||||
lineStyle: { //坐标轴刻度的样式
|
||||
color: 'black', //坐标轴刻度的颜色
|
||||
width: 2, //坐标轴刻度的粗细程度 (用数字表示)
|
||||
type: 'solid' //坐标轴刻度的类型 (可选solid dotted dashed)
|
||||
}
|
||||
},
|
||||
// splitLine: { //网格线
|
||||
// show: true, //是否显示
|
||||
// lineStyle: { //网格线样式
|
||||
// color: '#ECF4F9', //网格线颜色
|
||||
// width: 1, //网格线的加粗程度
|
||||
// type: 'dashed', //网格线类型
|
||||
// opacity: 0.2
|
||||
// }
|
||||
// },
|
||||
axisLabel: {
|
||||
interval: 0, //0 表示所有标签都显示
|
||||
color: '#ECF4F9',
|
||||
// rotate: 45, //旋转角度为01
|
||||
align: 'center',
|
||||
fontSize: 12,
|
||||
lineHeight: 14,
|
||||
textStyle: {
|
||||
with: '30px',
|
||||
wordBreak: 'break-all'
|
||||
},
|
||||
|
||||
}
|
||||
}
|
||||
],
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
name: '专利数量(项)',
|
||||
show: true,
|
||||
nameTextStyle: { //坐标轴名称的文字样式
|
||||
color: '#ECF4F9', //坐标轴名称的颜色
|
||||
fontSize: 12, //坐标轴名称的大小 (用数字表示)
|
||||
// fontWeight: 'bold', //坐标轴文字加粗程度 (可选bold bolder lighter normal)
|
||||
// fontstyle: 'normal', //坐标轴文字样式 (可选normal italic oblique)
|
||||
// fontFamily: '华文行楷', //坐标轴文字风格 (可选楷体 宋体 华文行楷等等)
|
||||
padding: [5, 24, 0, 0] //坐标轴文字边距 (上右下左)
|
||||
},
|
||||
min: 'dataMin', // 取数据的最小值
|
||||
scale: true, //取消强制包含0刻度
|
||||
splitLine: { //网格线
|
||||
show: true, //是否显示
|
||||
lineStyle: { //网格线样式
|
||||
color: '#ECF4F9', //网格线颜色
|
||||
width: 1, //网格线的加粗程度
|
||||
type: 'dashed', //网格线类型
|
||||
opacity: 0.2
|
||||
}
|
||||
},
|
||||
axisLine: { show: true, },
|
||||
axisLabel: {
|
||||
// interval: 0, //0 表示所有标签都显示
|
||||
color: '#ECF4F9',
|
||||
// rotate: 0, //旋转角度为01
|
||||
// align:'center',
|
||||
fontSize: 12,
|
||||
},
|
||||
// data: [] 如果data为空 默认去series里的数据
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: '',
|
||||
type: 'line',
|
||||
stack: 'Total',
|
||||
smooth: true,
|
||||
showSymbol: true,
|
||||
emphasis: {
|
||||
focus: 'series',
|
||||
},
|
||||
// 渐变线
|
||||
lineStyle: {
|
||||
normal: {
|
||||
width: 2,
|
||||
color: new this.$echarts.graphic.LinearGradient(0, 0, 1, 0, [ // 颜色渐变
|
||||
{
|
||||
offset: 0,
|
||||
color: 'rgb(0, 255, 255, 0)'
|
||||
},
|
||||
{
|
||||
offset: 0.2,
|
||||
color: 'rgb(0, 255, 255, 5)'
|
||||
},
|
||||
{
|
||||
offset: 0.4,
|
||||
color: 'rgb(0, 200, 200, 0)'
|
||||
},
|
||||
{
|
||||
offset: 0.6,
|
||||
color: 'rgb(0, 200, 200, 80)'
|
||||
},
|
||||
{
|
||||
offset: 0.8,
|
||||
color: 'rgb(0, 255, 255, 8)'
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: 'rgb(0, 255, 255, 0)'
|
||||
}
|
||||
])
|
||||
}
|
||||
|
||||
},
|
||||
// 渐变区域
|
||||
areaStyle: { // 区域面积
|
||||
color: {
|
||||
type: 'linear',
|
||||
x: 0,
|
||||
y: 0,
|
||||
x2: 0,
|
||||
y2: 1,
|
||||
colorStops: [
|
||||
{
|
||||
offset: 0,
|
||||
color: 'rgb(27,90,183,0)' // 0% 处的颜色
|
||||
},
|
||||
// {
|
||||
// offset: 0.5,
|
||||
// color: 'rgb(0, 50, 100, 1)' // 50% 处的颜色
|
||||
// },
|
||||
{
|
||||
offset: 1,
|
||||
color: 'rgb(17,70,139,0.8)' // 100% 处的颜色
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
},
|
||||
label: {
|
||||
normal: {
|
||||
show: true,
|
||||
textStyle: {
|
||||
fontSize: 12,
|
||||
fontFamily: 'PingFangSC, PingFang SC',
|
||||
fontWeight: 400,
|
||||
color: '#ECF4F9'
|
||||
},
|
||||
trigger: 'item',
|
||||
formatter: ((params) => {
|
||||
console.log(111, params)
|
||||
return params.data[2]
|
||||
})
|
||||
},
|
||||
},
|
||||
data: [[20, 100, '2021'], [45, 150, '2022'], [15, 150, '2023'], [40, 100, '2024'], [65, 150, '2025']],
|
||||
},
|
||||
|
||||
]
|
||||
}
|
||||
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.getsmzqEchart()
|
||||
},
|
||||
methods: {
|
||||
getsmzqEchart() {
|
||||
var chartDom = document.getElementById('smzq');
|
||||
var myChart = this.$echarts.init(chartDom);
|
||||
// let data = [100, 150, 200, 300, 360, 240, 220, 170, 420, 350]
|
||||
// this.option.series[0].data = data
|
||||
this.option && myChart.setOption(this.option);
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
.smzq-wrap {
|
||||
font-family: PingFangSC, PingFang SC;
|
||||
color: #FFFFFF;
|
||||
|
||||
.smzq-chart {
|
||||
height: 185px;
|
||||
}
|
||||
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,88 @@
|
||||
<template>
|
||||
<div class="zlfb-wrap">
|
||||
<titleCard>全球发文省直辖市分布(篇)
|
||||
</titleCard>
|
||||
<div class="zlfb-chart">
|
||||
<div id="zlfb" style="width: 100%;height: 100%;"></div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
option: {
|
||||
title: {
|
||||
text: '',
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'item'
|
||||
},
|
||||
legend: {
|
||||
show: false
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: '详情',
|
||||
type: 'pie',
|
||||
center: ['50%', '50%'],
|
||||
emphasis: {
|
||||
itemStyle: {
|
||||
shadowBlur: 10,
|
||||
shadowOffsetX: 0,
|
||||
shadowColor: 'rgba(0, 0, 0, 0.5)'
|
||||
}
|
||||
},
|
||||
|
||||
label: {
|
||||
normal: {
|
||||
show: true,
|
||||
textStyle: {
|
||||
fontSize: 12,
|
||||
fontFamily: 'PingFangSC, PingFang SC',
|
||||
fontWeight: 400,
|
||||
color: '#ECF4F9'
|
||||
},
|
||||
formatter: "{b}({c}篇)"
|
||||
},
|
||||
},
|
||||
|
||||
},
|
||||
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.getzlfbEchart()
|
||||
},
|
||||
methods: {
|
||||
getzlfbEchart() {
|
||||
var chartDom = document.getElementById('zlfb');
|
||||
var myChart = this.$echarts.init(chartDom);
|
||||
this.option.series[0].data = [
|
||||
{ value: 104, name: '湖北' },
|
||||
{ value: 735, name: '四川' },
|
||||
{ value: 580, name: '陕西' },
|
||||
{ value: 484, name: '上海' },
|
||||
{ value: 300, name: '其他省份' },
|
||||
{ value: 200, name: '北京' },
|
||||
{ value: 200, name: '江苏' },
|
||||
{ value: 200, name: '广东' },
|
||||
{ value: 400, name: '浙江' },
|
||||
{ value: 200, name: '上海' },
|
||||
],
|
||||
this.option && myChart.setOption(this.option);
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
.zlfb-wrap {
|
||||
|
||||
.zlfb-chart {
|
||||
height: 140px;
|
||||
}
|
||||
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,153 @@
|
||||
<template>
|
||||
<div class="zlnd-wrap">
|
||||
<titleCard>中国功能农业领域专利年代分布</titleCard>
|
||||
<div class="zlnd-zx">
|
||||
<div id="zlnd" style="width: 100%;height: 100%;">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
option: {
|
||||
title: {
|
||||
show: false
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
type: 'shadow'
|
||||
}
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
data: ['2001', '2002', '2003', '2004', '2001', '2002', '2003', '2004', '2001', '2002', '2003', '2004', '2003', '2004', '2001'],
|
||||
axisLabel: {
|
||||
interval: 0, //0 表示所有标签都显示
|
||||
color: '#fff',
|
||||
rotate: 45, //旋转角度为01
|
||||
// align: 'center',
|
||||
fontSize: 12,
|
||||
lineHeight: 14,
|
||||
textStyle: {
|
||||
with: '30px',
|
||||
wordBreak: 'break-all'
|
||||
}
|
||||
},
|
||||
axisTick: {//坐标轴刻度设置
|
||||
show: false, //是否显示坐标轴刻度
|
||||
inside: true, //坐标轴刻度指向(true表示向上 false表示向下)
|
||||
alignWithLabel: true,//刻度线是否和标签对齐
|
||||
length: 5,//坐标轴刻度长度
|
||||
lineStyle: {//坐标轴刻度的样式
|
||||
color: 'black',//坐标轴刻度的颜色
|
||||
width: 2,//坐标轴刻度的粗细程度(用数字表示)
|
||||
type: 'solid'//坐标轴刻度的类型(可选solid dotted dashed)
|
||||
}
|
||||
},
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
show: true,
|
||||
name: '发文量:篇',
|
||||
nameTextStyle: { //坐标轴名称的文字样式
|
||||
color: '#ECF4F9', //坐标轴名称的颜色
|
||||
fontSize: 12, //坐标轴名称的大小 (用数字表示)
|
||||
// fontWeight: 'bold', //坐标轴文字加粗程度 (可选bold bolder lighter normal)
|
||||
// fontstyle: 'normal', //坐标轴文字样式 (可选normal italic oblique)
|
||||
// fontFamily: '华文行楷', //坐标轴文字风格 (可选楷体 宋体 华文行楷等等)
|
||||
// padding: [5, 24, 0, 0] //坐标轴文字边距 (上右下左)
|
||||
},
|
||||
splitLine: { //网格线
|
||||
show: true, //是否显示
|
||||
lineStyle: { //网格线样式
|
||||
color: '#ECF4F9',//网格线颜色
|
||||
width: 1,//网格线的加粗程度
|
||||
type: 'dashed',//网格线类型
|
||||
opacity: 0.2
|
||||
}
|
||||
},
|
||||
// min: 'dataMin', // 取数据的最小值
|
||||
// scale: true, //取消强制包含0刻度
|
||||
axisLine: { show: true, },
|
||||
axisLabel: {
|
||||
// interval: 0, //0 表示所有标签都显示
|
||||
color: '#fff',
|
||||
// rotate: 0, //旋转角度为01
|
||||
// align:'center',
|
||||
fontSize: 12,
|
||||
}
|
||||
},
|
||||
series: [
|
||||
{
|
||||
data: [100, 200, 600, 80, 70, 100, 200, 600, 80, 70, 100, 200, 600, 80, 70],
|
||||
type: 'bar',
|
||||
// barWidth: 10, // 柱子的宽度
|
||||
showBackground: true,
|
||||
// 每根柱子的样式
|
||||
itemStyle: {
|
||||
// 圆角
|
||||
// normal: {
|
||||
// barBorderRadius: [5, 5, 0, 0]
|
||||
// },
|
||||
color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{ offset: 0, color: '#2378f7' },
|
||||
{ offset: 0.7, color: '#2378f7' },
|
||||
{ offset: 1, color: '#83bff6' }
|
||||
])
|
||||
},
|
||||
// 鼠标悬浮
|
||||
// emphasis: {
|
||||
// itemStyle: {
|
||||
// color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
// { offset: 0, color: '#2378f7' },
|
||||
// { offset: 0.7, color: '#2378f7' },
|
||||
// { offset: 1, color: '#83bff6' }
|
||||
// ])
|
||||
// }
|
||||
// },
|
||||
// 顶部文字
|
||||
label: {
|
||||
show: true,
|
||||
opacity: 0.5,
|
||||
position: 'inside',
|
||||
textStyle: {
|
||||
color: '#fff',
|
||||
fontSize: 12
|
||||
}
|
||||
}
|
||||
}
|
||||
],
|
||||
grid: {
|
||||
top: '22%', // 上边界距离容器顶部的百分比或像素值
|
||||
bottom: '18.5%', // 下边界距离容器底部的百分比或像素值
|
||||
left: '10%',
|
||||
right: '0'
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.getzlndEchart()
|
||||
},
|
||||
methods: {
|
||||
getzlndEchart() {
|
||||
var chartDom = document.getElementById('zlnd');
|
||||
var myChart = this.$echarts.init(chartDom);
|
||||
this.option && myChart.setOption(this.option);
|
||||
window.addEventListener("resize", () => {
|
||||
this.mapChart.resize();
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
.zlnd-wrap {
|
||||
.zlnd-zx {
|
||||
height: 160px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,88 @@
|
||||
<template>
|
||||
<div class="zlsource-wrap">
|
||||
<titleCard>全球发文省直辖市分布(篇)
|
||||
</titleCard>
|
||||
<div class="zlsource-chart">
|
||||
<div id="zlsource" style="width: 100%;height: 100%;"></div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
option: {
|
||||
title: {
|
||||
text: '',
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'item'
|
||||
},
|
||||
legend: {
|
||||
show: false
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: '详情',
|
||||
type: 'pie',
|
||||
center: ['50%', '50%'],
|
||||
emphasis: {
|
||||
itemStyle: {
|
||||
shadowBlur: 10,
|
||||
shadowOffsetX: 0,
|
||||
shadowColor: 'rgba(0, 0, 0, 0.5)'
|
||||
}
|
||||
},
|
||||
|
||||
label: {
|
||||
normal: {
|
||||
show: true,
|
||||
textStyle: {
|
||||
fontSize: 12,
|
||||
fontFamily: 'PingFangSC, PingFang SC',
|
||||
fontWeight: 400,
|
||||
color: '#ECF4F9'
|
||||
},
|
||||
formatter: "{b}({c}篇)"
|
||||
},
|
||||
},
|
||||
|
||||
},
|
||||
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.getzlsourceEchart()
|
||||
},
|
||||
methods: {
|
||||
getzlsourceEchart() {
|
||||
var chartDom = document.getElementById('zlsource');
|
||||
var myChart = this.$echarts.init(chartDom);
|
||||
this.option.series[0].data = [
|
||||
{ value: 104, name: '湖北' },
|
||||
{ value: 735, name: '四川' },
|
||||
{ value: 580, name: '陕西' },
|
||||
{ value: 484, name: '上海' },
|
||||
{ value: 300, name: '其他省份' },
|
||||
{ value: 200, name: '北京' },
|
||||
{ value: 200, name: '江苏' },
|
||||
{ value: 200, name: '广东' },
|
||||
{ value: 400, name: '浙江' },
|
||||
{ value: 200, name: '上海' },
|
||||
],
|
||||
this.option && myChart.setOption(this.option);
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
.zlsource-wrap {
|
||||
|
||||
.zlsource-chart {
|
||||
height: 140px;
|
||||
}
|
||||
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,124 @@
|
||||
<template>
|
||||
<div class="zlyjfb-wrap">
|
||||
<titleCard>全球功能农业领域发文研究分支分布</titleCard>
|
||||
<div class="zlyjfb-zx">
|
||||
<div id="zlyjfb" style="width: 100%;height: 100%;">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
option: {
|
||||
title: {
|
||||
show: false
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
type: 'shadow'
|
||||
}
|
||||
},
|
||||
legend: {
|
||||
show: false
|
||||
},
|
||||
grid: {
|
||||
top: "5%",
|
||||
left: '0%',
|
||||
right: '8%',
|
||||
bottom: '3%',
|
||||
containLabel: true
|
||||
},
|
||||
xAxis: {
|
||||
type: 'value',
|
||||
|
||||
name: '篇',
|
||||
nameTextStyle: { //坐标轴名称的文字样式
|
||||
color: '#ECF4F9', //坐标轴名称的颜色
|
||||
fontSize: 12, //坐标轴名称的大小 (用数字表示)
|
||||
// fontWeight: 'bold', //坐标轴文字加粗程度 (可选bold bolder lighter normal)
|
||||
// fontstyle: 'normal', //坐标轴文字样式 (可选normal italic oblique)
|
||||
// fontFamily: '华文行楷', //坐标轴文字风格 (可选楷体 宋体 华文行楷等等)
|
||||
},
|
||||
fontSize: 12,
|
||||
axisLabel: {
|
||||
// interval: 0, //0 表示所有标签都显示
|
||||
color: '#fff',
|
||||
fontSize: 12,
|
||||
},
|
||||
splitLine: { //网格线
|
||||
show: true, //是否显示
|
||||
lineStyle: { //网格线样式
|
||||
color: '#ECF4F9',//网格线颜色
|
||||
width: 1,//网格线的加粗程度
|
||||
type: 'dashed',//网格线类型
|
||||
opacity: 0.2
|
||||
}
|
||||
},
|
||||
},
|
||||
yAxis: {
|
||||
type: 'category',
|
||||
data: ['规划', '万法学', '标准', '精准营养', '精准加工', '养殖', '功能种子', '功能肥料', '功能土壤', '功能成分'],
|
||||
fontSize: 12,
|
||||
axisLabel: {
|
||||
interval: 0, //0 表示所有标签都显示
|
||||
color: '#fff',
|
||||
fontSize: 12,
|
||||
},
|
||||
splitLine: { //网格线
|
||||
show: true, //是否显示
|
||||
lineStyle: { //网格线样式
|
||||
color: '#ECF4F9',//网格线颜色
|
||||
width: 1,//网格线的加粗程度
|
||||
type: 'dashed',//网格线类型
|
||||
opacity: 0.2
|
||||
}
|
||||
},
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: '发文量',
|
||||
type: 'bar',
|
||||
data: [20, 200, 300, 150, 320, 450, 100, 600, 500, 200],
|
||||
// 顶部文字
|
||||
label: {
|
||||
show: true,
|
||||
position: 'inside',
|
||||
opacity: 0.5,
|
||||
textStyle: {
|
||||
color: '#fff',
|
||||
fontSize: 12
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
|
||||
]
|
||||
}
|
||||
}
|
||||
|
||||
},
|
||||
mounted() {
|
||||
this.getzlyjfbEchart()
|
||||
},
|
||||
methods: {
|
||||
getzlyjfbEchart() {
|
||||
var chartDom = document.getElementById('zlyjfb');
|
||||
var myChart = this.$echarts.init(chartDom);
|
||||
this.option && myChart.setOption(this.option);
|
||||
window.addEventListener("resize", () => {
|
||||
this.mapChart.resize();
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
.zlyjfb-wrap {
|
||||
.zlyjfb-zx {
|
||||
height: 180px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in new issue