VUE中使用 echarts实现地图渲染片段 

  1 <template>
  2     <div>
  3         <div id="china-map" style="width:1000px;height:700px;float:left"></div>
  4     </div>
  5 </template>
  6 <script>
  7 import echarts from 'echarts'
  8 import 'echarts/map/js/china.js'
  9 export default {
 10     methods:{
 11         initChart(){
 12             var vm = this
 13             var chart = echarts.init(document.getElementById('china-map'));
 14             chart.setOption({
 15                 title:{
 16                     text: '全国现状',
 17                     textStyle:{
 18                         color: '#17233d',
 19                         fontSize: 20
 20                     }
 21                 },
 22                 label: {
 23                     normal: {
 24                         show: true, //显示省份标签
 25                         textStyle: {
 26                             color: "blue"
 27                         } //省份标签字体颜色
 28                     },
 29                     emphasis: { //对应的鼠标悬浮效果
 30                         show: false,
 31                         textStyle: {
 32                             color: "#800080"
 33                         }
 34                     }
 35                 },
 36                 itemStyle:{
 37                     areacolor: ['blue']
 38                 },
 39                 dataRange: {
 40                     x: '-1000 px', //图例横轴位置
 41                     y: '-1000 px', //图例纵轴位置
 42                     splitList: [
 43                         { start: 1, end: 1, label: '北京', color: '#c5c8ce' },
 44                         { start: 2, end: 2, label: '天津', color: '#c5c8ce' },
 45                         { start: 3, end: 3, label: '上海', color: '#c5c8ce' },
 46                         { start: 4, end: 4, label: '重庆', color: '#c5c8ce' },
 47                         { start: 5, end: 5, label: '河北', color: '#c5c8ce' },
 48                         { start: 6, end: 6, label: '河南', color: '#c5c8ce' },
 49                         { start: 7, end: 7, label: '云南', color: '#c5c8ce' },
 50                         { start: 8, end: 8, label: '辽宁', color: '#c5c8ce' },
 51                         { start: 9, end: 9, label: '黑龙江', color: '#c5c8ce' },
 52                         { start: 10, end: 10, label: '湖南', color: '#c5c8ce' },
 53                         { start: 11, end: 11, label: '安徽', color: '#c5c8ce' },
 54                         { start: 12, end: 12, label: '山东', color: '#c5c8ce' },
 55                         { start: 13, end: 13, label: '新疆', color: '#c5c8ce' },
 56                         { start: 14, end: 14, label: '江苏', color: '#c5c8ce' },
 57                         { start: 15, end: 15, label: '浙江', color: '#c5c8ce' },
 58                         { start: 16, end: 16, label: '江西', color: '#c5c8ce' },
 59                         { start: 17, end: 17, label: '湖北', color: '#c5c8ce' },
 60                         { start: 18, end: 18, label: '广西', color: '#c5c8ce' },
 61                         { start: 19, end: 19, label: '甘肃', color: '#c5c8ce' },
 62                         { start: 20, end: 20, label: '山西', color: '#c5c8ce' },
 63                         { start: 21, end: 21, label: '内蒙古', color: '#c5c8ce' },
 64                         { start: 22, end: 22, label: '陕西', color: '#c5c8ce' },
 65                         { start: 23, end: 23, label: '吉林', color: '#c5c8ce' },
 66                         { start: 24, end: 24, label: '福建', color: '#c5c8ce' },
 67                         { start: 25, end: 25, label: '贵州', color: '#c5c8ce' },
 68                         { start: 26, end: 26, label: '广东', color: '#c5c8ce' },
 69                         { start: 27, end: 27, label: '青海', color: '#c5c8ce' },
 70                         { start: 28, end: 28, label: '西藏', color: '#c5c8ce' },
 71                         { start: 29, end: 29, label: '四川', color: '#c5c8ce' },
 72                         { start: 30, end: 30, label: '宁夏', color: '#c5c8ce' },
 73                         { start: 31, end: 31, label: '海南', color: '#c5c8ce' },
 74                         { start: 32, end: 32, label: '台湾', color: '#c5c8ce' },
 75                         { start: 33, end: 33, label: '香港', color: '#c5c8ce' },
 76                         { start: 34, end: 34, label: '澳门', color: '#c5c8ce' }
 77                     ]
 78                 }, //各省地
 79                 series: [{
 80                     type: 'map',
 81                     map: 'china',
 82                     data: [
 83                         { name: '北京', selected: false, value: 1 },
 84                         { name: '天津', selected: false, value: 2 },
 85                         { name: '上海', selected: false, value: 3 },
 86                         { name: '重庆', selected: false, value: 4 },
 87                         { name: '河北', selected: false, value: 5 },
 88                         { name: '河南', selected: false, value: 6 },
 89                         { name: '云南', selected: false, value: 7 },
 90                         { name: '辽宁', selected: false, value: 8 },
 91                         { name: '黑龙江', selected: false, value: 9 },
 92                         { name: '湖南', selected: false, value: 10 },
 93                         { name: '安徽', selected: false, value: 11 },
 94                         { name: '山东', selected: false, value: 12 },
 95                         { name: '新疆', selected: false, value: 13 },
 96                         { name: '江苏', selected: false, value: 14 },
 97                         { name: '浙江', selected: false, value: 15 },
 98                         { name: '江西', selected: false, value: 16 },
 99                         { name: '湖北', selected: false, value: 17 },
100                         { name: '广西', selected: false, value: 18 },
101                         { name: '甘肃', selected: false, value: 19 },
102                         { name: '山西', selected: false, value: 20 },
103                         { name: '内蒙古', selected: false, value: 21 },
104                         { name: '陕西', selected: false, value: 22 },
105                         { name: '吉林', selected: false, value: 23 },
106                         { name: '福建', selected: false, value: 24 },
107                         { name: '贵州', selected: false, value: 25 },
108                         { name: '广东', selected: false, value: 26 },
109                         { name: '青海', selected: false, value: 27 },
110                         { name: '西藏', selected: false, value: 28 },
111                         { name: '四川', selected: false, value: 29 },
112                         { name: '宁夏', selected: false, value: 30 },
113                         { name: '海南', selected: false, value: 31 },
114                         { name: '台湾', selected: false, value: 32 },
115                         { name: '香港', selected: false, value: 33 },
116                     ]
117                 }]
118             })
119             chart.on('click', function (params) {
120                 console.log(params.data.name)
121                 vm.$router.push({path: `serviceCurrentdetail`})
122             });
123         }
124     },
125     mounted(){
126         this.initChart()
127     }
128 }
129 </script>

 

posted @ 2020-05-09 12:32  奇多Cheeto  阅读(518)  评论(0)    收藏  举报