Skip to content

T
ty_patentSys
Commit ad826b85 by hanxiao
Options

联调地图和专利趋势图

parent 6075e303
Showing with 426 additions and 253 deletions
src/utils/screen.js
import { get, post, put, Delete } from './request'
export const patentType = p => post('/api/dataScreen/patentType', p);
export const patentAuthorized = p => post('/api/dataScreen/patentAuthorized', p);
//专利转化落地区域图
export const patentTransform = p => get('/api/dataScreen/patentTransform', {});
//专利发展趋势图
export const patentDevelop = p => post('/api/dataScreen/patentDevelop', p);
src/views/screen/components/patentMap.vue
<template>
<div>
<div class="center_top_imgs">
<div class="top_img1">
<div class="top_img1 text">
<div>专利数量</div>
<div><span>50595</span>项</div>
</div>
<div class="top_img2"></div>
<div class="top_img3"></div>
<div class="top_img4"></div>
<div class="top_img2 text">
<div>专利数量</div>
<div><span>50595</span>项</div>
</div>
<div>
<!-- <h2>专利转化落地区域图</h2> -->
<div class="top_img3 text">
<div>专利数量</div>
<div><span>50595</span>项</div>
</div>
<div class="top_img4 text">
<div>专利数量</div>
<div><span>50595</span>项</div>
</div>
</div>
<div class="map_title">
<img src="@/static/screen/bg-zlzhldqyt.png" alt="" />
<span class="text_title">专利转化落地区域图</span>
</div>
<div style="height: 300px" id="area11"></div>
</div>
</template>
<script>
import * as echarts from "echarts";
import { patentTransform } from "@/utils/screen.js";
import axios from "axios";
export default {
name: "patentMap",
......@@ -31,10 +42,44 @@ export default {
this.getMap();
},
getMap() {
let dataNum = [];
let dataPosition = [];
let dataScatter = [];
patentTransform().then((res) => {
res.data.forEach((item) => {
dataNum.push({
name: item.name,
value: item.value,
});
if (item.name != "太原市") {
dataPosition.push([
[112.531079, 37.863924],
[item.longitube, item.latitebe],
]);
}
dataScatter.push({
name: item.name,
value: [item.longitube, item.latitebe],
});
});
this.getMapOption(dataNum, dataPosition, dataScatter);
});
},
//获取地图
getMapOption(dataNum, dataPosition, dataScatter) {
const myChart = echarts.init(document.getElementById("area11"));
axios.get("/map_json/shanxi.json").then((res) => {
echarts.registerMap("shanxi", res.data);
var option = {
tooltip: {
trigger: "item",
formatter: function (params) {
if (params.seriesType == "map") {
return params.data.name + ":" + params.data.value;
}
},
},
geo: [
{
map: "shanxi",
......@@ -75,40 +120,12 @@ export default {
show: true,
textStyle: { color: "#fff", fontSize: "120%" },
},
// emphasis: {
// show: false,
// },
},
tooltip: {
trigger: "item",
backgroundColor: "rgba(255,255,255,0.8)",
textStyle: {
color: "#666",
decoration: "none",
},
formatter: "{b}:{c}",
},
itemStyle: {
normal: {
areaColor: {
type: "linear",
x: 1200,
y: 0,
x2: 0,
y2: 0,
colorStops: [
{
offset: 0,
color: "rgba(3,27,78,0.75)", // 0% 处的颜色
},
{
offset: 1,
color: "rgba(58,149,253,0.75)", // 50% 处的颜色
},
],
global: true, // 缺省为 false
},
areaColor: "rgba(20,60,100,0.5)",
borderColor: "#fff",
borderWidth: 0.2,
},
......@@ -118,24 +135,7 @@ export default {
markPoint: {
symbol: "none",
},
data: [
{
name: "太原市",
value: "1202",
},
{
name: "晋城市",
value: "396",
},
{
name: "长治市",
value: "1125",
},
{
name: "临汾市",
value: "635",
},
],
data: dataNum,
},
{
type: "lines",
......@@ -160,79 +160,53 @@ export default {
shadowBlur: 10,
},
},
data: [
[
[112.531079, 37.863924],
[114, 39],
],
[
[112.531079, 37.863924],
[112, 39],
],
],
data: dataPosition,
},
{
type: "effectScatter",
coordinateSystem: "geo",
symbolSize: 10,
rippleEffect: {
// 坐标点动画
period: 3,
scale: 5,
brushType: "fill",
},
label: {
normal: {
show: true,
position: "right",
formatter: "{b}",
color: "#f28813",
fontWeight: "bold",
fontSize: 14,
},
},
data: dataScatter,
symbolSize: function (val) {
return 8;
},
showEffectOn: "render",
rippleEffect: {
brushType: "stroke",
},
hoverAnimation: true,
label: {
normal: {
formatter: "{b}",
position: "left",
show: false,
},
},
itemStyle: {
normal: {
color: "#FBDEDE",
shadowBlur: 15,
shadowColor: "#FBDEDE",
},
},
zlevel: 1,
},
// {
// type: "effectScatter",
// coordinateSystem: "geo",
// symbolSize: 10,
// rippleEffect: {
// // 坐标点动画
// period: 3,
// scale: 5,
// brushType: "fill",
// },
// label: {
// normal: {
// show: true,
// position: "right",
// formatter: "{b}",
// color: "#f28813",
// fontWeight: "bold",
// fontSize: 14,
// },
// },
// data: [
// {
// name: "太原市",
// value: [112.531079, 37.863924],
// },
// {
// name: "晋城市",
// value: [112, 39],
// },
// {
// name: "长治市",
// value: "1125",
// },
// {
// name: "临汾市",
// value: "635",
// },
// ],
// symbolSize: function (val) {
// return 8;
// },
// showEffectOn: "render",
// rippleEffect: {
// brushType: "stroke",
// },
// hoverAnimation: true,
// label: {
// normal: {
// formatter: "{b}",
// position: "left",
// show: false,
// },
// },
// itemStyle: {
// normal: {
// color: "#FBDEDE",
// shadowBlur: 15,
// shadowColor: "#FBDEDE",
// },
// },
// zlevel: 1,
// },
],
};
myChart.setOption(option);
......@@ -245,10 +219,48 @@ export default {
};
</script>
<style lang="less" scoped>
.map_title {
position: absolute;
color: #fff;
.text_title {
position: absolute;
left: 60px;
top: 5px;
font-family: "jiangcheng";
font-weight: normal;
font-size: 20px;
text-shadow: 0px 2px 8px rgba(5, 28, 55, 0.42);
background: linear-gradient(
0deg,
rgba(14, 197, 236, 0.9) 0%,
rgba(49, 190, 255, 0.5) 0%,
rgba(239, 252, 254, 0.06) 58.7646484375%
);
-webkit-background-clip: text;
// -webkit-text-fill-color: transparent;
}
}
.center_top_imgs {
height: 140px;
width: 100%;
display: flex;
.text {
padding-left: 76px;
padding-top: 45px;
div {
font-size: 18px;
font-family: "jiangcheng";
font-weight: normal;
font-style: italic;
color: #ffffff;
line-height: 32px;
text-shadow: 1px 2px 0px rgba(17, 20, 22, 0.22);
}
}
.top_img1 {
width: 25%;
height: 100%;
......
src/views/screen/components/patentType.vue
......@@ -31,7 +31,7 @@
<EchartsCon
:id="'123'"
:option="option1"
:height="'170px'"
:height="'140px'"
v-if="option1"
></EchartsCon>
</div>
......@@ -40,43 +40,47 @@
<div class="center_left_title">
<span>专利授权对比图</span>
<div class="center_left_title_btn">
<span
:class="[activeTrend == 1 ? 'active' : '']"
@click="changeAuth('1')"
<span :class="[type2 == 1 ? 'active' : '']" @click="changeAuth(1)"
>专利总量</span
>
<span
:class="[activeTrend == 2 ? 'active' : '']"
@click="changeAuth('2')"
<span :class="[type2 == 2 ? 'active' : '']" @click="changeAuth(2)"
>发明专利</span
>
<span
:class="[activeTrend == 3 ? 'active' : '']"
@click="changeAuth('3')"
<span :class="[type2 == 3 ? 'active' : '']" @click="changeAuth(3)"
>使用新型</span
>
<span
:class="[activeTrend == 3 ? 'active' : '']"
@click="changeAuth('3')"
<span :class="[type2 == 4 ? 'active' : '']" @click="changeAuth(4)"
>外观设计</span
>
<a-select
ref="select"
v-model:value="value1"
style="width: 120px"
@change="handleChange"
:options="yearOptions"
v-model:value="yearValue1"
@change="changeYear"
:options="options1"
>
</a-select>
<a-select
ref="select"
v-model:value="yearValue2"
@change="changeYear"
:options="options1"
>
</a-select>
</div>
</div>
<EchartsCon :id="'456'" :option="option2" :height="'200px'"></EchartsCon>
<div class="echarts_container">
<EchartsCon
:id="'456'"
:option="option2"
:height="'140px'"
v-if="option2"
></EchartsCon>
</div>
</div>
</template>
<script>
import EchartsCon from "@/components/EchartsCon.vue";
import { patentType } from "@/utils/screen.js";
import { patentType, patentAuthorized } from "@/utils/screen.js";
import { message } from "ant-design-vue";
export default {
......@@ -129,6 +133,10 @@ export default {
option1: null,
option2: null,
type1: "apply_num",
type2: 1,
options1: [],
yearValue1: null,
yearValue2: null,
};
},
components: {
......@@ -136,6 +144,18 @@ export default {
},
methods: {
init() {
//近十年年份数据
let date = new Date();
let years = Array.from(
{ length: 10 },
(v, i) => date.getFullYear() - 10 + i + 1
).reverse();
years.forEach((item) => {
this.options1.push({
label: item,
value: item,
});
});
this.getTypeData();
this.getCompareData();
},
......@@ -160,25 +180,126 @@ export default {
});
},
//修改时间
handleChange(){
this.getTypeData()
handleChange() {
this.getTypeData();
},
//修改专利授权时间
changeYear() {
let xdata = [
"1月",
"2月",
"3月",
"4月",
"5月",
"6月",
"7月",
"8月",
"9月",
"10月",
"11月",
"12月",
],
ydata1 = [],
ydata2 = [];
patentAuthorized({
start_year: this.yearValue1,
end_year: this.yearValue2,
type: this.type2,
}).then((res) => {
res.data.start_year.forEach((item) => {
ydata1.push(item.value);
});
res.data.end_year.forEach((item) => {
ydata2.push(item.value);
});
this.getCompareOption(xdata, ydata1, ydata2);
});
},
//获取专利授权对比
getCompareData() {
let myData3 = [
"联庄村",
"唐家堡村",
"小山村",
"高泉村",
"寒树村",
"寒水村",
"中化村 ",
"金华村",
"好地掌村",
"庙川村",
];
let jch = [200, 340, 320, 220, 360, 300, 160, 400, 250, 280];
let tph = [160, 300, 280, 180, 300, 240, 120, 340, 200, 250];
let xdata = [
"1月",
"2月",
"3月",
"4月",
"5月",
"6月",
"7月",
"8月",
"9月",
"10月",
"11月",
"12月",
],
ydata1 = [],
ydata2 = [];
this.yearValue1 = this.options1[0].value;
this.yearValue2 = this.options1[1].value;
patentAuthorized({
start_year: this.yearValue1,
end_year: this.yearValue2,
type: this.type2,
}).then((res) => {
res.data.start_year.forEach((item) => {
ydata1.push(item.value);
});
res.data.end_year.forEach((item) => {
ydata2.push(item.value);
});
this.getCompareOption(xdata, ydata1, ydata2);
});
},
getOption(data) {
const colorList = ["#1E78FF", "#E94C5B", "#2EC59A"];
this.option1 = {
tooltip: {
show: false,
},
legend: {
top: "center",
left: "10%",
orient: "vertical",
icon: "circle",
itemWidth: 10,
itemHeight: 10,
itemGap: 8,
textStyle: {
color: "#fff",
fontFamily: "jiangcheng",
},
},
series: [
{
type: "pie",
center: ["50%", "50%"],
radius: ["30%", "70%"],
label: {
show: true,
position: "inside",
color: "#fff",
formatter: "{d}%",
},
labelLine: {
show: false,
},
itemStyle: {
normal: {
color: (params) => {
return colorList[params.dataIndex];
},
},
shadowColor: "rgba(0, 0, 0, 0.5)",
shadowBlur: 10,
},
// silent: true,
data: data,
},
],
};
},
//专利授权对比图option
getCompareOption(xdata, ydata1, ydata2) {
this.option2 = {
tooltip: {
trigger: "axis",
......@@ -192,18 +313,17 @@ export default {
color: "#fff",
},
backgroundColor: "rgba(45, 67, 119, 0.8)", //设置背景颜色
formatter: "{b}：{c}",
},
// grid: {
// left: "3%",
// right: "3%",
// bottom: "1%",
// top: "18%",
// containLabel: true,
// },
},
grid: {
left: "3%",
right: "3%",
bottom: "1%",
top: "5%",
containLabel: true,
},
xAxis: {
type: "category",
data: myData3,
data: xdata,
axisPointer: {
type: "shadow",
},
......@@ -258,8 +378,8 @@ export default {
},
series: [
{
data: jch,
name: "监测户",
data: ydata1,
name: this.yearValue1,
type: "bar",
barWidth: "8px",
itemStyle: {
......@@ -278,8 +398,8 @@ export default {
},
},
{
data: tph,
name: "脱贫户",
data: ydata2,
name: this.yearValue2,
type: "bar",
barWidth: "8px",
itemStyle: {
......@@ -300,66 +420,23 @@ export default {
],
};
},
getOption(data) {
const colorList = ["#1E78FF", "#E94C5B", "#2EC59A"];
this.option1 = {
tooltip: {
show: false,
},
legend: {
top: "center",
left: "10%",
orient: "vertical",
icon: "circle",
itemWidth: 10,
itemHeight: 10,
itemGap: 8,
textStyle: {
color: "#fff",
fontFamily: "jiangcheng",
},
},
series: [
{
type: "pie",
center: ["50%", "50%"],
radius: ["20%", "50%"],
label: {
show: true,
position: "inside",
color: "#fff",
formatter: "{d}%",
},
labelLine: {
show: false,
},
itemStyle: {
normal: {
color: (params) => {
return colorList[params.dataIndex];
},
},
shadowColor: "rgba(0, 0, 0, 0.5)",
shadowBlur: 10,
},
// silent: true,
data: data,
},
],
};
},
//切换专利类型
changeType(type) {
this.type1 = type;
this.getTypeData();
},
//切换专利授权类型
changeAuth(type) {
this.type2 = type;
this.getCompareData();
},
},
beforeMount() {
this.init();
},
mounted() {
this.getOption();
// this.getOption();
// this.getCompareOption()
},
};
</script>
......
src/views/screen/index.vue
......@@ -3,13 +3,13 @@
<header>太原理工大学专利成果转移转化智能推荐系统</header>
<div class="center">
<div class="center_left">
<!-- <patentType></patentType> -->
<patentType></patentType>
</div>
<div class="center_map">
<patentMap></patentMap>
</div>
<div class="center_right">
<!-- <patentType></patentType> -->
<!-- <patentPerson></patentPerson> -->
</div>
</div>
<div class="bottom">
......@@ -18,37 +18,39 @@
<span>专利发展趋势图</span>
<div class="bottom_title_btn">
<span
:class="[activeTrend == 1 ? 'active' : '']"
@click="changetrend('1')"
:class="[activeTrend == 'apply_num' ? 'active' : '']"
@click="changetrend('apply_num')"
>申请量</span
>
<span
:class="[activeTrend == 2 ? 'active' : '']"
@click="changetrend('2')"
:class="[activeTrend == 'publish_num' ? 'active' : '']"
@click="changetrend('publish_num')"
>公布量</span
>
<span
:class="[activeTrend == 3 ? 'active' : '']"
@click="changetrend('3')"
:class="[activeTrend == 'authorize_num' ? 'active' : '']"
@click="changetrend('authorize_num')"
>授权量</span
>
<a-select
ref="select"
v-model:value="value1"
v-model:value="trend_year"
style="width: 120px"
@focus="focus"
:options="yearOptions"
@change="handleChange"
>
</a-select>
</div>
</div>
<div class="echarts_container">
<EchartsCon
:id="'patent_trend'"
:option="option5"
:height="'120px'"
:height="'150px'"
v-if="option5"
></EchartsCon>
</div>
</div>
<div class="bottom_echart">
<div class="bottom_title">
<span>专利产业布局分布（山西十大产业）</span>
......@@ -151,15 +153,18 @@
</div>
</template>
<script>
import { patentDevelop } from "@/utils/screen.js";
import EchartsCon from "@/components/EchartsCon.vue";
import patentType from "./components/patentType.vue";
import patentMap from "./components/patentMap.vue";
import patentPerson from "./components/patentPerson.vue"
export default {
name: "screen",
data() {
return {
option5: null,
activeTrend: 1,
activeTrend: "apply_num",
trend_year: 8,
rankArr: [
{
index: "1",
......@@ -192,6 +197,40 @@ export default {
name: "特钢材料",
},
],
yearOptions: [
{
value: 3,
label: "近三年",
},
{
value: 4,
label: "近四年",
},
{
value: 5,
label: "近五年",
},
{
value: 6,
label: "近六年",
},
{
value: 7,
label: "近七年",
},
{
value: 8,
label: "近八年",
},
{
value: 9,
label: "近九年",
},
{
value: 10,
label: "近十年",
},
],
};
},
computed: {
......@@ -224,13 +263,48 @@ export default {
EchartsCon,
patentType,
patentMap,
patentPerson
},
methods: {
init() {
//获取专利发展趋势图
this.getTrend();
},
//修改时间
handleChange() {
this.getTrend();
},
getTrend() {
let data = {
xData: [],
yData1: [],
yData2: [],
yData3: [],
yData4: [],
};
patentDevelop({ type: this.activeTrend, year: this.trend_year }).then(
(res) => {
if (res.code == 0) {
res.data.patent_all.forEach((item) => {
data.xData.push(item.name);
data.yData1.push(item.value);
});
res.data.invention_patent.forEach((item) => {
data.yData2.push(item.value);
});
res.data.utility_model.forEach((item) => {
data.yData3.push(item.value);
});
res.data.appearance_design.forEach((item) => {
data.yData4.push(item.value);
});
this.getTrendData(data);
}
}
);
},
getTrendData(data) {
this.option5 = {
color: ["#E94C5B", "#1EFF2E", "#1EE2FF", "#FFA81E"],
tooltip: {
......@@ -267,10 +341,10 @@ export default {
},
},
},
// data: ["", "能力值"],
},
xAxis: {
type: "category",
data: data.xData,
axisLine: {
lineStyle: {
color: "#B5C5D4",
......@@ -317,12 +391,10 @@ export default {
series: [
{
type: "line",
// symbol: "none",
// showSymbol: false,
smooth: true, // 是否曲线
symbol: "none", // 不显示连接点
name: "专利总量", // 图例对应类别
data: [4000, 6000, 7000, 2000, 5000, 7000, 9000], // 纵坐标数据
data: data.yData1, // 纵坐标数据
areaStyle: {
color: {
type: "linear",
......@@ -348,7 +420,7 @@ export default {
smooth: true,
symbol: "none", // 不显示连接点
name: "发明专利",
data: [1000, 4000, 5000, 6000, 3000, 8000, 7000],
data: data.yData2,
areaStyle: {
color: {
type: "linear",
......@@ -374,7 +446,7 @@ export default {
smooth: true,
symbol: "none", // 不显示连接点
name: "使用新型",
data: [1000, 4000, 5000, 4000, 3000, 8000, 3000],
data: data.yData3,
areaStyle: {
color: {
type: "linear",
......@@ -401,7 +473,7 @@ export default {
smooth: true,
symbol: "none", // 不显示连接点
name: "外观设计",
data: [1000, 3000, 5000, 6000, 3000, 8000, 7000],
data: data.yData4,
areaStyle: {
color: {
type: "linear",
......@@ -427,6 +499,7 @@ export default {
},
changetrend(tab) {
this.activeTrend = tab;
this.getTrend()
},
},
......@@ -458,20 +531,20 @@ export default {
text-shadow: 0px 4px 1px rgba(19, 80, 143, 0.66);
}
.center {
height: 65%;
height: 60%;
display: flex;
.center_left {
width: 28%;
width: 30%;
}
.center_map {
width: 44%;
width: 40%;
}
.center_right {
width: 28%;
width: 30%;
}
}
.bottom {
height: 120px;
// height: 120px;
display: flex;
.bottom_echart {
......@@ -516,7 +589,7 @@ export default {
}
}
.rank_con {
height:160px;
height: 160px;
width: 100%;
display: flex;
justify-content: space-between;
......@@ -620,4 +693,8 @@ export default {
}
// background-size:100% 100%;
}
.echarts_container {
// height: 120px;
margin-top: 20px;
}
</style>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment