一、引入jquery.min.js、jquery.csv.min.js和echarts.min.js核心js库;
<!--jquery核心库--> <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script> <!--jquery.csv核心库--> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery-csv/1.0.3/jquery.csv.min.js"></script> <!--echarts核心库--> <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
二、echarts读取异步加载数据
/*读取csv数据*/ var Dname = [], Data = []; function getCsv() { var csv_file_API = 'line.csv';//csv files $.ajax({ type: 'post', url: csv_file_API, async: true,//异步传递数据的方式; dataType: 'text', success: function (data) { var dataCsv = $.csv.toObjects(data);//获取数组,并通过jQuery-CSV进行处理转化; //console.log(dataCsv); /*处理CSV数据,并输入Echarts格式*/ for (var i = 0; i < dataCsv.length; i++) { Dname.push(dataCsv[i].name); Data.push(dataCsv[i].data); } /*echarts图表渲染*/ var dom = document.getElementById("container"); var myChart = echarts.init(dom); var option = { tooltip: { trigger: 'axis' }, xAxis: { type: 'category', data: Dname }, yAxis: { type: 'value' }, series: [{ data: Data, type: 'bar' }] }; if (option && typeof option === "object") { myChart.setOption(option, true); } }, error: function (e) { alert('API调用出错!'); console.log("API call Failed: ", e); } }); } getCsv();