可视化图表踩坑记录

开头

这周开发了一个粉丝数据可视化的模块，第一次这么“深度”的使用了下市面比较知名的2个可视化库，记录下一些坑和收货

坑

• Vue中使用echarts map不渲染
• Highcharts 17错误
• Highcharts挂载dom，v-if无效

收货

• 封装echarts中国地图组件
• 封装highcharts气泡图组件

正文

基本概念

• 两者使用语法差不多，很多配置项名称也类似，即使一样概念也很相似
• 基本概念参考echarts说明

关于两者区别

• 两个库使用语法都差不多，字面量对象配置语法，查对应手册即可:echarts highcharts
• 两者的区别：echarts底层是canvas；highcharts是SVG
• 关于canvas和svg的区别：
• • svg是xml描述图形，内容都是一个个dom节点，可以通过js操作节点；且输出图像为矢量图，放大缩小不会失真
• • canvas是绘制的一块画布，绘制能力强，但是输出的是类似图像的格式，会失真

填坑

echarts

• 在vue中使用，绘制地图，不报错，也不显示地图
• 一些配置显示地图后，各个省份颜色不会根据设置的颜色状态变化
• 解决：
• • 在Vue中需要通过geo配置项来告诉echarts渲染地图
• • geo渲染的地图，如果要和visualMap设置的数据对应，需要在series中通过geoIndex来设置共享同一个geo组件
• 名词解释：
• • geo：地理系坐标组件
• • visualMap：视觉映射组件，即控制地图哪些地方应该是什么颜色的控制组件
• • series：系列表配置，配置图表类型的
• • series-map. geoIndex：让map和其他类型图表和geo共享一个geo组件

highcharts

• 17错误：即默认的库不包含要引入的类型，需要额外引入highcharts-more
• 是个函数，然后将引入的Highcharts作为参数传递给highcharts-more这个函数即可
• 对于更多的类型，则需要单独导入对应图标类型文件，使用方法类似
• 具体哪些需要导入可以查看官方文档实例的编辑器，左边有用到的文件

import Highcharts from 'highcharts/highstock';
import HighchartsMore from 'highcharts/highcharts-more';
HighchartsMore(Highcharts);

Highcharts挂载dom，v-if无效

• 和echarts在挂载dom下插入canvas
• Highcharts会将挂载dom替换成生成的svg