Echarts官方网站

ECharts,一个使用 JavaScript 实现的开源可视化库,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器(IE8/9/10/11,Chrome,Firefox,Safari等),底层依赖矢量图形库 ZRender,提供直观,交互丰富,可高度个性化定制的数据可视化图表。


04-Echarts-体验

官方教程:五分钟上手ECharts](https://www.echartsjs.com/zh/tutorial.html#5 分钟上手 ECharts)

自己步骤:

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

初始化echarts实例对象
  1. var myChart = echarts.init(document.getElementById('main'));
  • 指定配置项和数据(option)
  1. var option = {
  2. xAxis: {
  3. type: 'category',
  4. data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  5. },
  6. yAxis: {
  7. type: 'value'
  8. },
  9. series: [{
  10. data: [820, 932, 901, 934, 1290, 1330, 1320],
  11. type: 'line'
  12. }]
  13. };
  • 将配置项设置给echarts实例对象
  1. myChart.setOption(option);

05-Echarts-基础配置

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

  • series
    • 系列列表。每个系列通过 type 决定自己的图表类型
    • 大白话:图标数据,指定什么类型的图标,可以多个图表重叠。
  • xAxis:直角坐标系 grid 中的 x 轴
    • boundaryGap: 坐标轴两边留白策略 true,这时候刻度只是作为分隔线,标签和数据点都会在两个刻度之间的带(band)中间。
  • yAxis:直角坐标系 grid 中的 y 轴
  • grid:直角坐标系内绘图网格。
  • title:标题组件
  • tooltip:提示框组件
  • legend:图例组件
  • color:调色盘颜色列表
    数据堆叠,同个类目轴上系列配置相同的stack值后 后一个系列的值会在前一个系列的值上相加。