关于ECharts（初步-526互联

让图表跟随屏幕自适应

  // 当我们浏览器缩放的时候，图表也等比例缩放
  window.addEventListener("resize", function() {
    // 让我们的图表调用 resize这个方法
    myChart.resize();
  });

axios:数据交互

websocket：前后端数据推送

多种数据支持：key-value，二维表，TypedArray格式

流数据的支持：流数据的动态渲染，增量渲染技术。

引入
基于准备好的dom，初始化echarts实例,初始化图表

var myChart = echarts.init(document.getElementById('main'));
设置配置项，绘制图表和数据option
myChart.setOption(option);

将配置项以及数据，万能接口，所有参数和数据的修改通过通过 setOption配置给图表实例 echarts

一些配置：

xAxis/yAxis ：x/y轴

series：系列列表，每个系列通过type决定自己的图表类型。数组，里面存放对象。

option-xAxis-type. value/category/time/log

value：适用于连续数据
category：类目轴，适用于离散的类目数据，
- 可通过 xAxis.data 设置类目数据，类目数据只在类目轴有效。
- 如果没有设置 type，但是设置了 axis.data，则认为 type 是 'category'。
- 如果type是category，而xAxis.data里没有设置数据，则用series.data里的。
time：时间轴：

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

series.type

line/bar/pie/scatter(散点)/effectScatter(涟漪散点)/radar/tree/。。。

[series的type] https://echarts.apache.org/zh/option.html#series-line

title

[series的title] https://echarts.apache.org/zh/option.html#title.textStyle

bar常见效果

bar 描述的是分类数据，

barWidth：柱子宽度；

markPoint/markLine

const option = {
  series:[
    {
      name:'',
      type:'',
      markPoint:{
        data:[
          { type:'max', name:'最大值'},
          { type:'min', name:'最小值'}
        ]
      },
      markLine:{
        data:[
          {type:'average', name:'平均值'}
        ],
      }
      data:###,
    },
  ]
}

label显示数值

图形上的文本标签，可用于说明图形的一些数据信息，比如值，名称等。

[label] https://echarts.apache.org/zh/option.html#series-bar.label

const option = {
  series:[
    {
      name:'',
      type:'',
      label:{
        show: true,
        rotate:60,
        position:'inside'
      },
      data:###,
    },
  ]
}

通用配置

任何图表都能使用

title
- 文字样式 textStyle
- 标题边框 borderWidth, borderColor, borderRadius
- 标题位置 left, top, right, bottom

tooltip：提示，提示框组件，用于配制鼠标滑过或点击图表时的显示框。
- 触发类型 trigger： 'item'/'axis'/'none'
- 触发时机（条件） triggerOn： 'mousemove'/'click'/'mousemove|click'/'none'
- 格式化（提示框的内容变成我们设置的） formatter：'字符串模版'/'回调函数'
  - 字符串模版：模版变量{a},{b},{c},{d},{e}，不同图表含义不同：{b0}是{c0}<br />{b1}：{c1}
  - 回调函数 formatter:function(arg){ return arg.xxx }???console.log(arg)
toolbox：工具按钮/ECharts 提供的工具栏
- 内置有五个工具 toolbox:{feature:{}}：导出图片，数据视图，动态类型切换，数据区域缩放，重置
- 导出图片feature:{saveAsImage:{}}
- 数据视图feature:{dataView:{}}
- 数据区域缩放feature:{dataZoom:{}}
- 重置feature:{restore:{}}
- 动态类型切换:在不同图表类型间动态切换magicType:{type:['bar','line']}
```
const option = {
  toolbox:{
    feature:{
      magicType:{
        type:['bar','line']
      }}}}
```
legend：图例,用于筛选系列，与series配合使用

容器节点被销毁以及被重建时

假设页面中存在多个标签页，每个标签页都包含一些图表。当选中一个标签页的时候，其他标签页的内容在 DOM 中被移除了。这样，当用户再选中这些标签页的时候，就会发现图表“不见”了。

本质上，这是由于图表的容器节点被移除导致的。即使之后该节点被重新添加，图表所在的节点也已经不存在了。

正确的做法是，在图表容器被销毁之后，调用 echartsInstance.dispose 销毁实例，在图表容器重新被添加后再次调用 echarts.init 初始化。

在容器节点被销毁时，总是应调用 echartsInstance.dispose 以销毁实例释放资源，避免内存泄漏。