Delphi窗体显示Echarts图表

原作者: [db:作者] 来自: [db:来源] 收藏邀请

笨办法，先保存用着

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 := 0 to qryDT.RecordCount - 1 do
    begin
      strSPMC := strSPMC + '"' + qryDT.FieldByName('SPMC').Value + '"';
      strSL := strSL + IntToStr(qryDT.FieldByName('SL').Value);
      if i = qryDT.RecordCount - 1 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 >);
    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(0)) + '\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.