Skip to content

T
ty_patentSys
Commit ad826b85 by hanxiao
Options

联调地图和专利趋势图

parent 6075e303
Showing with 908 additions and 253 deletions
src/utils/screen.js
import { get, post, put, Delete } from './request' import { get, post, put, Delete } from './request'
export const patentType = p => post('/api/dataScreen/patentType', p); 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> <template>
<div> <div>
<div class="center_top_imgs"> <div class="center_top_imgs">
<div class="top_img1"> <div class="top_img1 text">
<div>专利数量</div> <div>专利数量</div>
<div><span>50595</span>项</div> <div><span>50595</span>项</div>
</div> </div>
<div class="top_img2"></div> <div class="top_img2 text">
<div class="top_img3"></div> <div>专利数量</div>
<div class="top_img4"></div> <div><span>50595</span>项</div>
</div> </div>
<div> <div class="top_img3 text">
<!-- <h2>专利转化落地区域图</h2> --> <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>
<div style="height: 300px" id="area11"></div> <div style="height: 300px" id="area11"></div>
</div> </div>
</template> </template>
<script> <script>
import * as echarts from "echarts"; import * as echarts from "echarts";
import { patentTransform } from "@/utils/screen.js";
import axios from "axios"; import axios from "axios";
export default { export default {
name: "patentMap", name: "patentMap",
...@@ -31,10 +42,44 @@ export default { ...@@ -31,10 +42,44 @@ export default {
this.getMap(); this.getMap();
}, },
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")); const myChart = echarts.init(document.getElementById("area11"));
axios.get("/map_json/shanxi.json").then((res) => { axios.get("/map_json/shanxi.json").then((res) => {
echarts.registerMap("shanxi", res.data); echarts.registerMap("shanxi", res.data);
var option = { var option = {
tooltip: {
trigger: "item",
formatter: function (params) {
if (params.seriesType == "map") {
return params.data.name + ":" + params.data.value;
}
},
},
geo: [ geo: [
{ {
map: "shanxi", map: "shanxi",
...@@ -75,40 +120,12 @@ export default { ...@@ -75,40 +120,12 @@ export default {
show: true, show: true,
textStyle: { color: "#fff", fontSize: "120%" }, 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: { itemStyle: {
normal: { normal: {
areaColor: { areaColor: "rgba(20,60,100,0.5)",
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
},
borderColor: "#fff", borderColor: "#fff",
borderWidth: 0.2, borderWidth: 0.2,
}, },
...@@ -118,24 +135,7 @@ export default { ...@@ -118,24 +135,7 @@ export default {
markPoint: { markPoint: {
symbol: "none", symbol: "none",
}, },
data: [ data: dataNum,
{
name: "太原市",
value: "1202",
},
{
name: "晋城市",
value: "396",
},
{
name: "长治市",
value: "1125",
},
{
name: "临汾市",
value: "635",
},
],
}, },
{ {
type: "lines", type: "lines",
...@@ -160,79 +160,53 @@ export default { ...@@ -160,79 +160,53 @@ export default {
shadowBlur: 10, shadowBlur: 10,
}, },
}, },
data: [ data: dataPosition,
[ },
[112.531079, 37.863924], {
[114, 39], type: "effectScatter",
], coordinateSystem: "geo",
[ symbolSize: 10,
[112.531079, 37.863924], rippleEffect: {
[112, 39], // 坐标点动画
], 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); myChart.setOption(option);
...@@ -245,10 +219,48 @@ export default { ...@@ -245,10 +219,48 @@ export default {
}; };
</script> </script>
<style lang="less" scoped> <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 { .center_top_imgs {
height: 140px; height: 140px;
width: 100%; width: 100%;
display: flex; 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 { .top_img1 {
width: 25%; width: 25%;
height: 100%; height: 100%;
......
src/views/screen/components/patentPerson.vue 0 → 100644
<template>
<div class="center_left_echarts">
<div class="center_left_title">
<span>专利受让省份排名</span>
<div class="center_left_title_btn">
<span
:class="[type1 == 'apply_num' ? 'active' : '']"
@click="changeType('apply_num')"
>申请量</span
>
<span
:class="[type1 == 'publish_num' ? 'active' : '']"
@click="changeType('publish_num')"
>公布量</span
>
<span
:class="[type1 == 'authorize_num' ? 'active' : '']"
@click="changeType('authorize_num')"
>授权量</span
>
</div>
</div>
<div class="echarts_container">
<EchartsCon
:id="'123'"
:option="option1"
:height="'140px'"
v-if="option1"
></EchartsCon>
</div>
</div>
<div class="center_left_echarts">
<div class="center_left_title">
<span>专利发明人排名</span>
<div class="center_left_title_btn">
<span :class="[type2 == 1 ? 'active' : '']" @click="changeAuth(1)"
>专利总量</span
>
<span :class="[type2 == 2 ? 'active' : '']" @click="changeAuth(2)"
>发明专利</span
>
<span :class="[type2 == 3 ? 'active' : '']" @click="changeAuth(3)"
>使用新型</span
>
<span :class="[type2 == 4 ? 'active' : '']" @click="changeAuth(4)"
>外观设计</span
>
<a-select
ref="select"
v-model:value="yearValue1"
@change="changeYear"
:options="options1"
>
</a-select>
</div>
</div>
<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, patentAuthorized } from "@/utils/screen.js";
import { message } from "ant-design-vue";
export default {
name: "patentPerson",
data() {
return {
yearOptions: [
{
value: 1,
label: "今年",
},
{
value: 2,
label: "近两年",
},
{
value: 3,
label: "近三年",
},
{
value: 4,
label: "近四年",
},
{
value: 5,
label: "近五年",
},
{
value: 6,
label: "近六年",
},
{
value: 7,
label: "近七年",
},
{
value: 8,
label: "近八年",
},
{
value: 9,
label: "近九年",
},
{
value: 10,
label: "近十年",
},
],
yearValue: 3,
option1: null,
option2: null,
type1: "apply_num",
type2: 1,
options1: [],
yearValue1: null,
yearValue2: null,
};
},
components: {
EchartsCon,
},
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();
},
//获取专利类型数据
getTypeData() {
let data = [];
patentType({ type: this.type1, year: this.yearValue }).then((res) => {
if (res.code == 0 && res.data.length > 0) {
res.data.forEach((item) => {
data.push({
name: item.name,
value: item.num,
});
});
this.getOption(data);
} else if (res.code == 0 && res.data.length == 0) {
data = [];
this.getOption(data);
} else {
message.error(res.msg);
}
});
},
//修改时间
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 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",
axisPointer: {
type: "shadow",
textStyle: {
color: "#fff",
},
},
textStyle: {
color: "#fff",
},
backgroundColor: "rgba(45, 67, 119, 0.8)", //设置背景颜色
},
grid: {
left: "3%",
right: "3%",
bottom: "1%",
top: "5%",
containLabel: true,
},
xAxis: {
type: "category",
data: xdata,
axisPointer: {
type: "shadow",
},
axisLabel: {
color: "rgba(255, 255, 255, .8)",
interval: 0,
rotate: 30,
margin: 15,
},
axisLine: {
show: true,
lineStyle: {
color: "rgba(45, 67, 119, 0.8)",
},
},
splitLine: {
show: false,
},
axisTick: {
show: false,
},
},
yAxis: {
type: "value",
// name: "(户)",
nameTextStyle: {
color: "#B5C5D4",
fontSize: 14,
},
axisLine: {
show: true,
lineStyle: {
color: "rgba(45, 67, 119, 0.8)",
},
},
min: 0,
axisLabel: {
show: true,
color: "#B5C5D4",
},
axisTick: {
show: false,
},
splitLine: {
show: true,
lineStyle: {
// width: 0.5,
color: "rgba(45, 67, 119, 1)",
type: "dashed",
},
},
},
series: [
{
data: ydata1,
name: this.yearValue1,
type: "bar",
barWidth: "8px",
itemStyle: {
normal: {
color: "rgba(255, 100, 102, 1)",
borderRadius: [5, 5, 0, 0],
},
},
label: {
show: false,
position: "top",
fontSize: 12,
color: "#F5F5F5",
offset: [0, -5],
formatter: "{c}",
},
},
{
data: ydata2,
name: this.yearValue2,
type: "bar",
barWidth: "8px",
itemStyle: {
normal: {
color: "rgba(68, 174, 248, 1)",
borderRadius: [5, 5, 0, 0],
},
},
label: {
show: false,
position: "top",
fontSize: 12,
color: "#F5F5F5",
offset: [0, -5],
formatter: "{c}",
},
},
],
};
},
//切换专利类型
changeType(type) {
this.type1 = type;
this.getTypeData();
},
//切换专利授权类型
changeAuth(type) {
this.type2 = type;
this.getCompareData();
},
},
beforeMount() {
this.init();
},
mounted() {
// this.getOption();
// this.getCompareOption()
},
};
</script>
<style lang="less" scoped>
.center_left_echarts {
.center_left_title {
background: url("../../../static/screen/title-long.png") no-repeat;
background-size: 100% 100%;
font-size: 20px;
height: 39px;
width: 100%;
font-family: "jiangcheng";
font-weight: normal;
font-style: italic;
color: #f6f9fe;
text-shadow: 0px 2px 8px rgba(5, 28, 55, 0.42);
padding-left: 30px;
padding-top: 6px;
.center_left_title_btn {
font-size: 14px;
font-family: "jiangcheng";
font-weight: normal;
color: #bbcdef;
opacity: 0.8;
span {
padding: 5px 10px;
cursor: pointer;
}
.active {
color: #fff;
text-shadow: 0px 2px 8px #f6f9fe;
}
:deep(.ant-select:not(.ant-select-customize-input) .ant-select-selector) {
background-color: #2d58b8;
color: #f6f9fe;
font-family: Arial, sans-serif;
}
:deep(.ant-select-dropdown) {
background-color: #1052df !important;
}
:deep(.ant-select) {
width: 90px !important;
float: right;
}
:deep(
.ant-select-single.ant-select-show-arrow .ant-select-selection-item
) {
padding-right: 10px;
}
}
}
.echarts_container {
// height: 120px;
margin-top: 40px;
}
}
</style>
src/views/screen/components/patentType.vue
...@@ -31,7 +31,7 @@ ...@@ -31,7 +31,7 @@
<EchartsCon <EchartsCon
:id="'123'" :id="'123'"
:option="option1" :option="option1"
:height="'170px'" :height="'140px'"
v-if="option1" v-if="option1"
></EchartsCon> ></EchartsCon>
</div> </div>
...@@ -40,43 +40,47 @@ ...@@ -40,43 +40,47 @@
<div class="center_left_title"> <div class="center_left_title">
<span>专利授权对比图</span> <span>专利授权对比图</span>
<div class="center_left_title_btn"> <div class="center_left_title_btn">
<span <span :class="[type2 == 1 ? 'active' : '']" @click="changeAuth(1)"
:class="[activeTrend == 1 ? 'active' : '']"
@click="changeAuth('1')"
>专利总量</span >专利总量</span
> >
<span <span :class="[type2 == 2 ? 'active' : '']" @click="changeAuth(2)"
:class="[activeTrend == 2 ? 'active' : '']"
@click="changeAuth('2')"
>发明专利</span >发明专利</span
> >
<span <span :class="[type2 == 3 ? 'active' : '']" @click="changeAuth(3)"
:class="[activeTrend == 3 ? 'active' : '']"
@click="changeAuth('3')"
>使用新型</span >使用新型</span
> >
<span <span :class="[type2 == 4 ? 'active' : '']" @click="changeAuth(4)"
:class="[activeTrend == 3 ? 'active' : '']"
@click="changeAuth('3')"
>外观设计</span >外观设计</span
> >
<a-select <a-select
ref="select" ref="select"
v-model:value="value1" v-model:value="yearValue1"
style="width: 120px" @change="changeYear"
@change="handleChange" :options="options1"
:options="yearOptions" >
</a-select>
<a-select
ref="select"
v-model:value="yearValue2"
@change="changeYear"
:options="options1"
> >
</a-select> </a-select>
</div> </div>
</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> </div>
</template> </template>
<script> <script>
import EchartsCon from "@/components/EchartsCon.vue"; 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"; import { message } from "ant-design-vue";
export default { export default {
...@@ -129,6 +133,10 @@ export default { ...@@ -129,6 +133,10 @@ export default {
option1: null, option1: null,
option2: null, option2: null,
type1: "apply_num", type1: "apply_num",
type2: 1,
options1: [],
yearValue1: null,
yearValue2: null,
}; };
}, },
components: { components: {
...@@ -136,6 +144,18 @@ export default { ...@@ -136,6 +144,18 @@ export default {
}, },
methods: { methods: {
init() { 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.getTypeData();
this.getCompareData(); this.getCompareData();
}, },
...@@ -160,25 +180,126 @@ export default { ...@@ -160,25 +180,126 @@ export default {
}); });
}, },
//修改时间 //修改时间
handleChange(){ handleChange() {
this.getTypeData() 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() { getCompareData() {
let myData3 = [ let xdata = [
"联庄村", "1月",
"唐家堡村", "2月",
"小山村", "3月",
"高泉村", "4月",
"寒树村", "5月",
"寒水村", "6月",
"中化村 ", "7月",
"金华村", "8月",
"好地掌村", "9月",
"庙川村", "10月",
]; "11月",
let jch = [200, 340, 320, 220, 360, 300, 160, 400, 250, 280]; "12月",
let tph = [160, 300, 280, 180, 300, 240, 120, 340, 200, 250]; ],
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 = { this.option2 = {
tooltip: { tooltip: {
trigger: "axis", trigger: "axis",
...@@ -192,18 +313,17 @@ export default { ...@@ -192,18 +313,17 @@ export default {
color: "#fff", color: "#fff",
}, },
backgroundColor: "rgba(45, 67, 119, 0.8)", //设置背景颜色 backgroundColor: "rgba(45, 67, 119, 0.8)", //设置背景颜色
formatter: "{b}：{c}", },
}, grid: {
// grid: { left: "3%",
// left: "3%", right: "3%",
// right: "3%", bottom: "1%",
// bottom: "1%", top: "5%",
// top: "18%", containLabel: true,
// containLabel: true, },
// },
xAxis: { xAxis: {
type: "category", type: "category",
data: myData3, data: xdata,
axisPointer: { axisPointer: {
type: "shadow", type: "shadow",
}, },
...@@ -258,8 +378,8 @@ export default { ...@@ -258,8 +378,8 @@ export default {
}, },
series: [ series: [
{ {
data: jch, data: ydata1,
name: "监测户", name: this.yearValue1,
type: "bar", type: "bar",
barWidth: "8px", barWidth: "8px",
itemStyle: { itemStyle: {
...@@ -278,8 +398,8 @@ export default { ...@@ -278,8 +398,8 @@ export default {
}, },
}, },
{ {
data: tph, data: ydata2,
name: "脱贫户", name: this.yearValue2,
type: "bar", type: "bar",
barWidth: "8px", barWidth: "8px",
itemStyle: { itemStyle: {
...@@ -300,66 +420,23 @@ export default { ...@@ -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) { changeType(type) {
this.type1 = type; this.type1 = type;
this.getTypeData(); this.getTypeData();
}, },
//切换专利授权类型
changeAuth(type) {
this.type2 = type;
this.getCompareData();
},
}, },
beforeMount() { beforeMount() {
this.init(); this.init();
}, },
mounted() { mounted() {
this.getOption(); // this.getOption();
// this.getCompareOption()
}, },
}; };
</script> </script>
......
src/views/screen/index.vue
...@@ -3,13 +3,13 @@ ...@@ -3,13 +3,13 @@
<header>太原理工大学专利成果转移转化智能推荐系统</header> <header>太原理工大学专利成果转移转化智能推荐系统</header>
<div class="center"> <div class="center">
<div class="center_left"> <div class="center_left">
<!-- <patentType></patentType> --> <patentType></patentType>
</div> </div>
<div class="center_map"> <div class="center_map">
<patentMap></patentMap> <patentMap></patentMap>
</div> </div>
<div class="center_right"> <div class="center_right">
<!-- <patentType></patentType> --> <!-- <patentPerson></patentPerson> -->
</div> </div>
</div> </div>
<div class="bottom"> <div class="bottom">
...@@ -18,37 +18,39 @@ ...@@ -18,37 +18,39 @@
<span>专利发展趋势图</span> <span>专利发展趋势图</span>
<div class="bottom_title_btn"> <div class="bottom_title_btn">
<span <span
:class="[activeTrend == 1 ? 'active' : '']" :class="[activeTrend == 'apply_num' ? 'active' : '']"
@click="changetrend('1')" @click="changetrend('apply_num')"
>申请量</span >申请量</span
> >
<span <span
:class="[activeTrend == 2 ? 'active' : '']" :class="[activeTrend == 'publish_num' ? 'active' : '']"
@click="changetrend('2')" @click="changetrend('publish_num')"
>公布量</span >公布量</span
> >
<span <span
:class="[activeTrend == 3 ? 'active' : '']" :class="[activeTrend == 'authorize_num' ? 'active' : '']"
@click="changetrend('3')" @click="changetrend('authorize_num')"
>授权量</span >授权量</span
> >
<a-select <a-select
ref="select" ref="select"
v-model:value="value1" v-model:value="trend_year"
style="width: 120px" style="width: 120px"
@focus="focus" :options="yearOptions"
@change="handleChange" @change="handleChange"
> >
</a-select> </a-select>
</div> </div>
</div> </div>
<div class="echarts_container">
<EchartsCon <EchartsCon
:id="'patent_trend'" :id="'patent_trend'"
:option="option5" :option="option5"
:height="'120px'" :height="'150px'"
v-if="option5"
></EchartsCon> ></EchartsCon>
</div> </div>
</div>
<div class="bottom_echart"> <div class="bottom_echart">
<div class="bottom_title"> <div class="bottom_title">
<span>专利产业布局分布（山西十大产业）</span> <span>专利产业布局分布（山西十大产业）</span>
...@@ -151,15 +153,18 @@ ...@@ -151,15 +153,18 @@
</div> </div>
</template> </template>
<script> <script>
import { patentDevelop } from "@/utils/screen.js";
import EchartsCon from "@/components/EchartsCon.vue"; import EchartsCon from "@/components/EchartsCon.vue";
import patentType from "./components/patentType.vue"; import patentType from "./components/patentType.vue";
import patentMap from "./components/patentMap.vue"; import patentMap from "./components/patentMap.vue";
import patentPerson from "./components/patentPerson.vue"
export default { export default {
name: "screen", name: "screen",
data() { data() {
return { return {
option5: null, option5: null,
activeTrend: 1, activeTrend: "apply_num",
trend_year: 8,
rankArr: [ rankArr: [
{ {
index: "1", index: "1",
...@@ -192,6 +197,40 @@ export default { ...@@ -192,6 +197,40 @@ export default {
name: "特钢材料", 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: { computed: {
...@@ -224,13 +263,48 @@ export default { ...@@ -224,13 +263,48 @@ export default {
EchartsCon, EchartsCon,
patentType, patentType,
patentMap, patentMap,
patentPerson
}, },
methods: { methods: {
init() { init() {
//获取专利发展趋势图 //获取专利发展趋势图
this.getTrend(); this.getTrend();
}, },
//修改时间
handleChange() {
this.getTrend();
},
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 = { this.option5 = {
color: ["#E94C5B", "#1EFF2E", "#1EE2FF", "#FFA81E"], color: ["#E94C5B", "#1EFF2E", "#1EE2FF", "#FFA81E"],
tooltip: { tooltip: {
...@@ -267,10 +341,10 @@ export default { ...@@ -267,10 +341,10 @@ export default {
}, },
}, },
}, },
// data: ["", "能力值"],
}, },
xAxis: { xAxis: {
type: "category", type: "category",
data: data.xData,
axisLine: { axisLine: {
lineStyle: { lineStyle: {
color: "#B5C5D4", color: "#B5C5D4",
...@@ -317,12 +391,10 @@ export default { ...@@ -317,12 +391,10 @@ export default {
series: [ series: [
{ {
type: "line", type: "line",
// symbol: "none",
// showSymbol: false,
smooth: true, // 是否曲线 smooth: true, // 是否曲线
symbol: "none", // 不显示连接点 symbol: "none", // 不显示连接点
name: "专利总量", // 图例对应类别 name: "专利总量", // 图例对应类别
data: [4000, 6000, 7000, 2000, 5000, 7000, 9000], // 纵坐标数据 data: data.yData1, // 纵坐标数据
areaStyle: { areaStyle: {
color: { color: {
type: "linear", type: "linear",
...@@ -348,7 +420,7 @@ export default { ...@@ -348,7 +420,7 @@ export default {
smooth: true, smooth: true,
symbol: "none", // 不显示连接点 symbol: "none", // 不显示连接点
name: "发明专利", name: "发明专利",
data: [1000, 4000, 5000, 6000, 3000, 8000, 7000], data: data.yData2,
areaStyle: { areaStyle: {
color: { color: {
type: "linear", type: "linear",
...@@ -374,7 +446,7 @@ export default { ...@@ -374,7 +446,7 @@ export default {
smooth: true, smooth: true,
symbol: "none", // 不显示连接点 symbol: "none", // 不显示连接点
name: "使用新型", name: "使用新型",
data: [1000, 4000, 5000, 4000, 3000, 8000, 3000], data: data.yData3,
areaStyle: { areaStyle: {
color: { color: {
type: "linear", type: "linear",
...@@ -401,7 +473,7 @@ export default { ...@@ -401,7 +473,7 @@ export default {
smooth: true, smooth: true,
symbol: "none", // 不显示连接点 symbol: "none", // 不显示连接点
name: "外观设计", name: "外观设计",
data: [1000, 3000, 5000, 6000, 3000, 8000, 7000], data: data.yData4,
areaStyle: { areaStyle: {
color: { color: {
type: "linear", type: "linear",
...@@ -427,6 +499,7 @@ export default { ...@@ -427,6 +499,7 @@ export default {
}, },
changetrend(tab) { changetrend(tab) {
this.activeTrend = tab; this.activeTrend = tab;
this.getTrend()
}, },
}, },
...@@ -458,20 +531,20 @@ export default { ...@@ -458,20 +531,20 @@ export default {
text-shadow: 0px 4px 1px rgba(19, 80, 143, 0.66); text-shadow: 0px 4px 1px rgba(19, 80, 143, 0.66);
} }
.center { .center {
height: 65%; height: 60%;
display: flex; display: flex;
.center_left { .center_left {
width: 28%; width: 30%;
} }
.center_map { .center_map {
width: 44%; width: 40%;
} }
.center_right { .center_right {
width: 28%; width: 30%;
} }
} }
.bottom { .bottom {
height: 120px; // height: 120px;
display: flex; display: flex;
.bottom_echart { .bottom_echart {
...@@ -516,7 +589,7 @@ export default { ...@@ -516,7 +589,7 @@ export default {
} }
} }
.rank_con { .rank_con {
height:160px; height: 160px;
width: 100%; width: 100%;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
...@@ -620,4 +693,8 @@ export default { ...@@ -620,4 +693,8 @@ export default {
} }
// background-size:100% 100%; // background-size:100% 100%;
} }
.echarts_container {
// height: 120px;
margin-top: 20px;
}
</style> </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