数据可视化echarts介绍

echarts基本概念

1.系列（series）

系列（series）是指：一组数值映射对应的图

1-1.png

2.echarts 4.0 新特性 dataset

4.0版本支持了数据集（datatset）组件用于单独的数据集声明，从而数据可以单独管理，被多个组件复用，并且可以自由指定数据到视觉的映射。这一特性能将逻辑和数据分离，带来更好的复用，并易于理解。

1-2.png

• 案列

• 案列效果

  
  
  1-3.png

3.组件

echarts中除了绘图之外其他部分，都可抽象为组件。例如，echarts中至少有这些组件：
xAxis(直角坐标系X轴),yAxis（直角坐标系Y轴），grid(直角坐标系底板),angleAxis(极坐标系度轴)...

1-4.png

4.自定义主题和svg渲染

• 自定义主题

https://echarts.apache.org/zh/tutorial.html#ECharts%20%E4%B8%AD%E7%9A%84%E6%A0%B7%E5%BC%8F%E7%AE%80%E4%BB%8B

• svg渲染

默认是canvas渲染，频繁更新动画，用canvas效果更好
大屏幕展示，svg不失真，效果更好

const chartDemo = document.getElementById('chart');
// 第三个参数，渲染对象设置为svg,m默认是canvas
    const chart = echarts.init(chartDemo, 'infographic', { renderer: 'svg' });

5.定位（grid）

1-5.png