关于ECharts（初步

让图表跟随屏幕自适应

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

axios:数据交互

websocket：前后端数据推送

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

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

1. 引入

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

   var myChart = echarts.init(document.getElementById('main'));

3. 设置配置项，绘制图表和数据option

4. 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 以销毁实例释放资源，避免内存泄漏。