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

#2

吹水佬2021-10-27 15:03

什么东西?

#3

laowan0012021-10-27 15:17

回复楼主 laibinhua

是百度的ECharts吗？

#4

laibinhua2021-10-27 19:51

回复 3楼 laowan001

是的，老师，因为要用到仪表盘图表，所以用echart,能实现吗

#5

吹水佬2021-10-27 21:20

简单了解了一下，是用JavaScript库echarts.js在HTML实现图表
用echarts的入门示例试了一下，VFP应该可以使用echarts
测试采用下载 echarts.min.js 文件放到本地当前目录，开发参考用echarts.js
入门示例：https://echarts.

程序代码：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>ECharts</title>
    
    <script src="echarts.min.js"></script>
  </head>
  <body>
    
    <div id="main" style="width: 600px;height:400px;"></div>
    <script type="text/javascript">
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById('main'));

      // 指定图表的配置项和数据
      var option = {
        title: {
          text: 'ECharts 入门示例'
        },
        tooltip: {},
        legend: {
          data: ['销量']
        },
        xAxis: {
          data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
        },
        yAxis: {},
        series: [
          {
            name: '销量',
            type: 'bar',
            data: [5, 20, 36, 10, 10, 20]
          }
        ]
      };

      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
    </script>
  </body>
</html>

实际应用时data部分数据也可取自VFP的表，生成HTML，用WebBrowser载入HTML

只有本站会员才能查看附件，请登录

#6

sam_jiang2021-10-27 22:02

回复 5楼吹水佬

厉害！

#7

laibinhua2021-10-27 22:25

回复 5楼吹水佬

能把文件发上来下载使用吗？真好

#8

吹水佬2021-10-27 22:59

回复 7楼 laibinhua

上面那个官方网址找就有

#9

laibinhua2021-10-27 23:08

回复 8楼吹水佬

谢谢您的帮助！我下载看看，如果能把你的项目文档一并打包下载多好！

#10

laowan0012021-10-28 08:13

回复 4楼 laibinhua

可以。我一直在用柱形图，仪表盘没做，但是道理是一样的，回头我整理一下发上来，给你提供一个思路

#11

laowan0012021-10-28 09:58

回复楼主 laibinhua

我发了一个分享，看看对你是否有启发
https://bbs.bccn.net/thread-507318-1-1.html

#12

laibinhua2021-10-28 10:28

回复 10楼 laowan001

谢谢热心人，等待中。。。。。

#13

吹水佬2021-10-28 10:57

以下是引用laibinhua在2021-10-27 23:08:09的发言：

谢谢您的帮助！我下载看看，如果能把你的项目文档一并打包下载多好！

就按入门示例简单写几句：

只有本站会员才能查看附件，请登录

有一点要注意，用WebBrowser可能要Win10以上版本才支持，并修改用高版本IE内核。
编辑注册表键：
HKEY_LOCAL_MACHINE\SOFTWARE\WOW6432Node\Microsoft\Internet Explorer\Main\FeatureControl\FEATURE_BROWSER_EMULATION
如：在VFP9开发环境，增加vfp9.exe项的值为11111，可参考：
11111(0x2b67)    Edge
11001(0x2af9)    IE11
11000(0x2af8)    IE11
10001(0x2711)    IE10 Standards
10000(0x2710)    IE10
9999 (0x270F)    IE9  Standards
9000 (0x2328)    IE9
8888 (0x22B8)    IE8  Standards
8000 (0x1F40)    IE8
7000 (0x1B58)    IE7

只有本站会员才能查看附件，请登录

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

#14

laowan0012021-10-28 11:08

回复 13楼吹水佬

高手就是高手

#15

laibinhua2021-10-28 11:18

谢谢大佬帮助

#16

laibinhua2021-10-28 11:28

回复 13楼吹水佬

按你的做了，柱状图不显示！

只有本站会员才能查看附件，请登录

#17

laibinhua2021-10-28 12:12

回复 16楼 laibinhua

过了会又有好了，谢谢大佬

#18

吹水佬2021-10-28 12:30

回复 17楼 laibinhua

修改注册表后要重新启动VFP

#19

laibinhua2021-10-28 13:41

回复 18楼吹水佬

是的，要重启下VFP就可以了！

#20

