| 网站首页 | 业界新闻 | 小组 | 威客 | 人才 | 下载频道 | 博客 | 代码贴 | 在线编程 | 编程论坛
欢迎加入我们,一同切磋技术
用户名:   
 
密 码:  
共有 4060 人关注过本帖
标题:请问VFP可以用 echart这样的东西吗?
只看楼主 加入收藏
laowan001
Rank: 20Rank: 20Rank: 20Rank: 20Rank: 20
等 级:版主
威 望:66
帖 子:1088
专家分:2682
注 册:2015-12-30
收藏
得分:0 
<div id="main" style="width: 200px;height:200px;"></div>
这里的宽度和高度按Browser的大小设置试试
2021-10-28 15:03
laibinhua
Rank: 2
等 级:论坛游民
威 望:1
帖 子:293
专家分:38
注 册:2010-12-23
收藏
得分:0 
回复 21楼 laowan001
设置后也一样,图被压缩变形了
2021-10-28 15:26
laowan001
Rank: 20Rank: 20Rank: 20Rank: 20Rank: 20
等 级:版主
威 望:66
帖 子:1088
专家分:2682
注 册:2015-12-30
收藏
得分:0 
   <body style="height: 100%; margin: 0">
   <div id="container" style="height: 412px"></div>
我这里是这样的
height: 412px 其中的412可以修改成需要的大小,如200
图片附件: 游客没有浏览图片的权限,请 登录注册


[此贴子已经被作者于2021-10-28 15:50编辑过]

2021-10-28 15:44
laowan001
Rank: 20Rank: 20Rank: 20Rank: 20Rank: 20
等 级:版主
威 望:66
帖 子:1088
专家分:2682
注 册:2015-12-30
收藏
得分:0 
如果Browser的宽度大于高度的话,会出现右侧滚动条
2021-10-28 15:47
吹水佬
Rank: 20Rank: 20Rank: 20Rank: 20Rank: 20
等 级:版主
威 望:451
帖 子:10607
专家分:43182
注 册:2014-5-20
收藏(1)
得分:0 
回复 20楼 laibinhua
对echart了解不多,做了一些自适应缩放的测试,大概过程如下:
1、以 <div id="main">作为echart的画布,定义:
    <div class="echarts_canvas" id="main"></div>
2、设置画布式样自适应IE控件页面大小:
    <style type="text/css">            
        .echarts_canvas {width:100%; height:100vh;}
    </style>
3、在echart的选项(option)参数中设置(grid)图表边到画布边的距离(内边距)
    grid : {top:40, left:30, right:30, width:"auto", height:"auto"}
4、定义一个调整IE控件页面窗口大小时触发的事件函数执行画布的resize方法
    window.onresize = function () {
        myChart.resize();
    }
5、禁止显示IE控件页面滚动条,IE控件的DocumentComplete事件:
    LPARAMETERS pdisp, url
    this.Document.body.Scroll = "no"
6、为简化测试操作,IE控件页面窗口大小自适应表单窗口大小,设置IE控件的属性Anchor=15
   这样变动表单大小就可以看到图表的变化
图片附件: 游客没有浏览图片的权限,请 登录注册

图片附件: 游客没有浏览图片的权限,请 登录注册

echarts_test.rar (731.1 KB)
2021-10-28 19:23
laibinhua
Rank: 2
等 级:论坛游民
威 望:1
帖 子:293
专家分:38
注 册:2010-12-23
收藏
得分:0 
回复 25楼 吹水佬
谢谢大佬的帮助
2021-10-28 21:52
shonken
Rank: 2
等 级:论坛游民
帖 子:116
专家分:26
注 册:2017-1-15
收藏
得分:0 
以下是引用吹水佬在2021-10-28 19:23:47的发言:

对echart了解不多,做了一些自适应缩放的测试,大概过程如下:
1、以 <div id="main">作为echart的画布,定义:
    <div class="echarts_canvas" id="main"></div>
