vue中使用数据可视化

1.多坐标系

就是一个图表实现展现多个坐标系，一个坐标系就是一个grid

这里主要用到关键几个属性：grid,xAxis,yAxis,gridIndex,xAxisIndex,yAxisIndex

grid：定义坐标系网络

xAxis：x轴

yAxis: y轴

gridIndex：网络的下标 从0开始，0代码第一个网格坐标,1代码第2个坐标系。。。。

xAxisIndex：代表横轴坐标编号 0代码第1个横轴。。。。

yAxisIndex：代纵轴坐标编号 0代码第1个纵轴。。。。

完整示例代码如下：

• 目前国内基于数据可视化解决方案：

  • 百度 sugar
  • 腾讯云图
  • 阿里 dataV

• vue初始化项目

• 安装element ui和echarts

  1.vue add element

  How do you want to import Element?
  Fully import //完整引入
  ❯ Import on demand //按需引入，可以节约打包空间，文件小很多

  2. npm install echarts

• 清理项目中无用的文件

• 引入reset.css

• 项目组件拆分

  • topView

  • salesView

  • bottomView

  • mapView