echarts是百度一个正儿八经的良心货,免费开源,功能强大。
近日想来让echarts用于公司技术中心生产数据的趋势画图,把生产上填报的表格用图标显示出来。想想还是有点用。
1、echart样例:
可是我不知道从哪里看到了一个跟这个有一点不同,就一直用下了。代码是这样用的:
然后,谷歌浏览器执行没问题,IE也没有问题。
由于echarts是utf-8编码的,所以我做测试也用utf-8时没问题。但问题是我数据库里包含中文字段,用utf-8就乱码了,必须用GBK。把代码用GBK方式保存后IE就不显示了,谷歌正常。(原本以为我哪里出错了,找了半天才明白是编码问题。)
处理的方式也简单,在调用代码时候加上编码的声明就行了:
这时,都正常了。
下面就说说为了实现调用数据库,我学习的吧:
实现调用数据的asp代码:
<%
dim conn,connstr,rs,sql
set conn = Server.CreateObject("Adodb.Connection")
connstr = "Provider=SQLOLEDB;data source=127.0.0.1;initial catalog=OA;uid=sa;pwd=**"//sqlserver2000数据库的连接,密码隐藏了
conn.open connstr
//获取RCID
set rs = Server.CreateObject("Adodb.RecordSet")
sql = "select ExcelServerRCID from 浮法四线熔化_主表"//数据库是excle服务器的数据库,使用了中文表名。在这里可以指定是哪一个表,比如按照日期进行指定。因为数据库里只有一张表,就不进行指定了。
rs.open sql,conn,1,1
if not rs.eof then
RCID = rs("ExcelServerRCID")
else
RCID = ""
response.write "找不到数据"
end if
rs.close
%>
数据填报系统入口
//因为是GBK编码,调用utf-8的js文件必须指定编码。
// 基于准备好的dom,初始化echarts图表 var myChart = echarts.init(document.getElementById('main'));
var option = { tooltip : { trigger: 'axis' }, legend: { data:[ <% //获取RCID明细中参数点点 set rs0 = Server.CreateObject("Adodb.RecordSet") sql0 = "select distinct 参数点 from 浮法四线熔化_明细 where ExcelServerRCID = '" & RCID &"'"//distinct 参数点 是说相同参数点只返回一个值。这就得到了所有种类的参数,且没有重复。 rs0.open sql0,conn,1,1 if not rs0.eof then while not rs0.eof response.write "'"& rs0("参数点") &"'" rs0.movenext if not rs0.eof then//这种用法是用逗号分隔数据,如果不是最后一个就加逗号,最后一个就不加了。 response.write "," end if wend else response.write "" end if rs0.close %> ] }, toolbox: { show : true, feature : { mark : {show: false}, dataView : {show: false, readOnly: false}, magicType : {show: false, type: ['line', 'bar', 'stack', 'tiled']}, restore : {show: true}, saveAsImage : {show: true} } }, calculable : true, xAxis : [ { type : 'category', boundaryGap : false, data : [ <% //获取RCID明细中时间点 set rs1 = Server.CreateObject("Adodb.RecordSet") sql1 = "select distinct cast(时间 as int) as '时间' from 浮法四线熔化_明细 where ExcelServerRCID = '" & RCID &"'"//cast(时间 as int) as '时间'目的是让返回的文字型转换为数值型,不然排序就不是想要的了。 rs1.open sql1,conn,1,1 if not rs1.eof then while not rs1.eof response.write "'"& rs1("时间")&"'" rs1.movenext if not rs1.eof then response.write "," end if wend else response.write "找不到数据" end if rs1.close %> ] } ], yAxis : [ { type : 'value' } ], series : [ <% set rs2 = Server.CreateObject("Adodb.RecordSet") sql2 = "select distinct 参数点 from 浮法四线熔化_明细 where ExcelServerRCID = '" & RCID &"'" rs2.open sql2,conn,1,1 if not rs2.eof then while not rs2.eof response.write "{"&vbcrlf&"name:'"&rs2("参数点")&"',"&vbcrlf response.write "type:'line',"&vbcrlf 'response.write "stack: '总量',"&vbcrlf response.write"data:[" set rs3 = Server.CreateObject("Adodb.RecordSet") sql3 = "select 数据 from 浮法四线熔化_明细 where ExcelServerRCID = '" & RCID &"' and 参数点='"&rs2("参数点")&"'order by cast(时间 as int) asc"//为了让返回的数据按照时间进行排列,加上了order by cast(时间 as int) asc。 'response.write sql3 rs3.open sql3,conn,1,1 if not rs3.eof then while not rs3.eof response.write rs3("数据") rs3.movenext if not rs3.eof then response.write "," end if wend else response.write "找不到数据" end if rs3.close response.write"]"&vbcrlf&"}" rs2.movenext if not rs2.eof then response.write ","&vbcrlf end if wend else response.write "找不到数据" end if rs2.close %> ] };
// 为echarts对象加载数据
myChart.setOption(option);
<%
conn.close
set conn=nothing
%>