# echarts是百度公司开发的HTML图形数据分享表
~~~
```
var option={
title: {
text: '充值金额'
},
tooltip: {},
legend: {
data: ['充值金额']
},
xAxis: {
data: []
},
yAxis: {},
series: [{
name: '充值金额',
type: 'bar',
data: [100, 200]
}]
};
// 基于准备好的dom,初始化echarts实例
var myChart = echarts.init(document.getElementById('main-line'));
myChart.setOption(option);
```
## 以上为使用方法
-----------------------------------------------------------------------------------------
----------------------------------------layui前端框架中------------------ajax请求数据的
```
layui.use(['element', 'layer'], function () {
var element = layui.element
, $ = layui.jquery;
var layer = layui.layer;
//进入页面自动加载这个函数,也就是自动发送AJAX
layer.ready(function () {
//发送AJAX
$.ajax({ //请求AJAX后台部分
url: '/admin/tongji_trme',
type: 'get',
success: function (trem) {
var shijian=[];
for(let index in trem){
console.log(trem[index]);
}
myChart.setOption({xAxis:{data:shijian}}); //异步赋值方法
}
});
});
});
```
~~~
# 异步::设置数据语法
## myChart.setOption({});
# {}的值就是
![](https://img.kancloud.cn/69/d0/69d0bcb36802784ced6648a4843757e6_341x570.png)
# 案例:
设置xAxis里的值
~~~
myChart.setOption({xAxis:{data:shijian}});
~~~