数据可视化的应用场景

• 通用报表
• 移动端图表
• 大屏可视化
• 图编辑&图分析
• 地理可视化

常见的数据可视化库

• D3.js
• Echarts.js
• HighCharts.js
• AntV
• ....

ECharts

具体细节 移步官网查看相关文档

Apache ECharts (opens new window)

使用 javaScript 实现的开源可视化库

• 下载引入 js 文件
• 准备 DOM 容器
• 初始化 echarts 实例对象
• 指定配置项和数据
• 将配置项设置给 echarts 实例对象

常用配置属性

• title 标题组件
• tooltip 提示框组件
• legend 图例组件
• toolbox 工具栏
• grid 直角坐标系内绘图网格
• xAxis 直角坐标系 grid 中的 x 轴
• xAxis 直交坐标系 grid 中的 y 轴
• series 系列列表
• color 调色颜色列表

临时扩展css

边框图片

属性	描述
border-image-source	URL
border-image-slice	图片边框内响内偏移
border-image-width	图片边框的宽度
border-image-repeat	图像边框是否应 repeat（平铺）、round（铺满）、stretch（默认拉伸）

.demo {
  width: 400px;
  height: 300px;
  border: 15px solid black;
  border-image-source: url(./images/border.jpg);
  border-image-slice: 166;
  border-image-width: 30px;
  border-image-repeat: repeat;
}