ECharts-基本使用

• • • 前言
    • ECharts介绍
    • ECharts快速上手
    • ECharts配置说明

前言

• 本篇开始来学习下开源可视化库ECharts

ECharts介绍

• ECharts是百度公司开源的一个使用 JavaScript 实现的开源可视化库，兼容性强，底层依赖矢量图形
  库 ZRender ，提供直观，交互丰富，可高度个性化定制的数据可视化图表 。官方文档

ECharts快速上手

1. 步骤1：引入 echarts.js 文件(可使用本地文件、CDN方式等)

2. 步骤2：准备一个呈现图表的盒子：决定图表显示的位置和大小

3. 初始化 echarts 实例对象：通过id属性选择DOM元素

var myCharts = echarts.init(document.getElementById('app'))

4. 准备配置项

var option = {xAxis: {type: 'category',data: ['测试', '研发', '产品']},yAxis: {type: 'value'},series: [{name: '岗位',type: 'bar',data: [10, 90, 20]}]}

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

myCharts.setOption(option)

• 完整代码如下:

• 效果
  

ECharts配置说明

官方配置项使用文档

• xAxis：直角坐标系 中的 x 轴, 如果 type 属性的值为 category ,那么需要配置 data 数据, 代表在 x 轴的
  呈现
• yAxis：直角坐标系 中的 y 轴, 如果 type 属性配置为 value , 那么无需配置 data , 此时 y 轴会自动去
  series 下找数据进行图表的绘制
• series：系列列表。每个系列通过 type 决定自己的图表类型, data 来设置每个系列的数据