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