ajax获取API接口数据，然后在Echarts中进行数据传递渲染，是最常见的方式，也是实现客户端轮询图表刷新的必用方式。在开发过程中，不同的需求对ajax的使用也有不同的方式。
引入外部JS包
<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script> <!--Echarts核心库--> <script type="text/javascript" charset="utf-8" src="js/echarts.min.js"></script>
HTML代码
<div class="container"> <div class="weather-side"> <div class="weather-gradient" id="main"></div> </div> </div>
正常Echarts图表
var myChart = echarts.init(document.getElementById("main")); var option = { xAxis: { type: 'category', data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] }, yAxis: { type: 'value', }, series: [{ data: [120, 200, 150, 80, 70, 110, 130], type: 'bar', backgroundStyle: { color: 'rgba(220, 220, 220, 0.8)' } }] }; myChart.setOption(option); window.addEventListener("resize", function () { myChart.resize(); });
通过ajax获取数据实现图表的渲染
数据文件data.json
{ "err": "0", "res": "OK", "data": [ { "name": "Mon", "data": "120" }, { "name": "Tue", "data": "200" }, { "name": "Wed", "data": "150" }, { "name": "Thu", "data": "80" }, { "name": "Fri", "data": "80" }, { "name": "Sat", "data": "110" }, { "name": "Sun", "data": "130" } ] }
1.封装函数，ajax内部调用;
应用场景
- 适合相同图表的不同场合或多次调用，封装成公共函数，减少代码冗余；
- 传递参数，按照不同的使用需求设置多个。比如：必须的data和X轴名称外，可以设置容器的id、柱图的颜色等等；
实践代码
//获取JSON数据; $.getJSON("data/data.json", function (res) { var dataList = [], dataName = []; for (var i = 0; i < res.data.length; i++) { dataName.push(res.data[i].name); dataList.push({value: res.data[i].data} ); } //console.log(dataName); //渲染图表; getLine(dataName, dataList) }) function getLine(dataName, dataList) { var myChart = echarts.init(document.getElementById("main")); var option = { xAxis: { type: 'category', data: dataName }, yAxis: { type: 'value', }, series: [{ data: dataList, type: 'bar', backgroundStyle: { color: 'rgba(220, 220, 220, 0.8)' } }] }; myChart.setOption(option); window.addEventListener("resize", function () { myChart.resize(); }); }
2.Echarts内部调用ajax;
实践代码
var myChart = echarts.init(document.getElementById("main")); var option = { xAxis: { type: 'category', data: [] }, yAxis: { type: 'value', }, series: [{ data: [], type: 'bar', backgroundStyle: { color: 'rgba(220, 220, 220, 0.8)' } }] }; myChart.setOption(option); //获取JSON数据; $.getJSON("data/data.json", function (res) { var dataList = [], dataName = []; for (var i = 0; i < res.data.length; i++) { dataName.push(res.data[i].name); dataList.push({value: res.data[i].data} ); } //传递数据; myChart.setOption({ xAxis: { data: dataName }, series: [{ data: dataList }] }); }) window.addEventListener("resize", function () { myChart.resize(); });
其他说明
ajax异步加载返回值作用域的问题
//获取JSON数据; var dataList = [], dataName = []; $.getJSON("data/data.json", function (res) { for (var i = 0; i < res.data.length; i++) { dataName.push(res.data[i].name); dataList.push({value: res.data[i].data} ); } console.log(dataName);//正常显示； }) console.log(dataName);//显示为空，不能将ajax的数值传递至作用域外。
不推荐的同步加载方式
《ajax获取success返回值的解决方案》，https://blog.csdn.net/weixin_41290949/article/details/104281027
Done！
