前言:
1、实现自定义左下角的视觉映射组件(包括自定义颜色、文字、图元大小)
2、实现自定义悬浮提示框
如下图所示:
实现步骤:
一、在vue中安装echarts
1、npm install echarts
二、在vue组件中使用echarts
1、在组件中先引入echarts
import echarts from 'echarts'
// 引入echarts中国地图数据
2、在组件中引入中国地图数据
require('echarts/map/js/china')
ps:地图类的echarts实现是需要额外引入地图数据了。
见官网:https://echarts.baidu.com/option.html#geo.map
3、在组件页面内定一个标签来渲染地图
<div id="china_map" style='width:600px;height:400px;'> </div>
4、初始化 echarts 实例和指定配置参数
我一般是在mounted
生命周期函数中进行初始化地图表格数据的。
mounted () {
// 初始化echarts实例
this.chinachart = echarts.init(document.getElementById('china_map'))
// 进行相关配置
this.chartOption = {
tooltip: {
// 鼠标移到图里面的浮动提示框
// formatter详细配置: https://echarts.baidu.com/option.html#tooltip.formatter
formatter (params, ticket, callback) {
// params.data 就是series配置项中的data数据遍历
let localValue,
perf,
downloadSpeep,
usability,
point
if (params.data) {
localValue = params.data.value
perf = params.data.perf
downloadSpeep =</