Foxtable(狐表)用户栏目专家坐堂 → [分享]百度ECharts使用示例


  共有26731人关注过本帖树形打印复制链接

主题:[分享]百度ECharts使用示例

帅哥哟,离线,有人找我吗?
qwz405
  1楼 | 信息 | 搜索 | 邮箱 | 主页 | UC


加好友 发短信
等级:二尾狐 帖子:522 积分:5027 威望:0 精华:0 注册:2015/4/15 15:25:00
  发帖心情 Post By:2017/7/10 20:09:00 [显示全部帖子]

很美~

 回到顶部
帅哥哟,离线,有人找我吗?
qwz405
  2楼 | 信息 | 搜索 | 邮箱 | 主页 | UC


加好友 发短信
等级:二尾狐 帖子:522 积分:5027 威望:0 精华:0 注册:2015/4/15 15:25:00
  发帖心情 Post By:2017/7/12 10:26:00 [显示全部帖子]

老师,用系统的统计表,生成图表,能否做个例子?
Echarts和您给的例子,研究了很久,不知道怎么搞……

Dim g As New GroupTableBuilder("统计表1", DataTables("员工名册"))
g.Groups.AddDef("籍贯")
g.Totals.AddDef("工号", AggregateEnum.Count, "数量")
g.FromServer = True
g.Build()
'MainTable = Tables("统计表1")


图片点击可在新窗口打开查看此主题相关图片如下:123.jpg
图片点击可在新窗口打开查看

[此贴子已经被作者于2017/7/12 10:27:30编辑过]

 回到顶部
帅哥哟,离线,有人找我吗?
qwz405
  3楼 | 信息 | 搜索 | 邮箱 | 主页 | UC


加好友 发短信
等级:二尾狐 帖子:522 积分:5027 威望:0 精华:0 注册:2015/4/15 15:25:00
  发帖心情 Post By:2017/7/19 17:44:00 [显示全部帖子]

代码我改成这样,已经可以使用了.

            Dim jo As New JObject
            Dim ja As New Jarray     '定义数组
   
            For Each dr As DataRow In DataTables("表A").DataRows
                Dim a1 As String =  dr("籍贯")
                Dim a2 As Integer =  dr("数量")
                
                Dim j2 As new JObject
                j2("name") = a1
                j2("value") = a2
                ja.Add(j2)
            Next
            
            jo("foxtable") = ja     '将Roles设置为前面定义的数组
            json = jo.ToString


但我不能理解以下4行代码,请老师指点:
        wb.AppendHTML("<script src='http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js'></script>",True)
        wb.AppendHTML("<script src='http://echarts.baidu.com/gallery/vendors/echarts-stat/ecStat.min.js'></script>",True)
        wb.AppendHTML("<script src='http://echarts.baidu.com/gallery/vendors/echarts/echarts-all-3.js'></script>",True)
        wb.AppendHTML("<script src='http://echarts.baidu.com/gallery/vendors/echarts/map/js/china.js'></script>",True)


我现在只能理解为从下面的链接,取得需要的图:
那我如果需要别的图例,就不知道AppendHTML哪个js了.

 回到顶部
帅哥哟,离线,有人找我吗?
qwz405
  4楼 | 信息 | 搜索 | 邮箱 | 主页 | UC


加好友 发短信
等级:二尾狐 帖子:522 积分:5027 威望:0 精华:0 注册:2015/4/15 15:25:00
  发帖心情 Post By:2017/7/21 11:38:00 [显示全部帖子]

老师,您好.
如何将下图table中数据,合成1楼所示json数据

1楼例子:{categories:["1","2","3","4","5","6"],data:[12, 8, 7, 18, 22, 21]}

合成代码不会写:
            Dim jo As New JObject
            Dim ja1 As New JArray     '定义数组
            Dim ja2 As New JArray     '定义数组
            
            For Each dr As DataRow In DataTables("表A").DataRows
                Dim a1 As String =  dr("月份")
                Dim a2 As Integer =  dr("数量")
                
                Dim j1 As new JObject
                j1("categories") = a1
                
                Dim j2 As new JObject
                j2("data") = a2
                
                ja1.Add(j1)
                ja2.Add(j2)
            Next
            
            jo("categories") = ja1
            jo("data") = ja2
            json = jo("categories").ToString & jo("data").ToString