laibinhua2021-10-28 14:48

回复 8楼吹水佬

大佬，又有个问题，比例缩小的问题如何解决

只有本站会员才能查看附件，请登录

代码如下：
TEXT TO cHtml TEXTMERGE NOSHOW PRETEXT 15
<!DOCTYPE html>
<html>
<head>
    <meta charset="gb2312">
    <script src="echarts.min.js"></script>
    <body style="background-color:rgba(100,200,220,0.1)">
</head>
<body>
    <div id="main" style="width: 200px;height:200px;"></div>
    <script type="text/javascript">
        var myChart = echarts.init(document.getElementById('main'));
        var option = {
                title   : {text:""},
                tooltip : {},
  series: [
    {
      name: 'Pressure',
      type: 'gauge',
      progress: {
        show: true
      },
      detail: {
        valueAnimation: true,
        formatter: '{value}'
      },
      data: [
        {
          value: 50,
          name: 'SCORE'
        }
      ]
    }
  ]
            };
        myChart.setOption(option);
    </script>
</body>
</html>
ENDTEXT
STRTOFILE(cHtml,"test.html")
thisform.wb.navigate(mypath+"test.html")

然后我把 <div id="main" style="width: 200px;height:200px;"></div>  改成 <div id="main" style="width: 100%;height:100%;"></div> 也一样显示不正常，还有会出现滚动条，这里使用时滚动条不要出现要怎么设置下

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

#21

laowan0012021-10-28 15:03

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

#22

laibinhua2021-10-28 15:26

回复 21楼 laowan001

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

#23

laowan0012021-10-28 15:44

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

只有本站会员才能查看附件，请登录

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

#24

laowan0012021-10-28 15:47

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

#25

吹水佬2021-10-28 19:23

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

只有本站会员才能查看附件，请登录

#26

laibinhua2021-10-28 21:52

回复 25楼吹水佬

谢谢大佬的帮助

#27

shonken2021-11-08 10:57

以下是引用吹水佬在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

laowan0012021-11-08 11:12

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

#29

jiazhefish2021-11-08 11:25

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

#30

吹水佬2021-11-08 11:52

以下是引用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>

只有本站会员才能查看附件，请登录

#31

吹水佬2021-11-08 11:57

至于引用echarts的东西就要通过定义的myChart去引用，具体要了解echarts的属性方法和事件，可参考echarts.js文件。

#32

shonken2021-11-08 12:20

以下是引用吹水佬在2021-11-8 11:52:08的发言：

其实就是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>

感谢吹版回答，这是一种方法，但不是想要的那种；
在教学示例中https://echarts. ，柱状图标题的小色块可以点击，见图：

只有本站会员才能查看附件，请登录

#33

吹水佬2021-11-08 13:10

回复 32楼 shonken

31楼有提到，这是echarts.js的东西，要搞懂echarts.js

#34

jiazhefish2021-11-08 14:33

以下是引用吹水佬在2021-10-28 10:57:58的发言：

就按入门示例简单写几句：

有一点要注意，用WebBrowser可能要Win10以上版本才支持，并修改用高版本IE内核。
编辑注册表键：
HKEY_LOCAL_MACHINE\SOFTWARE\WOW6432Node\Microsoft\Internet Explorer\Main\FeatureControl\FEATURE_BROWSER_EMULATION
如：在VFP9开发环境，增加vfp9.exe项的值为11111，可参考：
11111(0x2b67)    Edge
11001(0x2af9)    IE11
11000(0x2af8)    IE11
10001(0x2711)    IE10 Standards
10000(0x2710)    IE10
9999 (0x270F)    IE9  Standards
9000 (0x2328)    IE9
8888 (0x22B8)    IE8  Standards
8000 (0x1F40)    IE8
7000 (0x1B58)    IE7

请问win7的怎么设置啊？

#35

吹水佬2021-11-08 17:19

以下是引用jiazhefish在2021-11-8 14:33:08的发言：

请问win7的怎么设置啊？

这个只是IE控件内核选择，不是Win7、Win8....，要看系统安装了什么IE版本，通常是向下兼容。

#36

laowan0012021-11-08 20:06

回复 22楼 laibinhua

压缩后的图形截个图来看看

#37

cjc10102021-11-09 16:54

吹版神一样的存在！