关于vue使用highcharts-map插件实现数据提示框的前后端交互

1.怎么入手highcharts插件

在学习一个知道名字的插件的时候，我们首先不是去看其他人的一些教程，而是先去插件官网，看一下官方文档，例如：

学习highcharts插件我们首先要了解图表的组成，明白这些部分的名称和单词，以便后续使用。此处我们只讲图表提示框的交互部分。

2.关于地图的图表提示框

地图的图表提示框是我们鼠标移动上之后展示内容的部分。

这部分是tooltip,具体的就不再赘述,用法可以去highcharts官网看官方文档和示例演示。

3.获取后端数据以及前端渲染

1.获取后端数据

我的项目结构是:我将整个页面分为左(left)\中(center)\右(right)三部分,三部分分别为一个插件,在right插件中再引入highcharts_map插件,值得一提的是,我这里获取后端数据是在right中,然后传到highcharts_map插件中,再通过处理来将数据渲染到图表提示框中。
首先,我们写好前端调用的url:

let getNwfbData = (params) => {
    let url = 'localhost:7700/mapdata/getNwfbData?'
    return post(url)
}

然后我们在right中获取数据:

    get_nwfbData(){
      getNwfbData().then((res) =>{
        if (res.errorcode == "0" && res.data) {
          this.$refs.ChartMap.update(res.data)
        }
      }
      )
    },

上述方法的ChartMap是使用组件的ref来定位,并将数据传到highcharts_map组件的update(data)方法中

<ChartMap :home='this'ref="ChartMap"></ChartMap>
<script>
import ChartMap from "../highcharts/highcharts_map.vue";
</script>

我们在刷新网页后,还需要加载地图和调用数据:

methods:{
    initChart() {
    	//触发数据交互方法
		this.$nextTick(() => {
			this.get_nwfbData();
		});
		//加载highcharts_map组件的地图初始化方法
		this.$refs.ChartMap.initChart();
	}
},
mounted(){
	//在生命周期函数中调用
    this.initChart();
  }

然后我们在highcharts_map组件中获取并处理数据:

   update(data) {
    //将数据遍历赋值
      for (let index in data) {
          this.option.series[0].data[index].value = "</br>价值金额" + 		data[index].je + "亿" + "</br>项目名称" + data[index].name + "</br>参与人数" + data[index].body + "人" + "</br>工期" + data[index].day + "天"
      }
      this.initMap()

此处this.option.series[0].data是指的我们获取地图的数据,需要根据地图的数据结构,highcharts_map组件中的数据是位于option对象中的series数组的第一个元素中的data数组中,因此我在这里一层一层的定位到.

2.后端数据处理

在后端获取到数据后要进行一定的处理,我这里是将数据封装为list集合,list集合中的每个元素是map集合,map集合中封装的是字段名(String)和值(Object),这种封装方式使用的是baseJdbcTemplate的queryForList方法,封装好后将list集合转换为jsonarray,方法是listToJsonArray(list).然后将jsonArray响应到前端即可

结:

具体细节我就不再赘述,这里提供一种方法和思路,大家勇于尝试和探索,方法不尽相同,但目的都是一致,提前祝大家新年快乐!