首页路径样式提交

whyczyk

2021-07-21 6e32b8f6cf5dd63eafdb372729b29fb37abaccc6

首页路径样式提交

 public/mapJson/js/index.js

New file
@@ -0,0 +1,144 @@
export default {
    mapList() {
        return [
            {
                label: '中国',
                StationName1: '',
                StationName2: '',
                StationName5: '',
                adcode: 100000,
                value: 'zhongguo',
            },
            {
                label: '湖北省',
                StationName1: '湖北省',
                StationName2: '',
                StationName5: '',
                adcode: 420000,
                value: 'hubeisheng'
            },
            {
                label: '湖北省-武汉市',
                StationName1: '湖北省',
                StationName2: '',
                StationName5: '',
                adcode: 420100,
                value: 'wuhan'
            },
            {
                label: '广东省-清远市',
                StationName1: '广东省',
                StationName2: '清远市',
                StationName5: '',
                adcode: 441800,
                value: 'qingyuan'
            },
            {
                label: '山西省',
                StationName1: '山西省',
                StationName2: '',
                StationName5: '',
                adcode: 140000,
                value: 'shanxi'
            },
            {
                label: '山西省-太原市',
                StationName1: '山西省',
                StationName2: '太原市',
                StationName5: '',
                adcode: 140100,
                value: 'taiyuan'
            },
            {
                label: '山东省',
                StationName1: '山东省',
                StationName2: '',
                StationName5: '',
                adcode: 370000,
                value: 'shandong'
            },
            {
                label: '山东省-烟台市',
                StationName1: '山东省',
                StationName2: '烟台市',
                StationName5: '',
                adcode: 370000,
                value: 'yantai'
            },
            {
                label: '贵州省',
                StationName1: '贵州省',
                StationName2: '',
                StationName5: '',
                adcode: 520000,
                value: 'guizhousheng'
            },
            {
                label: '河南省-平顶山市',
                StationName1: '河南省',
                StationName2: '平顶山市',
                StationName5: '',
                adcode: 410400,
                value: 'pingdingshan'
            },
            {
                label: "河北省",
                StationName1: '河北省',
                StationName2: '',
                StationName5: '',
                adcode: 130000,
                value: 'hebeisheng'
            },
            {
                label: "河北省-秦皇岛市",
                StationName1: '河北省',
                StationName2: '秦皇岛市',
                StationName5: '',
                adcode: 130300,
                value: 'qinhuangdaoshi'
            },
            {
                label: "云南省",
                StationName1: '云南省',
                StationName2: '',
                StationName5: '',
                adcode: 530000,
                value: 'yunnansheng'
            },
            {
                label: "江苏省",
                StationName1: "江苏省",
                StationName2: '',
                StationName5: '',
                adcode: 320000,
                value: 'jiangsusheng'
            },
            {
                label: "江苏省-苏州市",
                StationName1: "江苏省",
                StationName2: '苏州市',
                StationName5: '',
                adcode: 320500,
                value: 'suzhoushi'
            },
            {
                label: "江苏省-苏州市-吴中区",
                StationName1: "江苏省",
                StationName2: '苏州市',
                StationName5: '吴中区',
                adcode: 320506,
                value: 'suzhouwuzhongqu'
            },
        ];
    },
    getItemByValue(value, list) {
        let result = false;
        for(let i=0; i<list.length; i++) {
            let item = list[i];
            if(item.value == value) {
                result = item;
            }
        }
        return result;
    },
};

 public/mapJson/zhongguo.json

New file
Diff too large

 src/assets/css/reset.css

@@ -229,3 +229,7 @@
    cursor: pointer;
    -webkit-appearance: none;
}

.van-nav-bar .van-icon {
    color: #41c5f6;
}

 src/components/chart/chinaMap.vue

New file
@@ -0,0 +1,142 @@
<template>
    <div class="echarts-wrapper">
        <div class="echarts-content" ref="chart"></div>
    </div>
</template>

