请问VFP可以用 echart这样的东西吗？ - VFP论坛

第 21 楼

得分:0

<div id="main" style="width: 200px;height:200px;"></div>
这里的宽度和高度按Browser的大小设置试试

第 22 楼

得分:0

回复 21楼 laowan001

设置后也一样，图被压缩变形了

第 23 楼

得分:0

<body style="height: 100%; margin: 0">
<div id="container" style="height: 412px"></div>
我这里是这样的
height: 412px 其中的412可以修改成需要的大小，如200

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

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

第 24 楼

得分:0

如果Browser的宽度大于高度的话，会出现右侧滚动条

第 25 楼

得分: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)

第 26 楼

得分:0

回复 25楼吹水佬

谢谢大佬的帮助

第 27 楼

得分: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
   这样变动表单大小就可以看到图表的变化

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

第 28 楼

得分:0

在VFP里Echarts5的图表显示后对鼠标悬停和点击的反应无效了，不知何故。所以现在还在用Echart3

第 29 楼

得分:0

吹版主简直就是神一般的存在啊

第 30 楼

得分: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>

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