图片点击可在新窗口打开查看此主题相关图片如下:123.jpg
图片点击可在新窗口打开查看

[此贴子已经被作者于2017/7/21 11:38:11编辑过]

 回到顶部
帅哥哟,离线,有人找我吗?
qwz405
  5楼 | 信息 | 搜索 | 邮箱 | 主页 | UC


加好友 发短信
等级:二尾狐 帖子:522 积分:5027 威望:0 精华:0 注册:2015/4/15 15:25:00
  发帖心情 Post By:2017/8/23 12:34:00 [显示全部帖子]

老师,您好。
我依样画葫芦,想使用Ecart实例实现下图效果,尝试失败(不能显示图例),请老师帮忙。
Ecart实例位置:http://echarts.baidu.com/demo.html#bar-y-category

我估计是wb.AppendHTML(****)的问题,即12楼,我提的问题,我不知道使用哪些,为什么使用?



图片点击可在新窗口打开查看此主题相关图片如下:111.jpg
图片点击可在新窗口打开查看


1.登录网页代码:
Dim e As RequestEventArgs = args(0)

Dim wb As New weui

wb.AddPageTitle("","litz","员工职务","***公司")      '标题

wb.AppendHTML("<script src='http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js'></script>",True)
wb.AppendHTML("<script src='http://echarts.baidu.com/gallery/vendors/echarts-stat/ecStat.min.js'></script>",True)
wb.AppendHTML("<script src='http://echarts.baidu.com/gallery/vendors/echarts/echarts-all-3.js'></script>",True)
wb.AppendHTML("<script src='http://echarts.baidu.com/gallery/vendors/echarts/map/js/china.js'></script>",True)

With wb.AddArticle("","ar1")
    .AddContent("<div id=""main1"" style=""width: 600px;height:400px;""></div>")         '插入一个div,用于显示服务器返回的数据
End With

wb.AppendHTML("<script src='./lib/post.js'></script>")      '引用脚本

e.WriteString(wb.Build)


2.数据页(kk.htm)代码:
Dim e As RequestEventArgs = args(0)

'Dim wb As New WeUI

Dim json As String
If e.GetValues("type") = "1" Then
    
    Dim jo As New JObject
    Dim ja1 As New JArray     '定义数组
    Dim ja2 As New JArray     '定义数组
    
    '------获取籍贯数据
    Dim g As New GroupTableBuilder("统计表1", DataTables("员工名册"))
    g.Groups.AddDef("职务")
    g.Groups.AddDef("职务代码")
    g.Totals.AddDef("工号", AggregateEnum.Count, "数量")
    g.FromServer = True
    g.Filter = "离职 = 0 and 外包 = 0"
    g.Build()
    'MainTable = Tables("统计表1")
    
    Tables("统计表1").Sort = "职务代码 Desc"      '用职务代码排序,使得职务从高-->低排序
    
    For Each dr As DataRow In DataTables("统计表1").DataRows
        ja1.Add(dr("职务"))
        ja2.Add(dr("数量"))
    Next
    
    jo("categories") = ja1
    jo("data") = ja2
    json = jo.ToString
End If

e.WriteString(json)


3.js脚本(post)代码:
var myChart1 = echarts.init(document.getElementById('main1'));

$.get('kk.htm?type=1').done(function (jsonstr) {
var mydata = eval('(' + jsonstr + ')');
    myChart1.setOption({
        title: {
        text: '世界人口总量',
        subtext: '数据来自网络'
    },
    xAxis: {
        boundaryGap: [0, 0.01]
    },
    yAxis: {
        data: mydata.categories
    },
    series: [
        {
            type: 'bar',
            data: mydata.data
        },
    ]
});
[此贴子已经被作者于2017/8/23 12:37:29编辑过]

 回到顶部
帅哥哟,离线,有人找我吗?
qwz405
  6楼 | 信息 | 搜索 | 邮箱 | 主页 | UC


加好友 发短信
等级:二尾狐 帖子:522 积分:5027 威望:0 精华:0 注册:2015/4/15 15:25:00
  发帖心情 Post By:2017/8/23 14:57:00 [显示全部帖子]

检查了半天,在js代码中加了“ });  “,可以显示了,我再试试。。。
不理解代码,现在是瞎搞搞。。。


