异步数据加载和Tab选项卡

开发工具与关键技术：VS echart和layui tab
作者：微凉之夏
撰写日期：2019年06月06日

在echarts入门示例中的数据是在初始化后，setOption中直接填入的，但是很多时候可能数据需要异步加载后再填入，ECharts中实现异步数据的更新非常简单，在图表初初始化后不管任何时候只要通过jQuery等工具异步获取数据后通过setOption填入数据和配置项就行了，其中在setoption中title是标题组件，包含主题标题和副标题，text是异步数据加载示例，tooltip是提示框组件legend是图例组件xAxis是直角坐标系 grid 中的 x 轴，单个 grid 组件最多只能放上下两个 x 轴xAxis中的data是类目数据，在类目轴（type: ‘category’）中有效反过来yAxis则是直角坐标系 grid 中的 y 轴，单个 grid 组件最多只能放左右两个 y 轴series是系列列表（每个系列通过type决定自已的图表类型）等等。如下：


或者先设置完其它的样式，显示一个空的直角坐标轴，然后获取数据后填入数据。在echarts中在更新数据的时候需要通过 name属性对应到相应的系列中来，上面示例中如果name不存在也可以根据系列的顺序正常更新，但是更多时候推荐更新数据的时候加上系列的name数据。不过如果数据加载时间比较长时，一个空的坐标轴放在画布上也会让用户觉得是不是产生bug了，因此需要一个loading的动画来提示用户数据正在加载。在echarts默认有提供了一个简单的加载动画，只需要调用showLoading方法显示，数据加载完成后再调用hideLoading方法隐藏加载动画。例如：mycharts.showLoading();
$.get(‘data.json’).done(function(data){
myChart.hideLoading(); myChart.setOption(……); });

导航菜单可用于头部和测边，Tab选项卡提供多套风格，支持响应式，支持删除选项卡等功能。Tab广泛用于web页面，layui内置多种tab风格，支持删除选项卡、并提供响应式支持。通过追加class的layui-tab-card来设定卡片的风格,首先是用到div命名为layui-tab layui-tab-card来包含ul标签名为layui-tab-titleli标签（相当于标题）在用一个div名为layui-tab-content来装内容再用每个div名为layui-tab-item来装每个标题的内容，当你选择每个标题的时候都会有着高亮效果，如下：

接着是一种带有删除的tab选项卡，你可以对父层容器设置属性layui-allowClose=“true” 来允许Tab选项卡被删除与默认相比没有什么特别的结构，就是对了个属性ayui-allowClose=“true”其它的跟上面的基本一样，你可以清楚的看到下面的第三张图片明显少了一个网站商店，而且每个标题的右手边都带有一个×的符号，只要点击了它那么你所点击的标题就会删除掉，如下：