Skip to content

T
ty_patentSys
Commit 6075e303 by hanxiao
Options

添加大屏页面

parent f1f00a84
Showing with 162 additions and 82 deletions
src/utils/screen.js 0 → 100644
import { get, post, put, Delete } from './request'
export const patentType = p => post('/api/dataScreen/patentType', p);
\ No newline at end of file
src/views/screen/components/patentMap.vue
...@@ -33,75 +33,91 @@ export default { ...@@ -33,75 +33,91 @@ export default {
getMap() { getMap() {
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) => {
console.log(res);
// [112.531079,37.863924]
echarts.registerMap("shanxi", res.data); echarts.registerMap("shanxi", res.data);
// 注册矢量地图数据
var option = { var option = {
geo: { geo: [
map: 'shanxi', {
zoom: 1, map: "shanxi",
aspectScale: 0.95, aspectScale: 1,
layoutCenter: ['50%', '50%'], // 地图位置 zoom: 0.65,
// layoutSize: '108%', layoutCenter: ["50%", "50%"],
layoutSize: "150%",
itemStyle: { show: true,
normal: { roam: false,
shadowColor: '#276fce', label: {
shadowOffsetX: 0, emphasis: {
shadowOffsetY: 15, show: false,
opacity: 0.3 },
} },
}
}, itemStyle: {
tooltip: { normal: {
// 悬浮框 borderColor: "#c0f3fb",
trigger: "item", // 触发条件 borderWidth: 1,
backgroundColor: "RGBA(136, 123, 135, 0.8)", shadowColor: "#8cd3ef",
formatter: "{b}<br/>案件数{c}", // 自定义显示数据 shadowOffsetY: 10,
textStyle: { shadowBlur: 120,
color: "#ffffff", areaColor: "transparent",
},
},
}, },
}, ],
series: [ series: [
{ {
name: "山西市数据",
type: "map", type: "map",
mapType: "shanxi", map: "shanxi", // 自定义扩展图表类型
zoom: 1.2, aspectScale: 1,
top: "5%", zoom: 0.65, // 缩放
x: "center", showLegendSymbol: true,
label: { label: {
show: true, // 显示 normal: {
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: { itemStyle: {
normal: { normal: {
// 静态的时候显示的默认样式
areaColor: { areaColor: {
type: "radial", type: "linear",
x: 0.5, x: 1200,
y: 0.5, y: 0,
r: 0.9, x2: 0,
y2: 0,
colorStops: [ colorStops: [
{ {
offset: 0, offset: 0,
color: "RGBA(40, 99, 113, 1)", // 0% 处的颜色 color: "rgba(3,27,78,0.75)", // 0% 处的颜色
}, },
{ {
offset: 1, offset: 1,
color: "RGBA(28, 79, 105, 0.6)", // 100% 处的颜色 color: "rgba(58,149,253,0.75)", // 50% 处的颜色
}, },
], ],
}, // 地图颜色 global: true, // 缺省为 false
borderColor: "#886364", // 边框颜色 },
}, borderColor: "#fff",
emphasis: { borderWidth: 0.2,
// 鼠标移入动态的时候显示的默认样式
borderWidth: 2, // 边框宽度
areaColor: "#ffffff", // 地图颜色
}, },
}, },
// 数据 layoutCenter: ["50%", "50%"],
layoutSize: "150%",
markPoint: {
symbol: "none",
},
data: [ data: [
{ {
name: "太原市", name: "太原市",
...@@ -112,11 +128,11 @@ export default { ...@@ -112,11 +128,11 @@ export default {
value: "396", value: "396",
}, },
{ {
name: "长治", name: "长治市",
value: "1125", value: "1125",
}, },
{ {
name: "临汾", name: "临汾市",
value: "635", value: "635",
}, },
], ],
...@@ -124,36 +140,102 @@ export default { ...@@ -124,36 +140,102 @@ export default {
{ {
type: "lines", type: "lines",
zlevel: 2, zlevel: 2,
label: {
show: false,
},
effect: { effect: {
show: true, show: true,
period: 4, // 箭头指向速度，值越小速度越快 period: 4, //箭头指向速度，值越小速度越快
trailLength: 0.02, // 特效尾迹长度[0,1]值越大，尾迹越长重 trailLength: 0.02, //特效尾迹长度[0,1]值越大，尾迹越长重
symbol: "arrow", // 箭头图标 symbol: "arrow", //箭头图标
symbolSize: 5, // 图标大小 symbolSize: 6, //图标大小
}, },
lineStyle: { lineStyle: {
normal: { normal: {
width: 1, // 尾迹线条宽度 color: "#FBDEDE",
opacity: 1, // 尾迹线条透明度 width: 2, //尾迹线条宽度
curveness: 0.3, // 尾迹线条曲直度 opacity: 1, //尾迹线条透明度
color: "yellow", curveness: 0.3, //尾迹线条曲直度
shadowColor: "rgba(255, 200, 113, 0.2)",
shadowBlur: 10,
}, },
}, },
data:[ data: [
[ [
[112.531079,37.863924], [112.531079, 37.863924],
[118,45] [114, 39],
], ],
[ [
[112.531079,37.863924], [112.531079, 37.863924],
[130,45] [112, 39],
] ],
] ],
}, },
// {
// 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);
console.log(option);
}); });
}, },
}, },
......
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> <!-- <patentType></patentType> -->
</div> </div>
</div> </div>
<div class="bottom"> <div class="bottom">
...@@ -39,19 +39,14 @@ ...@@ -39,19 +39,14 @@
@focus="focus" @focus="focus"
@change="handleChange" @change="handleChange"
> >
<a-select-option value="jack">Jack</a-select-option>
<a-select-option value="lucy">Lucy</a-select-option>
<a-select-option value="disabled" disabled
>Disabled</a-select-option
>
<a-select-option value="Yiminghe">yiminghe</a-select-option>
</a-select> </a-select>
</div> </div>
</div> </div>
<EchartsCon <EchartsCon
:id="'patent_trend'" :id="'patent_trend'"
:option="option5" :option="option5"
:height="'260px'" :height="'120px'"
></EchartsCon> ></EchartsCon>
</div> </div>
<div class="bottom_echart"> <div class="bottom_echart">
...@@ -228,7 +223,7 @@ export default { ...@@ -228,7 +223,7 @@ export default {
components: { components: {
EchartsCon, EchartsCon,
patentType, patentType,
patentMap patentMap,
}, },
methods: { methods: {
init() { init() {
...@@ -446,6 +441,7 @@ export default { ...@@ -446,6 +441,7 @@ export default {
background-image: url("../../static/screen/bg-all.png"); background-image: url("../../static/screen/bg-all.png");
background-size: 100%; background-size: 100%;
width: 100%; width: 100%;
height: 100%;
// height: 885px; // height: 885px;
header { header {
background-image: url("../../static/screen/bg-top-logo.png"); background-image: url("../../static/screen/bg-top-logo.png");
...@@ -462,21 +458,20 @@ export default { ...@@ -462,21 +458,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: 70%; height: 65%;
display: flex; display: flex;
.center_left { .center_left {
width: 28%; width: 28%;
} }
.center_map{ .center_map {
width: 44%; width: 44%;
} }
.center_right{ .center_right {
width: 28%; width: 28%;
} }
} }
.bottom { .bottom {
height: 380px; height: 120px;
display: flex; display: flex;
.bottom_echart { .bottom_echart {
...@@ -521,7 +516,7 @@ export default { ...@@ -521,7 +516,7 @@ export default {
} }
} }
.rank_con { .rank_con {
height: 90%; height:160px;
width: 100%; width: 100%;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
......
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