echarts地图配置1

<template>
	<div style="width: 300px height:300px; border: 1px solid blue;">
		<el-button @click='api'>调用express写的接口</el-button><br />
		<p>我是vuex里存的name的值:{{this.$store.state.name}}</p>
		<p>我是vuex里的getters的值:{{this.$store.getters.get_name}}</p>
		<el-button @click='submit'>点击我提交mutations把name变成于春辉</el-button><br />
		<el-button @click='action'>点击我提交action把name变成yuchunhui</el-button>
		<fasong></fasong>
		<jieshou></jieshou>
    <div style="width:50%;height:500px;border:1px solid red;" ref="myEchart"></div>
	</div>
</template>

<script>
	//	必须加{}因为导出是export 不是 export default
	import { add } from "@/api/jiekou"
	import fasong from "@/mycomponent/test_zongxian/fasong"
	import jieshou from "@/mycomponent/test_zongxian/jieshou"

  import '../../node_modules/echarts/map/js/china.js' // 引入中国地图数据


	export default {
		data: function() {
			return {
				ws: '',
        chart: null
			}
		},
    mounted() {
      this.chinaConfigure();
    },
		components:{
			fasong,
			jieshou,
		},

		methods: {
      chinaConfigure() {
        let myChart = this.$echarts.init(this.$refs.myEchart); //这里是为了获得容器所在位置
        window.onresize = myChart.resize;
        var mapBoxOption = {
          //提示工具
          tooltip: {
            formatter: function (params) {
              var info = '<p style="font-size:18px">' + params.name + '</p><p style="font-size:14px">这里可以写一些，想展示在页面上的别的信息</p>'
              return info;
            },
            backgroundColor: "green",//提示标签背景颜色
            textStyle: { color: "red" } //提示标签字体颜色
          },
          // 改变图例(点的样式)
          color:['#fff'],
          // 加这个图例才能出现点
          legend:{
          },
          
          series: [
            {
            type: 'map',
            mapType: 'china',
            label: {
                show: true, //显示省份标签
                textStyle: {
                  color: "blue"
              },
              emphasis: { //对应的鼠标悬浮效果
                textStyle: {
                  color: "red"
                }
              }
            },

            emphasis: {
              itemStyle: {
                borderWidth: 3, //区域边框宽度
                borderColor: 'green', //区域边框颜色
                areaColor: "red", //区域颜色
              },
            },
            //上下压缩
            aspectScale: 0.75,
            // 放大
            zoom: 1.2,
            //可以设置自居的区域颜色和弹出层
            data: [
              { name: '北京', selected: false, value: 1 },
              { name: '天津', selected: false, value: 2 },
              { name: '上海', selected: false, value: 3 },
              { name: '重庆', selected: false, value: 4 },
              { name: '河北', selected: false, value: 5 },
              { name: '河南', selected: false, value: 6 },
              { name: '云南', selected: false, itemStyle:{areaColor: "red"}},
              { name: '辽宁', selected: false, value: 8 },
              { name: '黑龙江', selected: false, value: 9 },
              { name: '湖南', selected: false, value: 10 },
              { name: '安徽', selected: false, value: 11 },
              { name: '山东', selected: false, value: 12 },
              { name: '新疆', selected: false,itemStyle:{areaColor: "red"} },
              { name: '江苏', selected: false, value: 14 },
              { name: '浙江', selected: false, value: 15 },
              { name: '江西', selected: false, value: 16 },
              { name: '湖北', selected: false, value: 17 },
              { name: '广西', selected: false, value: 18 },
              { name: '甘肃', selected: false, value: 19 },
              { name: '山西', selected: false, value: 20 },
              { name: '内蒙古', selected: false, value: 21 },
              { name: '陕西', selected: false, value: 22 },
              { name: '吉林', selected: false, value: 23 },
              { name: '福建', selected: false, value: 24 },
              { name: '贵州', selected: false, value: 25 },
              { name: '广东', selected: false, value: 26 },
              { name: '青海', selected: false, value: 27 },
              { name: '西藏', selected: false, itemStyle:{areaColor: "red"} },
              { name: '四川', selected: false, value: 29 },
              { name: '宁夏', selected: false, value: 30 },
              { name: '海南', selected: false, value: 31 },
              { name: '台湾', selected: false, value: 32 },
              { name: '香港', selected: false, value: 33 },
              { name: '澳门', selected: false, value: 34 }
            ] //各省地图颜色数据依赖value
          }

          ],



          dataRange: {
            x: '-1000 px', //图例横轴位置
            y: '-1000 px', //图例纵轴位置
            // splitList: [
            //   { start: 1, end: 1, label: '北京', color: '#cfc5de' },
            //   { start: 2, end: 2, label: '天津', color: '#cfc5de' },
            //   { start: 3, end: 3, label: '上海', color: '#cfc5de' },
            //   { start: 4, end: 4, label: '重庆', color: '#cfc5de' },
            //   { start: 5, end: 5, label: '河北', color: '#cfc5de' },
            //   { start: 6, end: 6, label: '河南', color: '#cfc5de' },
            //   { start: 7, end: 7, label: '云南', color: '#cfc5de' },
            //   { start: 8, end: 8, label: '辽宁', color: '#cfc5de' },
            //   { start: 9, end: 9, label: '黑龙江', color: '#cfc5de' },
            //   { start: 10, end: 10, label: '湖南', color: '#cfc5de' },
            //   { start: 11, end: 11, label: '安徽', color: '#cfc5de' },
            //   { start: 12, end: 12, label: '山东', color: '#cfc5de' },
            //   { start: 13, end: 13, label: '新疆', color: '#cfc5de' },
            //   { start: 14, end: 14, label: '江苏', color: '#cfc5de' },
            //   { start: 15, end: 15, label: '浙江', color: '#cfc5de' },
            //   { start: 16, end: 16, label: '江西', color: '#cfc5de' },
            //   { start: 17, end: 17, label: '湖北', color: '#cfc5de' },
            //   { start: 18, end: 18, label: '广西', color: '#cfc5de' },
            //   { start: 19, end: 19, label: '甘肃', color: '#cfc5de' },
            //   { start: 20, end: 20, label: '山西', color: '#cfc5de' },
            //   { start: 21, end: 21, label: '内蒙古', color: '#cfc5de' },
            //   { start: 22, end: 22, label: '陕西', color: '#cfc5de' },
            //   { start: 23, end: 23, label: '吉林', color: '#cfc5de' },
            //   { start: 24, end: 24, label: '福建', color: '#cfc5de' },
            //   { start: 25, end: 25, label: '贵州', color: '#cfc5de' },
            //   { start: 26, end: 26, label: '广东', color: '#e0f7cc' },
            //   { start: 27, end: 27, label: '青海', color: '#cfc5de' },
            //   { start: 28, end: 28, label: '西藏', color: '#cfc5de' },
            //   { start: 29, end: 29, label: '四川', color: '#cfc5de' },
            //   { start: 30, end: 30, label: '宁夏', color: '#cfc5de' },
            //   { start: 31, end: 31, label: '海南', color: '#cfc5de' },
            //   { start: 32, end: 32, label: '台湾', color: '#cfc5de' },
            //   { start: 33, end: 33, label: '香港', color: '#cfc5de' },
            //   { start: 34, end: 34, label: '澳门', color: '#e0f7cc' }
            // ]
          }, //各省地图颜色；start：值域开始值；end：值域结束值；label：图例名称；color：自定义颜色值；

        }
        myChart.setOption(mapBoxOption)
      },




			submit() {

				this.$store.commit('sets', '于春辉')
			},
			action() {
				this.$store.dispatch('action')
			},
			api() {
				add({
					"name": '11'
				}).then(res => {
					alert(res.name)
				}).catch(err => {
					// alert(err)
				})
			},

		}
	}
</script>

<style>
</style>