HZXhuang
2 years ago
parent
e5ca9f21e9
commit
480cd70bf5
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 582 KiB |
|
After Width: | Height: | Size: 474 KiB |
|
After Width: | Height: | Size: 59 KiB |
|
After Width: | Height: | Size: 1.7 MiB |
@ -0,0 +1,218 @@
|
||||
<template>
|
||||
<div id="worldMapChart" class="mapStyle" :style="{margin: 'auto', height: height, width: '100%'}"></div>
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import jsonData from "../../assets/data/hunan_map.json"
|
||||
|
||||
export default {
|
||||
name: "DistributeMap",
|
||||
props: {
|
||||
height: {
|
||||
type: String,
|
||||
default: "200px",
|
||||
},
|
||||
width: {
|
||||
type: String,
|
||||
default: "300px",
|
||||
required: false
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
screenWidth: 1536,
|
||||
dataList: [
|
||||
{
|
||||
name: "常德市",
|
||||
value: 3,
|
||||
per: 0
|
||||
},
|
||||
{
|
||||
name: "郴州市",
|
||||
value: 4,
|
||||
per: 0
|
||||
},
|
||||
{
|
||||
name: "衡阳市",
|
||||
value: 1,
|
||||
per: 0
|
||||
},
|
||||
{
|
||||
name: "怀化市",
|
||||
value: 1,
|
||||
per: 0
|
||||
},{
|
||||
name: "娄底市",
|
||||
value: 4,
|
||||
per: 0
|
||||
},
|
||||
{
|
||||
name: "邵阳市",
|
||||
value: 2,
|
||||
per: 0
|
||||
},
|
||||
{
|
||||
name: "湘潭市",
|
||||
value: 1,
|
||||
per: 0
|
||||
},
|
||||
{
|
||||
name: "湘西土家族苗族自治州",
|
||||
value: 6,
|
||||
per: 0
|
||||
},
|
||||
{
|
||||
name: "益阳市",
|
||||
value: 1,
|
||||
per: 0
|
||||
},
|
||||
{
|
||||
name: "永州市",
|
||||
value: 1,
|
||||
per: 0
|
||||
},
|
||||
{
|
||||
name: "岳阳市",
|
||||
value: 0,
|
||||
per: 0
|
||||
},
|
||||
{
|
||||
name: "张家界市",
|
||||
value: 1,
|
||||
per: 0
|
||||
},
|
||||
{
|
||||
name: "长沙市",
|
||||
value: 1,
|
||||
per: 0
|
||||
},
|
||||
{
|
||||
name: "株洲市",
|
||||
value: 2,
|
||||
per: 0
|
||||
},
|
||||
]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
initWorldMapChart(){
|
||||
let sum = 0
|
||||
this.dataList.map((item)=>{
|
||||
sum += item.value;
|
||||
})
|
||||
for(let i = 0; i < this.dataList.length; i++){
|
||||
this.dataList[i].per = Math.round(this.dataList[i].value / sum * 100)
|
||||
}
|
||||
this.option = {
|
||||
tooltip: {
|
||||
//数据格式化
|
||||
formatter: function(params) {
|
||||
return (
|
||||
params.name + " 共" + params.value + "个，占："+
|
||||
params.data.per+"%"
|
||||
);
|
||||
},
|
||||
backgroundColor: 'rgba(19, 25, 47, 0.6)',
|
||||
borderColor: 'deepskyblue',
|
||||
textStyle: {
|
||||
color: 'white', //设置文字颜色
|
||||
fontSize: this.screenWidth * 0.01
|
||||
}
|
||||
},
|
||||
visualMap: {
|
||||
textStyle: {
|
||||
color: '#b5bb94',
|
||||
fontSize: this.screenWidth * 0.009
|
||||
},
|
||||
itemHeight: this.screenWidth * 0.092,
|
||||
itemWidth: this.screenWidth * 0.0131,
|
||||
min: 0,
|
||||
max: 100,
|
||||
left: 65,
|
||||
top: 250,
|
||||
|
||||
text: ["高(百分比)", "低"], //取值范围的文字
|
||||
inRange: {
|
||||
color: [
|
||||
// 地图的颜色 从最深 到最浅
|
||||
"#efecec",
|
||||
"#a693be",
|
||||
"#8b75a6",
|
||||
"#6e5e8d",
|
||||
"#663d74",
|
||||
"#2f1136", //紫色 最大
|
||||
"#f091a1",
|
||||
"#e782a0",
|
||||
"#e16c96",
|
||||
"#eb3c70", //粉色最大
|
||||
],
|
||||
//取值范围的颜色
|
||||
},
|
||||
show: true, //图注
|
||||
},
|
||||
geo: {
|
||||
map: 'world', //引入地图数据
|
||||
roam: true, //不开启缩放和平移
|
||||
zoom: 1, //视角缩放比例
|
||||
label: {
|
||||
show: false,//是否在地图上显示国家名字
|
||||
fontSize: this.screenWidth * 0.0066,
|
||||
color: "rgba(201,174,174,0.7)",
|
||||
},
|
||||
nameMap:{
|
||||
"常德": "常德市",
|
||||
"郴州": "郴州市",
|
||||
"衡阳": "衡阳市",
|
||||
"怀化": "怀化市",
|
||||
"娄底": "娄底市",
|
||||
"邵阳": "邵阳市",
|
||||
"湘潭": "湘潭市",
|
||||
"湘西": "湘西土家族苗族自治州",
|
||||
"益阳": "益阳市",
|
||||
"永州": "永州市",
|
||||
"岳阳": "岳阳市",
|
||||
"张家界": "张家界市",
|
||||
"长沙": "长沙市",
|
||||
"株洲": "株洲市",
|
||||
},
|
||||
emphasis: {
|
||||
borderColor: "rgba(0, 0, 0, 0.2)",
|
||||
itemStyle:{ //高亮的显示设置
|
||||
areaColor: "skyblue", //鼠标选择区域颜色
|
||||
shadowOffsetX: 0,
|
||||
shadowOffsetY: 0,
|
||||
shadowBlur: 20,
|
||||
borderWidth: 0,
|
||||
shadowColor: "rgba(0, 0, 0, 0.5)",
|
||||
},
|
||||
},
|
||||
},
|
||||
// 鼠标悬浮提示框
|
||||
series: [
|
||||
{
|
||||
name: "地级市",
|
||||
type: "map",
|
||||
geoIndex: 0,
|
||||
data: this.dataList,
|
||||
},
|
||||
],
|
||||
}
|
||||
this.worldMapChart = this.$echarts.init(document.getElementById("worldMapChart"));
|
||||
this.$echarts.registerMap('world', jsonData)
|
||||
this.worldMapChart.setOption(this.option);
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
this.initWorldMapChart()
|
||||
window.addEventListener('resize', ()=>{
|
||||
this.screenWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
|
||||
this.worldMapChart.resize();
|
||||
})
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
@ -0,0 +1,95 @@
|
||||
<template>
|
||||
<div>
|
||||
<el-form :inline="true" :model="search_data" class="user-search">
|
||||
<el-form-item label="搜索：">
|
||||
<el-select size="medium" v-model="search_data" placeholder="请选择地区" @change="updateChart">
|
||||
<el-option
|
||||
v-for="item in emotionOptions"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="">
|
||||
<el-input size="small"
|
||||
v-model="search_data.searchCountry"
|
||||
placeholder="请输入评论所属的国家"
|
||||
@keypress.enter.native="search"
|
||||
clearable
|
||||
>
|
||||
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="">
|
||||
<el-input size="small"
|
||||
v-model="search_data.searchPlatform"
|
||||
placeholder="请输入评论所属的平台"
|
||||
@keypress.enter.native="search"
|
||||
clearable
|
||||
>
|
||||
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="">
|
||||
<el-input size="small"
|
||||
v-model="search_data.searchContent"
|
||||
placeholder="请输入评论的内容"
|
||||
@keypress.enter.native="search"
|
||||
clearable
|
||||
>
|
||||
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<!--列表-->
|
||||
<el-table size="small" :data="list_data" highlight-current-row v-loading="loading"
|
||||
border element-loading-text="拼命加载中" @selection-change="handleSelectionChange" style="width: 100%;">
|
||||
<el-table-column sortable prop="id" label="ID" width="80">
|
||||
</el-table-column>
|
||||
<el-table-column prop="name" label="名称" width="100">
|
||||
</el-table-column>
|
||||
<el-table-column prop="category" label="类别" width="140">
|
||||
</el-table-column>
|
||||
<el-table-column prop="type" label="类型" width="140">
|
||||
</el-table-column>
|
||||
<el-table-column prop="releaseTime" label="公布时间" width="120">
|
||||
</el-table-column>
|
||||
<el-table-column prop="applicant" label="申报地区或单位" width="100">
|
||||
</el-table-column>
|
||||
<el-table-column prop="protectionUnit" label="保护单位" width="100">
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<!-- 分页组件 -->
|
||||
<!-- <Pagination v-bind:child-msg="pageparm" @callFather="callFather"></Pagination>-->
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
// eslint-disable-next-line vue/multi-word-component-names
|
||||
name: "Search",
|
||||
data() {
|
||||
return {
|
||||
search_data: {
|
||||
|
||||
},
|
||||
list_data: [
|
||||
{
|
||||
id: 1,
|
||||
name: "土家族织锦技艺",
|
||||
category: "传统技艺",
|
||||
releaseTime: "2006",
|
||||
type: "新增项目",
|
||||
applicant: "湖南省湘西土家族苗族自治州",
|
||||
protectionUnit: "湘西土家族苗族自治州非物质文化遗产保护中心"
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
Loading…
Reference in new issue