笨办法，先保存用着

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. mysql的小常识

    为了爬虫的需要,稍微预习一下mysql: 选择当前的数据库后,查看数据库信息用: USE; 删除:DROP DATABASE spiders #删除name为spiders的的数据库 选择:SELEC ...

  2. 末学者笔记--Linux计划任务及压缩归档

    一.计划任务 1.介绍: (1)定义:简单说就是通过一些设置,来使linux系统定时执行一些操作与任务. (2)作用:一般可执行一些周期性操作,也可定期备份数据. (3)可使用的命令:常用为at和cr ...

  3. TortoiseGit安装使用简单教程

    一.简介 TortoiseGit是Tortoise基于git的可视化管理工具.本文即将介绍这个工具的安装和简单使用教程(本文均是基于Windows 64位操作系统). git的管理工具有很多.Tort ...

  4. thinkphp5图片上传接口

    public function avatarUpload() { $file = request()->file('file'); $filePath = 'avatar'; $width = ...

  5. 利用反射获取数据列+emit生成属性+单例模式

    1:IDictionary<string,string > 可以存储数据,将拼接的sql可以存储到这里下次可以使用 定义自定义属性表和列 typeof(T).GetCustomAttrib ...

  6. Windows 7 设置，启动，停止本地虚拟WLAN

    以管理员身份运行以下命令 设置承载网络属性 netsh wlan set hostednetwork mode=allow ssid=Burp key= 启动承载网络 netsh wlan start ...

  7. Linux 上使用LVM 扩展磁盘Size

    第一步:使用 fdisk -l 查看当前磁盘容量 fdisk -l 第二步: 使用 fdisk /dev/sda/ 为free space 添加新的分区 fdisk /dev/sda m :列出所有命 ...

  8. MFC开发（一）简单同步时间应用程序

    看了一个垃圾程序的架构,mmp真坑,自己费了一点功夫才搞定,就直接记录下吧,这个是windows简单的应用程序,但是里面有点复杂,我们需要首先建立一个基于mfc的appwinzard程序,(凭记忆写的 ...

  9. window.open 打开全屏窗口

    window.open新打开页面为全屏状态,各个浏览器情况不一致. window.open   弹出新窗口的命令:     'page.html'   弹出窗口的文件名:     'newwindow ...

  10. bat入门--第一个bat文件

    所谓的批处理就是从记事本开始进行的. 1.新建一个记事本文件, 2, 打开的记事本上敲入一行字:@echo off 意思:隐藏以下输入的代码(off改成on是打开代码显示). 3.再输入:echo h ...