初学echarts的excel数据导入遇到的小问题

来源：互联网发布：js if else 简写编辑：程序博客网时间：2024/06/05 14:29

1，单引号声明的字符串中如果有转义符（比如一个路径中的斜杠），这其实就是当作斜杠处理，不是转义字符。

但是当你在下文又和双引号声明的字符串链接时，就会导致问题，出现路径不对情况。

2，在定义SheetName的时候要在最后加一个$号。

3，同一个script快内的函数调用顺序与声明的顺序没有要求，但是如果两个函数在不同的acript块内，则被调用函数的声明必须在前一个script块中

4，在option的定义中，如过一个data后面如果少逗号，页面是完全不会显示的。如果data是null，则会部分显示标题，或者注解。

以下是导入本地数据的echarts的helloworld：

<!DOCTYPE html><head>    <meta charset="GBK">    <title>ECharts</title></head><body>    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->    <div id="main" style="height:200px"></div><div id="main2" style="height:200px"></div><div id="main3" style="height:200px"></div><script src="http://echarts.baidu.com/build/dist/echarts.js"></script><script type="text/javascript">function importXLS(field){      var fileName = "xxxx";// xls文件的路径objCon = new ActiveXObject("ADODB.Connection");objCon.Provider = "Microsoft.Jet.OLEDB.4.0";objCon.ConnectionString = "Data Source=" + fileName + ";Extended Properties=Excel 8.0;";objCon.CursorLocation = 1;objCon.Open;var strQuery;//Get the SheetNamevar strSheetName = "Sheet1$"; //要导入的sheet的名字var rsTemp =   new ActiveXObject("ADODB.Recordset");rsTemp = objCon.OpenSchema(20);if(!rsTemp.EOF)strSheetName = rsTemp.Fields("Table_Name").Value;rsTemp = null;rsExcel =   new ActiveXObject("ADODB.Recordset");strQuery = "SELECT * FROM [" + strSheetName + "]";rsExcel.ActiveConnection = objCon;rsExcel.Open(strQuery);rsExcel.MoveNext;rsExcel.MoveNext;                    var res = [];var temp;                    var limit=339;while(!rsExcel.EOF && limit >0){    if(field ==3 || field ==4 || field ==5)temp = parseInt(rsExcel.Fields(field).value);elsetemp = rsExcel.Fields(field).value;res.push(temp);rsExcel.MoveNext;                        limit--;}// Close the connection and dispose the fileobjCon.Close;objCon =null;rsExcel = null;return res;}    </script><script type="text/javascript">        // 路径配置        require.config({            paths: {                echarts: 'http://echarts.baidu.com/build/dist'            }        });                // 使用        require(            [                'echarts',                'echarts/chart/bar', // 使用柱状图就加载bar模块，按需加载'echarts/chart/line' // 使用折线图就加载line模块，按需加载            ],            function (ec) {    var city = importXLS(2);var population = importXLS(3);var gdp = importXLS(4);var gdpper = importXLS(5);                // 基于准备好的dom，初始化echarts图表                var myChart = ec.init(document.getElementById('main'));                                 alert(gdpper[338]);                var axisData = city;option = {title : {text: '第六次全国人口普查主要城市数据'},tooltip : {trigger: 'axis',showDelay: 0,             // 显示延迟，添加显示延迟可以避免频繁切换，单位msformatter: function (params) {var res = params[0].name;res += '<br/>' + params[0].seriesName;res += '<br/>  人口总数 : ' + params[0].value + '  万 ' ;return res;}},legend: {data:['人口','GDP(万)','人均GDP']},toolbox: {show : true,feature : {mark : {show: true},dataZoom : {show: true},magicType : {show: true, type: ['line', 'bar']},restore : {show: true},saveAsImage : {show: true}}},dataZoom : {y: 250,show : true,realtime: true,start : 50,end : 100},grid: {x: 80,y: 40,x2:20,y2:25},xAxis : [{type : 'category',boundaryGap : true,axisTick: {onGap:false},splitLine: {show:false},data : axisData}],yAxis : [{type : 'value',scale:true,boundaryGap: [0.05, 0.05],splitArea : {show : true}}],series : [{name:'人口',type:'line',data:population,markPoint : {data : [{type : 'max', name: '最大值'},{type : 'min', name: '最小值'}]},markLine : {data : [{type : 'average', name: '平均值'}]}}        ]};option2 = {tooltip : {trigger: 'axis',showDelay: 0             // 显示延迟，添加显示延迟可以避免频繁切换，单位ms},legend: {y : -30,data:['人口','GDP(万)','人均GDP']},toolbox: {y : -30,show : true,feature : {mark : {show: true},dataZoom : {show: true},dataView : {show: true, readOnly: false},magicType : {show: true, type: ['line', 'bar']},restore : {show: true},saveAsImage : {show: true}}},dataZoom : {show : true,realtime: true,start : 50,end : 100},grid: {x: 80,y:5,x2:20,y2:40},xAxis : [{type : 'category',position:'top',boundaryGap : true,axisLabel:{show:false},axisTick: {onGap:false},splitLine: {show:false},data : axisData}],yAxis : [{type : 'value',scale:true,splitNumber: 3,boundaryGap: [0.05, 0.05],axisLabel: {formatter: function (v) {return Math.round(v/10000) + ' 万'}},splitArea : {show : true}}],series : [{name:'GDP(万)',type:'line',symbol: 'none',data: gdp,markPoint : {data : [{type : 'max', name: '最大值'},{type : 'min', name: '最小值'}]},markLine : {data : [{type : 'average', name: '平均值'}]}}]};myChart2 = ec.init(document.getElementById('main2'));myChart2.setOption(option2);option3 = {tooltip : {trigger: 'axis',showDelay: 0             // 显示延迟，添加显示延迟可以避免频繁切换，单位ms},legend: {y : -30,data:['人口','GDP(万)','人均GDP']},toolbox: {y : -30,show : true,feature : {mark : {show: true},dataZoom : {show: true},dataView : {show: true, readOnly: false},magicType : {show: true, type: ['line', 'bar']},restore : {show: true},saveAsImage : {show: true}}},dataZoom : {y:200,show : true,realtime: true,start : 50,end : 100},grid: {x: 80,y:5,x2:20,y2:30},xAxis : [{type : 'category',position:'bottom',boundaryGap : true,axisTick: {onGap:false},splitLine: {show:false},data : axisData}],yAxis : [{type : 'value',scale:true,splitNumber:3,boundaryGap: [0.05, 0.05],axisLabel: {formatter: function (v) {return Math.round(v/10000) + ' 万'}},splitArea : {show : true}}],series : [{name:'人均GDP',type:'bar',symbol: 'none',     data: gdpper,markPoint : {data : [{type : 'max', name: '最大值'},{type : 'min', name: '最小值'}]},markLine : {data : [{type : 'average', name: '平均值'}]}}]};myChart3 = ec.init(document.getElementById('main3'));myChart3.setOption(option3);myChart.connect([myChart2, myChart3]);myChart2.connect([myChart, myChart3]);myChart3.connect([myChart, myChart2]);setTimeout(function (){window.onresize = function () {myChart.resize();myChart2.resize();myChart3.resize();}},200)                                            // 为echarts对象加载数据                 myChart.setOption(option);             }        );</script></body>

0 0