vue中使用echarts自定义浮窗内容及样式

最近项目需要用到地图，echarts本来是有地图的，但是5.0版本之后就没有了，所以如果要用echarts中的地图，需要下载5.0版本之前的地图。

项目需要在点击某一地区，就出现该地区指定的数据。

1.首先导入echarts

（需要全局导入，全局导入可以看之前的文章vue项目引入element ui、iview和echarts_芝士焗红薯的博客-CSDN博客，使用到echarts的页面还需要单独引入）和地图，我这里用的地图是在DataV.GeoAtlas地理小工具系列这个网站下载的。

2.在页面上创建一个div放置地图 

  
    江苏省地图
  
  

3.调用地图的方法

created () {
  this.$nextTick(() => {
    this.initCharts()
  })
},
mounted () {
  this.initCharts()
 },

4.地图方法

backgroundColor：地图的背景颜色

tooltip：鼠标移动/点击会出现的浮窗样式

formatter：自定义浮窗数据

geo：地图配置

series：自定义每个数据的名称、样式，可以通过这个设置散点、涟漪、标注重点等

所以我们自定义浮窗样式，就需要研究tooltip、formatter和series。

因为只需要鼠标移动上去就可以出现浮窗，所以我们不需要设置series的type为effectScatter，下图为effectScatter的效果。（这个样式之后可能在别的文章里总结一下）

 但是不设置series，浮窗就显示不了，试了很多次之后发现可以使用type为map

series: [
  {
    data: airData, // 在series中引入自定义的数据
    geoIndex: 0,  // 将数据和第0个geo配置关联在一起（不太理解，但是去掉会出错）
    type:'map'
  }
]

airData是自定义的数据，name对应地区，value定义为一个对象，放置kjnumber和ljnumber两个参数（也可以把value定义为一个数组，放置的也是kjnumber和ljnumber两个参数）

let airData = [
  // {name:'徐州市',value:[38409,10,2]},
  {name:'徐州市',value:{kjnumber:'38409',ljnumber:'10'}},
]

设置tooltip提示浮窗的样式：

// 提示浮窗样式
tooltip: {
  show: true, // 提示浮窗是否显示
  trigger: 'item',  
  alwaysShowContent: false,
  backgroundColor: '#0C121C', // 提示浮窗背景颜色
  borderColor: 'rgba(0, 0, 0, 0.16);',
  hideDelay: 100,
  triggerOn: 'mousemove', // 鼠标移动出现浮窗，也可以是click等
  enterable: true,
    textStyle: {
      color: '#DADADA',
      fontSize: '12',
      width: 20,
      height: 30,
      overflow: 'break'
    },

formatter：

formatter接收一个params，可以在控制台打印一下params的内容

 我们可以看到是存在两个value，所以如果我们想在formatter中取到我们需要的value，取params.data.value.kjnumber和params.data.value.ljnumber即可。

如果是用数组，取params.data.value[0]和params.data.value[1]。

另一个value只能接收一个数值，所以最开始一直用params.value[0]取参数一直取不到。这个value的用法暂时不清楚。

formatter (params) {
  console.log(params)
  return `会计人员总人数：${params.data.value.kjnumber}
领军人数：${params.data.value.ljnumber}`
  // return `会计人员总人数：${params.data.value[0]}
领军人数：${params.data.value[1]}`
},

浅浅总结一下 

initCharts () {
        const charts = echarts.init(this.$refs['charts'])
        let airData = [
          {name:'徐州市',value:[38409,10,2]},
          {name:'连云港市',value:[20716,20]},
          {name:'宿迁市',value:[20047,30]},
          {name:'淮安市',value:[21541,40]},
          {name:'盐城市',value:[35649,50]},
          {name:'扬州市',value:[39958,60]},
          {name:'泰州市',value:[39107,70]},
          {name:'南通市',value:[59942,80]},
          {name:'南京市',value:[119136,90]},
          {name:'镇江市',value:[29701,100]},
          {name:'常州市',value:[62877,110]},
          {name:'无锡市',value:[103338,120]},
          {name:'苏州市',value:[153239,130]}
        ]
        const option = {
          // 背景颜色
          backgroundColor: 'white',
          // backgroundColor: '#142434',
          // 提示浮窗样式
          tooltip: {
            show: true,
            trigger: 'item',
            alwaysShowContent: false,
            backgroundColor: '#0C121C',
            borderColor: 'rgba(0, 0, 0, 0.16);',
            hideDelay: 100,
            triggerOn: 'mousemove',
            enterable: true,
            textStyle: {
              color: '#DADADA',
              fontSize: '12',
              width: 20,
              height: 30,
              overflow: 'break'
            },
            formatter (params) {
              return `会计人员总人数：${params.data.value[0]}
领军人数：${params.data.value[1]}`
            showDelay: 100
          },
          // 地图配置
          geo: {
            map: 'jiangsu',
            // 地图文字
            label: {
              // 通常状态下的样式
              normal: {
                // 默认是否显示地区名称
                show: true,
                textStyle: {
                  color: 'black'
                }
              },
              // 鼠标放上去的样式
              emphasis: {
                textStyle: {
                  // color: '#fff'
                  color: 'black'
                }
              }
            },
            // 地图区域的样式设置
            itemStyle: {
              normal: {
                borderColor: 'rgba(14

5.最后效果如图：

关于地图的颜色、根据人数渐变、散点图等之后可能还会总结一下