<script>
    import * as echarts from 'echarts';

    export default {
        name: "chinaMap",
        chart: "",
        chartData: [],
        props: {
            id: {
                type: String,
                required: true,
            },
            name: {
                type: String,
                required: true,
            }
        },
        data() {
            return {

            }
        },
        methods: {
            setOption(opt) {
                this.$options.chart.setOption(opt);
            },
            setData(sendData) {
                this.$options.chartData = sendData;
                let geoJson = require(`../../../public/mapJson/${this.name}.json`);
                echarts.registerMap('map', geoJson);
                let option = {
                    tooltip: {
                        trigger: 'item',
                        formatter: function (params) {
                            if (params.componentSubType == "map") {
                                return ''
                            } else if (params.componentSubType == "scatter") {
                                return params.name;
                            }
                        }
                    },
                    visualMap: {
                        show: false,
                        min: 0,
                        max: 500,
                        left: 'left',
                        top: 'bottom',
                        text: ['高', '低'], // 文本，默认为数值文本
                        calculable: true,
                        seriesIndex: [1],
                        inRange: {}
                    },
                    geo: {
                        map: "map",
                        layoutCenter: ["55%", "50%"],
                        layoutSize: "100%",
                        label: {
                            normal: {
                                show: true,
                                textStyle: {
                                    color: '#fff'
                                }
                            },
                            emphasis: {
                                textStyle: {
                                    color: '#fff'
                                }
                            }
                        },
                        roam: true, //是否允许缩放
                        mapLocation: {
                            width: "110%",
                            height: "97%"
                        },
                        itemStyle: {
                            normal: {
                                borderColor: 'rgba(147, 235, 248, 1)',
                                borderWidth: 1,
                                areaColor: {
                                    type: 'radial',
                                    x: 0.5,
                                    y: 0.5,
                                    r: 0.8,
                                    colorStops: [{
                                        offset: 0,
                                        color: 'rgba(147, 235, 248, 0)' // 0% 处的颜色
                                    }, {
                                        offset: 1,
                                        color: 'rgba(147, 235, 248, .2)' // 100% 处的颜色
                                    }],
                                    globalCoord: false // 缺省为 false
                                },
                                shadowColor: 'rgba(128, 217, 248, 1)',
                                shadowOffsetX: -2,
                                shadowOffsetY: 2,
                                shadowBlur: 10
                            },
                            emphasis: {
                                areaColor: '#1ecee5',
                                borderWidth: 0,
                                label: {
                                    show: false
                                }
                            }
                        }
                    },
                    series: sendData
                };
                this.setOption(option);
            },
            resize() {
                setTimeout(() => {
                    this.$options.chart.resize();
                }, 0);
            }
        },
        mounted() {
            // 基于准备好的dom，初始化echarts实例
            this.$options.chart = echarts.init(this.$refs.chart);
            window.addEventListener('resize', this.resize);
        },
        destroyed() {
            window.removeEventListener('resize', this.resize);
        }
    }
</script>


<style scoped>
    /* echarts css */
    .echarts-wrapper,
    .echarts-content {
        width: 100%;
        height: 100%;
    }
</style>

 src/main.js

@@ -31,6 +31,8 @@
  PullRefresh,
  ActionSheet,
  List,
  Tab,
  Tabs
} from 'vant';


@@ -44,7 +46,7 @@
Vue.config.productionTip = false


Vue.use(Toast).use(Notify).use(Dialog).use(Tabbar).use(TabbarItem).use(CellGroup).use(Cell).use(Icon).use(Button).use(NavBar).use(Grid).use(GridItem).use(Row).use(Col).use(Collapse).use(CollapseItem).use(Steps).use(Step).use(Divider).use(Switch).use(Tag).use(Search).use(Field).use(Uploader).use(Popup).use(CheckboxGroup).use(Checkbox).use(PullRefresh).use(ActionSheet).use(List);
Vue.use(Toast).use(Notify).use(Dialog).use(Tabbar).use(TabbarItem).use(CellGroup).use(Cell).use(Icon).use(Button).use(NavBar).use(Grid).use(GridItem).use(Row).use(Col).use(Collapse).use(CollapseItem).use(Steps).use(Step).use(Divider).use(Switch).use(Tag).use(Search).use(Field).use(Uploader).use(Popup).use(CheckboxGroup).use(Checkbox).use(PullRefresh).use(ActionSheet).use(List).use(Tab).use(Tabs);

Vue.prototype.$notify = Notify;
Vue.prototype.$dialog = Dialog;

 src/pages/index.vue

@@ -1,18 +1,45 @@
<template>
  <div class="">
    首页
  <div class="indexWarp">
    <van-nav-bar title="首页" left-arrow></van-nav-bar>
    <van-tabs v-model="active" color="#41c5f6" :swipeable="true" background="#ffffff">
      <van-tab title="轮廓图">
        <div class="chartCon">
          <china-map ref="chinaMap" id="chinaMap" name="zhongguo"></china-map>
        </div>
      </van-tab>
      <van-tab title="站点列表">内容 2</van-tab>
    </van-tabs>
  </div>
</template>

<script>
  import ChinaMap from '@/components/chart/chinaMap.vue'
  export default {
    components: {
      ChinaMap
    },
    data() {
      return {

        active: 0
      }
    },
    mounted() {
      this.$nextTick(() => {
        this.$refs.chinaMap.setData({})
      })
    },
  }
</script>

<style scoped>
  .indexWarp {
    width: 100%;
    min-height: 100%;
    background: #f8f8f8;
  }

  .chartCon {
    height: calc(100vh - 90Px);
    background-color: #0b388b;
  }
</style>