0%

可视化图表踩坑记录

开头

这周开发了一个粉丝数据可视化的模块,第一次这么“深度”的使用了下市面比较知名的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:系列表配置,配置图表类型的

highcharts

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

Highcharts挂载dom,v-if无效

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