Echarts

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等），底层依赖矢量图形库提供直观，交互丰富，可高度个性化定制的数据可视化图表。

使用步骤：

1. 引入echarts 插件文件到html页面中

2. 准备一个具备大小的DOM容器

<div id="main" style="width: 600px;height:400px;"></div>

3. 初始化echarts实例对象

var myChart = echarts.init(document.getElementById('main'));

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

var option = {
    xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {
        type: 'value'
    },
    series: [{
        data: [820, 932, 901, 934, 1290, 1330, 1320],
        type: 'line'
    }]
};

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

myChart.setOption(option)

Echarts-基础配置

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

1. title：标题组件

2. tooltip：提示框组件  .

• trigger 'item'数据项图形触发，主要在散点图，饼图等无类目轴的图表中使用。
• 'axis'坐标轴触发，主要在柱状图，折线图等会使用类目轴的图表中使用。
• 'none' 什么都不触发。

3. legend：图例组件 series里面有了name值legend里面的data可以删掉

4. toolbox:工具箱组件,可以另存为图片

5. grid：直角坐标系内绘图网格,可以控制图表大小

• containLabel: true是否显示刻度标签

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

• type坐标轴类型。

• 'value' 数值轴，适用于连续数据。

• 'category' 类目轴，适用于离散的类目数据。为该类型时类目数据可自动从 series.data 或 dataset.source 中取，或者可通过 xAxis.data 设置类目数据。

• 'time' 时间轴，适用于连续的时序数据，与数值轴相比时间轴带有时间的格式化，在刻度计算上也有所不同，例如会根据跨度的范围来决定使用月，星期，日还是小时范围的刻度。

• 'log' 对数轴。适用于对数数据。

• boundaryGap: false,是否让线条和坐标轴有缝隙

• data:数据

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

8. series

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

• 大白话：图标数据，指定什么类型的图标，可以多个图表重叠。

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

color：调色盘颜色列表 数组