笨办法，先保存用着

unit Unit1;

interface

uses

  Winapi.Windows, Winapi.Messages, System.SysUtils, System.Variants, System.Classes,

  Vcl.Graphics, Vcl.Controls, Vcl.Forms, Vcl.Dialogs, Data.DB, DBAccess, Vcl.Menus,

  System.Actions, Vcl.ActnList, Vcl.StdCtrls, Vcl.OleCtrls, SHDocVw, Vcl.AppEvnts,

  Uni;

type

  TForm1 = class(TForm)

    WebBrowser1: TWebBrowser;

    btnShowEcharts: TButton;

    ApplicationEvents1: TApplicationEvents;

    procedure btnShowEchartsClick(Sender: TObject);

    procedure WebBrowser1DocumentComplete(ASender: TObject; const pDisp: IDispatch; const URL: OleVariant);

    procedure ApplicationEvents1Message(var Msg: tagMSG; var Handled: Boolean);

  private

    { Private declarations }

  public

    { Public declarations }

  end;

var

  Form1: TForm1;

implementation

uses

  DataModule;

{$R *.dfm}

var

  PathStr: string;

//屏蔽右键

procedure TForm1.ApplicationEvents1Message(var Msg: tagMSG; var Handled: Boolean);

begin

  with Msg do

  begin

    if not IsChild(WebBrowser1.Handle, hwnd) then

      Exit;

    Handled := (message = WM_RBUTTONDOWN) or (message = WM_RBUTTONUP) or (message = WM_CONTEXTMENU);

  end;

end;

//生成并显示图表

procedure TForm1.btnShowEchartsClick(Sender: TObject);

var

  str, strSql: TStringList;

  strSPMC, strSL: string;

  qryDT: TUniQuery;

  i: Integer;

begin

  str := TStringList.Create;

  strSql := TStringList.Create;

  qryDT := TUniQuery.Create(Self);

  try

    if DataModule2.UniConnection1.Connected then

      qryDT.Connection := DataModule2.UniConnection1;

    strSql.Add('SELECT s.SPMC,SUM(SL)SL FROM QDDBDMX AS q ');

    strSql.Add('LEFT JOIN SHANGPIN AS s ON s.SPDM=q.SPDM ');

    strSql.Add('WHERE s.BYZD8=''2019''');

    strSql.Add('GROUP BY s.SPMC');

    with qryDT do

    begin

      Close;

      SQL.text := strSql.Text;

      Open;

    end;

    qryDT.First;

    for i :=  to qryDT.RecordCount -  do

    begin

      strSPMC := strSPMC + '"' + qryDT.FieldByName('SPMC').Value + '"';

      strSL := strSL + IntToStr(qryDT.FieldByName('SL').Value);

      if i = qryDT.RecordCount -  then

      begin

        strSPMC := strSPMC;

        strSL := strSL;

      end

      else

      begin

        strSPMC := strSPMC + ',';

        strSL := strSL + ',';

      end;

      qryDT.Next;

    end;

    str.add('<!DOCTYPE html> ');

    str.add('<html> ');

    str.add('<head> ');

    str.add('    <meta http-equiv="content-type" content="text/html;charset=gb2312"> ');

    str.add('    <title>ECharts</title> ');

    str.add('    <!-- 引入 echarts.js --> ');

    str.add('    <script src="https://cdn.bootcss.com/echarts/4.1.0-release/echarts.min.js"></script> ');

    str.add('</head> ');

    str.add('<body> ');

    str.add('    <!-- 为ECharts准备一个具备大小（宽高）的Dom --> ');

    str.add('    <div id="main" style="width: 1000px;height:400px;"></div> ');

    str.add('    <script type="text/javascript"> ');

    str.add('        // 基于准备好的dom，初始化echarts实例 ');

    str.add('        var myChart = echarts.init(document.getElementById(''main'')); ');

    str.add(' ');

    str.add('        // 指定图表的配置项和数据 ');

    str.add('        var option = { ');

    str.add('            title: { ');

    str.add('                text: ''类别销售对比''');

    str.add('            }, ');

    str.add('            tooltip: {}, ');

    str.add('            legend: { ');

    str.add('                data:[''销量'']');

    str.add('            }, ');

    str.add('            xAxis: { ');

    str.add('                data: [' + strSPMC + '] ');

    str.add('            }, ');

    str.add('            yAxis: {}, ');

    str.add('            series: [{ ');

    str.add('                name: ''品类'', ');

    str.add('                type: ''bar'', ');

    str.add('                data: [' + strSL + '] ');

    str.add('            }] ');

    str.add('        }; ');

    str.add(' ');

    str.add('        // 使用刚指定的配置项和数据显示图表。 ');

    str.add('        myChart.setOption(option); ');

    str.add('    </script> ');

    str.add('</body> ');

    str.add('</html>');

  //生成并保存网页

    PathStr := ExtractFilePath(Application.ExeName) + 'index.html';

    str.SaveToFile(PathStr);

  //加载本地网页

    WebBrowser1.Navigate(ExtractFileDir(ParamStr()) + '\index.html');

  finally

    str.Free;

    strSql.Free;

    qryDT.Free;

  end;

end;

//网页加载完毕

procedure TForm1.WebBrowser1DocumentComplete(ASender: TObject; const pDisp: IDispatch; const URL: OleVariant);