var myChart1 = echarts.init(document.getElementById('main1'));

$.get('kk.htm?type=1').done(function (jsonstr) {
var mydata = eval('(' + jsonstr + ')');
    myChart1.setOption({
        title: {
            text: '世界人口总量',
            subtext: '数据来自网络'
        },
        xAxis: {
                  boundaryGap: [0, 0.01]
        },
        yAxis: {
                 data: mydata.categories
        },
        series: [
            {
                 type: 'bar',
                 data: mydata.data
            },
        ]
    });
});
[此贴子已经被作者于2017/8/23 14:57:54编辑过]

 回到顶部
帅哥哟,离线,有人找我吗?
qwz405
  7楼 | 信息 | 搜索 | 邮箱 | 主页 | UC


加好友 发短信
等级:二尾狐 帖子:522 积分:5027 威望:0 精华:0 注册:2015/4/15 15:25:00
  发帖心情 Post By:2017/8/24 8:38:00 [显示全部帖子]

老师,您好。
把数据放到.txt文件,数据不能随数据库变化,我喜欢从数据库获得数据来处理。

又有个问题要咨询:获得临时表,已经排序了,但数据不能而排序展现。
是不是For Each是从未排序的DataTables取值?是否有办法,可以按排序展现?

    '------获取职务数据
    Dim g As New GroupTableBuilder("统计表1", DataTables("员工名册"))
    g.Groups.AddDef("职务")
    g.Groups.AddDef("职务代码")
    g.Totals.AddDef("工号", AggregateEnum.Count, "数量")
    g.FromServer = True
    g.Filter = "离职 = 0 and 外包 = 0"
    g.Build()
    'MainTable = Tables("统计表1")
    
    Tables("统计表1").Sort = "职务代码 Desc"      '用职务代码排序,使得职务从高-->低排序....可惜不起作用,不知道为什么
    
    For Each dr As DataRow In DataTables("统计表1").DataRows
        ja1.Add(dr("职务"))
        ja2.Add(dr("数量"))
    Next
    
    jo("categories") = ja1
    jo("data") = ja2
    json = jo.ToString



图片点击可在新窗口打开查看此主题相关图片如下:333.jpg
图片点击可在新窗口打开查看

图片点击可在新窗口打开查看此主题相关图片如下:111.jpg
图片点击可在新窗口打开查看


[此贴子已经被作者于2017/8/24 8:40:08编辑过]

 回到顶部
帅哥哟,离线,有人找我吗?
qwz405
  8楼 | 信息 | 搜索 | 邮箱 | 主页 | UC


加好友 发短信
等级:二尾狐 帖子:522 积分:5027 威望:0 精华:0 注册:2015/4/15 15:25:00
  发帖心情 Post By:2018/8/14 16:02:00 [显示全部帖子]

百度已暂停地图的下载,echarts有用百度地图的朋友,就会无法显示。

有需要的朋友可以用下面的,或者上网搜索<china.js>下载。
然后引用就可以了:wb.AppendHTML("<script src='./lib/china.js'></script>")

 
 下载信息  [文件大小:   下载次数: ]
图片点击可在新窗口打开查看点击浏览该文件:china.js.zip



图片点击可在新窗口打开查看此主题相关图片如下:11.jpg
图片点击可在新窗口打开查看

-----------
......抱歉~无法显示是JS代码不能用了。。。。换个版本就可以了。

这个不行了:wb.AppendHTML("<script src='http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js'></script>",True)

要换个版本:wb.AppendHTML("<script src='./lib/jquery.min-3.3.1.js'></script>")          '引用jquery
[此贴子已经被作者于2018/8/14 16:15:56编辑过]

 回到顶部