点击蓝字关注我们

废话不多说先上效果图

看完效果图，我在给大家详细的解释一下我们完成这个图所需要的具体的操作与技术吧！

1.可视化面板介绍

应对现在数据可视化的趋势，越来越多企业需要在很多场景(营销数据，生产数据，用户数据)下使用，可视化图表来展示体现数据，让数据更加直观，数据特点更加突出。

01-技术要点

• div + css 布局

• flex 布局

• Less

• 原生js + jquery 使用

• rem适配

• echarts基础

02-案例适配方案

• 设计稿是1920px

• flexible.js 把屏幕分为 24 等份

• cssrem 插件的基准值是 80px插件-配置按钮—配置扩展设置Root Font Size 里面 设置。
  但是别忘记重启vscode软件保证生效

03-页面主体布局

• header布局

• mainbox布局

• 公共面板模块 panel

• 柱形图 bar

因为我们今天的主题是echarts部分所以前面的这些，我就为大家写好框架，里面的布局相信以大家的能力都是分分钟解决的事情。

2.Echarts(重点)

echarts介绍

常见的数据可视化库：

• D3.js 目前 Web 端评价最高的 Javascript 可视化工具库(入手难)

• ECharts.js 百度出品的一个开源 Javascript 数据可视化库

• Highcharts.js 国外的前端数据可视化库，非商用免费，被许多国外大公司所使用

• AntV 蚂蚁金服全新一代数据可视化解决方案 等等

• Highcharts 和 Echarts 就像是 Office 和 WPS 的关系

ECharts，一个使用 JavaScript 实现的开源可视化库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器(IE8/9/10/11，Chrome，Firefox，Safari等)，底层依赖矢量图形库 ZRender，提供直观，交互丰富，可高度个性化定制的数据可视化图表。

echarts体验

下载echarts https://github.com/apache/incubator-echarts/tree/4.5.0

使用步骤(5大步骤)：
1.引入echarts 插件文件到html页面中
2.准备一个具备大小的DOM容器

3.初始化echarts实例对象

4.指定配置项和数据(option)

5.将配置项设置给echarts实例对象

echarts基础配置

这是要求同学们知道以下配置每个模块的主要作用干什么的就可以了

需要了解的主要配置：series xAxis yAxis grid tooltip title legend color

• series

    系列列表。每个系列通过 type 决定自己的图表类型

• xAxis：直角坐标系 grid 中的 x 轴

• boundaryGap: 坐标轴两边留白策略 true，这时候刻度只是作为分隔线，标签和数据点都会在两个刻度之间的带(band)中间。

• yAxis：直角坐标系 grid 中的 y 轴

• grid：直角坐标系内绘图网格。

• title：标题组件

• tooltip：提示框组件

• legend：图例组件

• color：调色盘颜色列表

  数据堆叠，同个类目轴上系列配置相同的stack值后 后一个 系列的值会在前一个系列的值上相加。

3.Echarts快速使用

1.官网实例

官网默认为我们提供了大量的案例，我们需要使用那一种只需要直接点击打开后复制他们的相关配置，然后按照我上面说的5大步骤进行使用即可。

2.社区Gallery

官方自带的图例，可能在很多时候并不能满足我们的需要，在社区这里可以找到一些基于echart的高度定制好的图表，相当于基于jquery开发的插件，这里是基于echarts开发的第三方的图表。

本案例中使用了地图模拟飞行的案例就是从社区中进行引用的，

实现步骤：

• 第一需要下载china.js提供中国地图的js文件

• 第二个因为里面代码比较多，我们新建一个新的js文件 myMap.js 引入

• 使用社区提供的配置即可。

代码已经上传至我的码云如有需要的小伙伴可自行下载：

https://gitee.com/jiuyueqi/echarts

END关注我们微信号：slm-67659