begin

  //隐藏滚动条

  WebBrowser1.oleobject.Document.body.Scroll := 'no';

  WebBrowser1.oleobject.Document.documentElement.style.overflow := 'hidden';

  //删除文件

  DeleteFile(PathStr);

end;

end.

效果

Delphi窗体显示Echarts图表的更多相关文章

  1. ECharts图表tooltip显示时超出canvas图层解决方法

    我们在做ECharts图表的时候可能会遇到tooltip显示时超出了canvas图层范围,并且被其它z-index较高的div容器遮盖,这是悬浮展示信息就看不全,我们根据官网文档的配置项查询发现con ...

  2. ECharts图表插件(4.x版本)使用（一、关系图force节点显示为自定义图像/图片，带分类选择）

    导读 ECharts,一个使用 JavaScript 实现的开源可视化库,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器(IE8/9/10/11,Chrome,Firefox,Safar ...

  3. echarts之bootstrap选项卡不能显示其他标签echarts图表

    在echarts跟bootstrap选项卡整合的时候,默认第一个选中选项卡可以正常加载echarts图表,但是切换其他选项的时候不能渲染出其他选项卡echarts图表. 解决方法: 在js中添加代码: ...

  4. C#WinForm应用程序中嵌入ECharts图表

    C#WinForm应用程序中嵌入ECharts图表 程序运行效果: 下载ECharts: 官网下载ECharts :http://echarts.baidu.com/download.html 或者直 ...

  5. echarts图表第一个案例

    1.action中获取到数据 @Override public String execute() throws Exception { List<Student> find = echar ...

  6. echarts图表标签（axisLabel）折行

    在项目中遇到了一个echarts图表标签过长需折行的需求,so引出这篇总结,啦啦啦有帮助就多多支持啦,撒花撒花撒花~~~~ 在此不对echarts其他用法做解释,详细见echarts文档(点击前往) ...

  7. ECharts图表中级入门之formatter：夜谈关于ECharts图表内的数据格式化方法

    来源于:http://www.ithao123.cn/content-3751220.html 格式化之所以存在,主要是因为我们想把一些不够人性化的内容通过某种处理让其变得人性化,便于用户更好地理解内 ...

  8. Echarts图表控件使用总结2(Line，Bar)—问题篇

    Echarts图表控件使用总结1(Line,Bar):http://www.cnblogs.com/hanyinglong/p/Echarts.html 1.前言 a.前两天简单写了一篇在MVC中如何 ...

  9. Delphi窗体创建释放过程及单元文件小结（转）

    Delphi窗体创建释放过程及单元文件小结 Delphi中的窗体,有模式窗体与非模式窗体两种.两种窗体的调用方式不同,模式窗体使用ShowModal显示,非模式窗体使用Show显示.当显示模式窗体的时 ...

随机推荐

  1. 计算机基础 & python基础

    五大组成部分 控制器 运算器(数学运算+逻辑运算) 存储器(存取数据) 输入设备(键盘.鼠标等) 输出设备(显示器.打印机等) CPU CPU=运算器+控制器 CPU的分类: 精简指令集(RISC): ...

  2. matplotlib学习笔记

    1.简介 matplotlib是python的一个2D绘图库,它可以在不同平台上地使用多种通用的绘图格式(hardcopy formats)和交互环境绘制出出版物质量级别的图片.matplotlib可 ...

  3. linux下Flask框架搭建简单网页

    开始安装FLASK需要创建一个虚拟环境,虚拟环境可以不干扰正在使用的系统环境,避免影响,并且也不需要完全的root权限,更加安全可靠. 搭建环境 Python3.4 进入到microblog目录下创建 ...

  4. CSS之分组选择器和嵌套选择器

    分组选择器, 将一个样式应用于多个类,或者标签啥的 每个选择器用逗号隔开 <!DOCTYPE html> <html> <head> <meta charse ...

  5. Apache为mysql以及自己的项目设置虚拟路径

    参考 http://www.120xcjl.com  Apache为mysql以及自己的项目设置虚拟路径 1.Apache2.2\conf\httpd.conf中释放: Include conf/ex ...

  6. 省市区地址三级联动jQuery插件Distpicker使用

    插件下载地址 http://www.jq22.com/jquery-info8054 效果如下: 使用: 1.引入js <script src="http://www.jq22.com ...

  7. Node.js c++ 扩展之HelloWorld

    测试环境 vs:vs2017 node.js:9.9.6 相关地址 官方文档对应地址:https://www.nodejs.org/api/addons.html 官方案例对应地址:https://w ...

  8. Do-Now—团队冲刺博客四

    各个成员今日完成的任务 侯泽洋:完成奖励页面设计,完成奖励从云端拉取到本地:完成奖励从云端拉取到本地 周亚杰:冲刺博客,个人中心设计(未完成) 王志伟:积分页面设计:积分页面设计 仇夏:树苗成长过程设 ...

  9. Java 中的字符串转为二进制

    /** * 将字符串转为二进制 */ public class StrConversion { public static void main(String args[]) { String str ...

  10. 使用ffmpeg进行视频截图

    1.从ffmpeg的Windows Build网站(https://ffmpeg.zeranoe.com/builds/)下载ffmpeg. 2.下载后解压压缩包,得到如下左图的文件.然后打开bin文 ...