基本使用

• 介绍
• 快速入门
• 常用图表

1. 介绍

• 基于 ZRender
• 开源免费

多种数据格式支持：

• key-value 数据格式
• 二维表
• TypedArray 格式

流数据的支持：（超大数据量）

• 流数据的动态渲染
• 增量渲染技术

2. 快速入门

2.1. 示例

<!--01-quick-start.html-->
<div id="main" style="width: 600px; height: 400px;"></div>
<script>
  echarts.init(document.querySelector('#main')).setOption({
    xAxis: {
      type: 'category', // 类目轴
      data: ['张三', '李四', '王五'] // 设置三个类目
    },
    yAxis: {
      type: 'value',  // 数值轴
    },
    series: [ // 给数值轴设置数据
      {
        name: '语文',
        type: 'bar',
        data: [ 90, 62, 85 ]
      }
    ]
  });
</script>

2.2. 配置

属性	说明
xAxis	x 轴
yAxis	y 轴
series	系列列表	每个系列通过 type 决定自己的图表类型，给数值轴设置数据

const records = [
  { id: 1, name: '张三', chinese: 90 },
  { id: 2, name: '李四', chinese: 62 },
  { id: 3, name: '王五', chinese: 85 },
];

const categories = records.map((item) => item.name);
const values = records.map((item) => item.chinese);

myCharts.setOption({
  xAxis: {
    // 类目轴
    type: 'category', 

    // 设置三个类目, categories
    data: ['张三', '李四', '王五'] 
  },
  
  yAxis: {
    // 数值轴
    type: 'value',  
  },

  // 给数值轴设置数据
  series: [ 
    {
      name: '语文',
      type: 'bar',

      // 挨个给类目设置数值, values
      data: [ 90, 62, 85 ] 
    }
  ]
});

3. ECharts 常用图表

七大图表：

• 柱状图
• 折线图
• 散点图
• 饼图
• 地图
• 雷达图
• 仪表盘图