介绍

1、丰富的可视化类型: 提供了常规的折线图、柱状图、散点图、饼图、K线图，用于统计的盒形图，用于地理数据可视化的地图、热力图、线图，用于关系数据可视化的关系图、treemap、旭日图，多维数据可视化的平行坐标，还有用于 BI 的漏斗图，仪表盘，并且支持图与图之间的混搭。 2、多种数据格式无需转换直接使用: 内置的 dataset 属性（4.0+）支持直接传入包括二维表，key-value等多种格式的数据源，此外还支持输入 TypedArray 格式的数据。

3、千万数据的前端展现: 通过增量渲染技术（4.0+），配合各种细致的优化，ECharts 能够展现千万级的数据量。

4、移动端优化: 针对移动端交互做了细致的优化，例如移动端小屏上适于用手指在坐标系中进行缩放、平移。 PC 端也可以用鼠标在图中进行缩放（用鼠标滚轮）、平移等。

5、多渲染方案，跨平台使用: 支持以 Canvas、SVG（4.0+）、VML 的形式渲染图表。

6、深度的交互式数据探索: 提供了图例、视觉映射、数据区域缩放、tooltip、数据刷选等开箱即用的交互组件，可以对数据进行多维度数据筛取、视图缩放、展示细节等交互操作。

7、多维数据的支持以及丰富的视觉编码手段: 对于传统的散点图等，传入的数据也可以是多个维度的。

8、动态数据: 数据的改变驱动图表展现的改变。

9、绚丽的特效: 针对线数据，点数据等地理数据的可视化提供了吸引眼球的特效。

下载并引入echarts.js文件
javascript
```
import * as echarts from 'echarts';
```
准备一个具有大小（宽高）的DOM容器

初始化echarts实例

javascript

var myChart = echarts.init(document.querySelector('.box'))

配置配置项和数据（option）

javascript

var option = {
  // 标题
  title:'echarts', 
  color: ['red','green'], // 线条颜色
  //提示框组件
  tooltip:{ 
    trigger:'axis'  // trigger触发方式，item：柱状图，axis：折线图
  },
  // 图例组件
  lengend:{ 
    data：[] //如果series中设置了name属性，可省略
  },
  // 工具栏组件 
  toolBox:{
    feature:{
      saveAsImage:{}， // 保存为图片
      dataView: { readOnly: true } ///数据模式
      restore: {}, // 复原
    }
  },
  // 直角坐标系内绘图网格
  grid:{
    show: true,
    left:'3%',
    right: '5%',
    top: '5%',
    bottom: '10%',
    containLabel: true // grid 区域是否包含坐标轴的刻度标签。
  },
  // X轴
  xAxis:{
    type: 'category' // 类目
    data:[], // 坐标轴显示类目
    // 坐标轴两边留白策略，是否让我们的线条和坐标轴有间隙
    boundaryGap: false
  },
  // y轴
  yAxis:{
    type: 'value', // 值
    // y轴分割线的颜色
    splitLine: {
      lineStyle: {
        color: "rgba(255,255,255,.1)"
      }
    }
  },
  // 系列图表配置  决定显示哪种类型的图表
  series: [
    {
      name: 'vue',
      type: 'line',  // line：折线  bar：柱形，pie：饼图
      data:[1,2,3,4,5,6,7], // 后端返回
      stack:'总量' // 数据堆叠，不常用
    } 
  ]
}

将配置项设置给echarts实例对象
javascript
```
 myChart.setOption(option);
```

响应式

javascript

window.addEventListener("resize", function() {
    myChart.resize();
  });

介绍 ​

介绍