echarts-基本认识

常见的数据可视化库

• D3.js （入手难）
• Echarts.js 百度开发的JS开源数据可视化库
• Highcharts.js 国外的前端数据可视化库
• AntV 蚂蚁金服全新一代数据可视化解决方案
• 注释： highcharts和echarts相当于office和WPS的关系

Echarts 是一个使用JavaScript 实现的开源可视化库，可以运行在PC端和移动端，底层依赖矢量图形库ZRender.

Echarts 使用五部曲

• 下载并引入echarts.js 文件
• 准备一个具备大小的DOM容器
• 初始化echarts实例对象
• 指定配置项和数据(options)
• 将配置项设置给echarts实例对象

Echarts 组件配置

var dom = document.getElementById('dom-id');  // 获取dom对象
var chart = echarts.init(dom);  // 创建 echarts 实例。

// 用 option 描述 `数据`、`数据如何映射成图形`、`交互行为` 等。
// option 是个大的 JavaScript 对象。
var option = {
    // option 每个属性是一类组件。
    title:{...},    //标题组件，
    legend: {...},  // 图例组件
    grid: {...},  //网格组件 控制图表的大小和定位
    tooltip: {...},  //提示框组件
    toolbox: {...},  //工具栏组件
    dataZoom: {...},  //是否开启缩放
    visualMap: {...}, //视觉映射组件
    // 如果有多个同类组件，那么就是个数组。例如这里有三个 X 轴。
    xAxis: [
        // 数组每项表示一个组件实例，用 type 描述“子类型”。
        {type: 'category', ...},
        {type: 'category', ...},
        {type: 'value', ...}
    ],
    yAxis: [{...}, {...}],
    // 这里有多个系列，也是构成一个数组。
    series: [  // 系列
        // 每个系列，也有 type 描述“子类型”，即“图表类型”。
        {type: 'line', data: [['AA', 332], ['CC', 124], ['FF', 412], ... ]},
        {type: 'line', data: [2231, 1234, 552, ... ]},
        {type: 'line', data: [[4, 51], [8, 12], ... ]}
    }]
};

// 调用 setOption 将 option 输入 echarts，然后 echarts 渲染图表。

echats详情