2、设置画布式样自适应IE控件页面大小:
    <style type="text/css">            
        .echarts_canvas {width:100%; height:100vh;}
    </style>
3、在echart的选项(option)参数中设置(grid)图表边到画布边的距离(内边距)
    grid : {top:40, left:30, right:30, width:"auto", height:"auto"}
4、定义一个调整IE控件页面窗口大小时触发的事件函数执行画布的resize方法
    window.onresize = function () {
        myChart.resize();
    }
5、禁止显示IE控件页面滚动条,IE控件的DocumentComplete事件:
    LPARAMETERS pdisp, url
    this.Document.body.Scroll = "no"
6、为简化测试操作,IE控件页面窗口大小自适应表单窗口大小,设置IE控件的属性Anchor=15
   这样变动表单大小就可以看到图表的变化

深受吹版的启发,也自行调试了下,但发现图表不能响应鼠标点击和悬停提示,请问吹版,这个有没有办法解决?
2021-11-08 10:57
laowan001
Rank: 20Rank: 20Rank: 20Rank: 20Rank: 20
等 级:版主
威 望:66
帖 子:1088
专家分:2682
注 册:2015-12-30
收藏
得分:0 
在VFP里Echarts5的图表显示后对鼠标悬停和点击的反应无效了,不知何故。所以现在还在用Echart3
2021-11-08 11:12
jiazhefish
Rank: 2
等 级:论坛游民
帖 子:64
专家分:28
注 册:2011-9-6
收藏
得分:0 
吹版主简直就是神一般的存在啊
2021-11-08 11:25
吹水佬
Rank: 20Rank: 20Rank: 20Rank: 20Rank: 20
等 级:版主
威 望:451
帖 子:10607
专家分:43182
注 册:2014-5-20
收藏
得分:0 
以下是引用shonken在2021-11-8 10:57:14的发言:


深受吹版的启发,也自行调试了下,但发现图表不能响应鼠标点击和悬停提示,请问吹版,这个有没有办法解决?

其实就是HTML、JavaScript和CSS方面的编程,写个HTML文件用IE控件加载展现。
要鼠标点击事件,可以在需要的地方写个onclick事件函数就可以。
如:画布点击事件
在 <div class="echarts_canvas" id="main"></div> 添加一项 onclick=canvas_click()
<div class="echarts_canvas" id="main" onclick=canvas_click()></div>
在 <script> 添加一个canvas_click()函数
        function canvas_click() {
            alert(123456);
        }
程序代码:
<body>
    <div class="echarts_canvas" id="main" onclick=canvas_click()></div>
    <script type="text/javascript">
        var myChart = echarts.init(document.getElementById('main'));
        var option = {
                title   : {text:"ECharts 入门示例"},
                tooltip : {},
                legend  : {data:["<<ALLTRIM(tt.名称)>>"]},
                xAxis   : {data:["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]},
                yAxis   : {},
                series  : [{name:"<<ALLTRIM(tt.名称)>>",type:"bar",data:[<<tt.衬衫>>,<<tt.羊毛衫>>,<<tt.雪纺衫>>,<<tt.裤子>>,<<tt.高跟鞋>>,<<tt.袜子>>]}],
                //设置中间内容距离div的距离,也就是内边距
                grid    : {top:40, left:30, right:30, width:"auto", height:"auto"},
            };
        myChart.setOption(option);
        
        window.onresize = function () {
            myChart.resize();  //自动调整canvas的大小
        }
        function canvas_click() {
            alert(123456);
        }
    </script>
</body>

图片附件: 游客没有浏览图片的权限,请 登录注册
2021-11-08 11:52
快速回复:请问VFP可以用 echart这样的东西吗?
数据加载中...
 
   



关于我们 | 广告合作 | 编程中国 | 清除Cookies | TOP | 手机版

编程中国 版权所有,并保留所有权利。
Powered by Discuz, Processed in 0.033688 second(s), 9 queries.
Copyright©2004-2024, BCCN.NET, All Rights Reserved