笨办法，先保存用着

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. cc.Node 的坐标空间与ACTION的学习

    1.创建二维的向量坐标 //创建向量坐标方法一 let new_pos1 = new cc.Vec2(100, 100); //创建向量坐标方法二 let new_pos2 = cc.v2(200, ...

  2. [转] vue&webpack多页面配置

    前言 最近由于项目需求,选择使用vue框架,webpack打包直接使用的vue-cli,因为需要多页面而vue-cli只有单页面,所以就决定修改vue-cli的配置文件来满足开发需求. html-we ...

  3. Barber paradox

    According to Wikipedia, the well known barber paradox states like this: The barber is the "one ...

  4. CoopyIII开发文档之控制LED灯开关

    作者:那年:QQ:843681152 一. CooplyIII环境的搭建 工欲善其事必先利器,如何搭建CooplyIII的开发环境是一切coolpyIII开发的前提.CoolpyIII作者内cool超 ...

  5. java_ATM_GUI

    Test 界面: import java.awt.Menu; import java.io.BufferedReader; import java.io.File; import java.io.Fi ...

  6. 平衡树简单教程及模板（splay, 替罪羊树, 非旋treap）

    原文链接https://www.cnblogs.com/zhouzhendong/p/Balanced-Binary-Tree.html 注意是简单教程,不是入门教程. splay 1. 旋转: 假设 ...

  7. UOJ#185. 【ZJOI2016】小星星 容斥原理 动态规划

    原文链接https://www.cnblogs.com/zhouzhendong/p/UOJ185.html 题解 首先暴力DP是 $O(3^nn^3)$ 的,大家都会. 我们换个方向考虑. 假设我们 ...

  8. Redis新接触

    一.redis简介 redis即Remote Dictionary Server,是一个key—value存储系统. 二.优点 1.redis支持的存储类型较多,如String.List.Hash.s ...

  9. Chapter_9 DP : uva1347 tour (bitonic tour)

    https://cn.vjudge.net/problem/UVA-1347 这道题居然可以O(n^2)解决, 让我太吃惊了!!! 鄙人见识浅薄, 这其实是一个经典问题: bitonic tour. ...

  10. bzoj3124: [Sdoi2013]直径 树形dp two points

    题目链接 bzoj3124: [Sdoi2013]直径 题解 发现所有直径都经过的边 一定在一条直径上,并且是连续的 在一条直径上找这段区间的两个就好了 代码 #include<map> ...