HQChart使用教程94-如何创建报价列表

  • 报价列表
  • 初始化报价列表
    • js
    • vue
  • Option的配置项说明
    • Type
    • Symbol
    • Name
    • IsAutoUpdate
    • AutoUpdateFrequency
    • Column
      • Type
      • Title
      • TextAlign
      • ID
      • MaxText
      • DataIndex
      • Decimal
      • FormatType
      • TextColor
      • EnableTooltip
    • Border
    • IsShowHeader
    • KeyDown
    • Wheel
  • 配色
  • 表格事件
  • 数据
    • 需要数据接口
  • 第3方数据对接教程
  • HQChart代码地址

报价列表

  1. 传统PC终端的报价列表。
  2. 支持固定列， 虚拟表格
  3. 键盘操作: PageUP/PageDown 翻页, Up/Down 移动当前选中股票, Left/Right 移动列, 滚轴上下翻页.
  4. 支持配置列本地排序或远程排序
  5. 横向滚动条

注意 目前支持PC页面。

初始化报价列表

js

<div id="report" style="width: 900px;height:400px;"></div>.......var chart=JSReportChart.Init(document.getElementById('report'));   //把成交明细图绑定到一个Div上

vue

<div class='hqchart' id="hqchart" ref="hqchart"></div>
............import HQChart from 'hqchart'
import 'hqchart/src/jscommon/umychart.resource/css/tools.css'
import 'hqchart/src/jscommon/umychart.resource/font/iconfont.css'
.............var chart=HQChart.Chart..JSReportChart.Init(this.$refs.hqchart);
chart.SetOption(this.Option);

Option的配置项说明

分笔明细表设置是通过Option来配置的。
下面是一个配置例子

//配置信息
this.Option=
{Type:'报价列表',   //创建图形类型Symbol:"399300.sz",  //板块代码Name:"沪深300",IsAutoUpdate:true,          //是自动更新数据AutoUpdateFrequency:10000,   //数据更新频率//显示列Column:[{Type:REPORT_COLUMN_ID.INDEX_ID },{Type:REPORT_COLUMN_ID.SYMBOL_ID},{Type:REPORT_COLUMN_ID.NAME_ID ,Sort:1 },{Type:REPORT_COLUMN_ID.INCREASE_ID,Sort:2 },{Type:REPORT_COLUMN_ID.EXCHANGE_RATE_ID,Sort:2 },{Type:REPORT_COLUMN_ID.PRICE_ID, Sort:2 },{Type:REPORT_COLUMN_ID.UPDOWN_ID },{Type:REPORT_COLUMN_ID.BUY_PRICE_ID },{Type:REPORT_COLUMN_ID.SELL_PRICE_ID },{Type:REPORT_COLUMN_ID.VOL_ID },{Type:REPORT_COLUMN_ID.OPEN_ID },{Type:REPORT_COLUMN_ID.HIGH_ID, },{Type:REPORT_COLUMN_ID.LOW_ID },{Type:REPORT_COLUMN_ID.AMOUNT_ID},{Type:REPORT_COLUMN_ID.YCLOSE_ID },{Type:REPORT_COLUMN_ID.BUY_VOL_ID },{Type:REPORT_COLUMN_ID.SELL_VOL_ID },{Type:REPORT_COLUMN_ID.AVERAGE_PRICE_ID },{Type:REPORT_COLUMN_ID.AMPLITUDE_ID },{Type:REPORT_COLUMN_ID.VOL_IN_ID },{Type:REPORT_COLUMN_ID.VOL_OUT_ID },{Type:REPORT_COLUMN_ID.CUSTOM_STRING_TEXT_ID , Title:"行业" ,TextAlign:"center", DataIndex:0,MaxText:"擎擎擎擎" ,ID:1 },               {Type:REPORT_COLUMN_ID.CUSTOM_STRING_TEXT_ID , Title:"地区" ,TextAlign:"left", DataIndex:1, MaxText:"擎擎擎" ,ID:2 },               {Type:REPORT_COLUMN_ID.CUSTOM_NUMBER_TEXT_ID , Title:"市盈率(静)" ,TextAlign:"right", DataIndex:2, Decimal:2, FormatType:1, MaxText:"888.88" ,ID:3},{Type:REPORT_COLUMN_ID.CUSTOM_NUMBER_TEXT_ID , Title:"市盈率(TTM)" ,TextAlign:"right", DataIndex:3,  Decimal:2, FormatType:1, MaxText:"888.88",ID:4 }, {Type:REPORT_COLUMN_ID.CUSTOM_NUMBER_TEXT_ID , Title:"市盈率(动)" ,TextAlign:"right", DataIndex:4,  Decimal:2, FormatType:1, MaxText:"888.88", ID:5 }, {Type:REPORT_COLUMN_ID.CUSTOM_NUMBER_TEXT_ID , Title:"市净率" ,TextAlign:"right", DataIndex:5,  Decimal:2, FormatType:1, MaxText:"888.88" , ID: 6}, {Type:REPORT_COLUMN_ID.OUTSTANDING_SHARES_ID},{Type:REPORT_COLUMN_ID.TOTAL_SHARES_ID},{Type:REPORT_COLUMN_ID.CIRC_MARKET_VALUE_ID },{Type:REPORT_COLUMN_ID.MARKET_VALUE_ID },],FixedColumn:3,  //固定列//IsShowHeader:false,//KeyDown:false,//Wheel:false,Border: //边框{Left:20,        //左边间距Right:20,       //右边间距Bottom:20,      //底部间距Top:20          //顶部间距},Tab:[{ Title:"沪深300", ID:"399300.sz"},{ Title:"创业板", ID:"GEM.ci"},{ Title:"中小板", ID:"SME.ci"},{ Title:"中证500", ID:"399905.sz"},{ Title:"中证1000", ID:"000852.sh"},],TabSelected:0,  //默认选中tab页
};

Type

图形类型， 这里填"报价列表"

Symbol

板块代码

Name

板块名称

IsAutoUpdate

是否自动更新

AutoUpdateFrequency

定时更新频率单位:ms

Column

表格列配置

Type

列属性

var REPORT_COLUMN_ID=
{SYMBOL_ID:0,     NAME_ID:1,PRICE_ID:2,         //成交价格VOL_ID:3,           //成交量INCREASE_ID:4,      //涨幅UPDOWN_ID:5,        //涨跌BUY_PRICE_ID:6,     //买价SELL_PRICE_ID:7,     //卖价AMOUNT_ID:8,        //总金额BUY_VOL_ID:9,       //买量SELL_VOL_ID:10,     //卖量YCLOSE_ID:11,       //昨收OPEN_ID:12,HIGH_ID:13,LOW_ID:14,AVERAGE_PRICE_ID:15,//均价INDEX_ID:16,         //序号 从1开始OUTSTANDING_SHARES_ID:17,   //流通股本TOTAL_SHARES_ID:18,         //总股本CIRC_MARKET_VALUE_ID:19,    //流通市值MARKET_VALUE_ID:20,         //总市值EXCHANGE_RATE_ID:21,        //换手率 成交量/流通股本AMPLITUDE_ID:22,            //振幅LIMIT_HIGH_ID:23,       //涨停价LIMIT_LOW_ID:24,        //跌停价VOL_IN_ID:25,VOL_OUT_ID:26,CUSTOM_STRING_TEXT_ID:100,   //自定义字符串文本CUSTOM_NUMBER_TEXT_ID:101    //自定义数值型
}

Title

列名 （缺省使用内置的列名）

TextAlign

对齐方式 （缺省使用内置的对齐方式)
“center” | “right” | “left”

ID

列的ID 随便给 唯一就可以

MaxText

列的最大宽度字符串

DataIndex

柱子数据对应扩展数据索引号 （自定义列才支持）

Decimal

小数位数 （自定义数值型列才支持）

FormatType

输出格式 （自定义数值型列才支持）

TextColor

自定义字段单元格文字颜色

EnableTooltip

时候允许tooltip提示， 和事件JSCHART_EVENT_ID.ON_REPORT_MOUSE_MOVE组合使用

Border

边框四周的留白间距

IsShowHeader

是否显示表头

KeyDown

是否处理键盘消息 默认true

Wheel

是否处理滚轴消息 默认true

配色

//报价列表this.Report={BorderColor:'rgb(192,192,192)',    //边框线SelectedColor:"rgb(180,240,240)",  //选中行Header:{Color:"rgb(60,60,60)",     //表头文字颜色SortColor:"rgb(255,0,0)", //排序箭头颜色Mergin:{ Left:5, Right:5, Top:4, Bottom:2 },    //表头四周间距Font:{ Size:12, Name:"微软雅黑" } //表头字体},Item:{Mergin:{ Top:2, Bottom:2,Left:5, Right:5 },   //单元格四周间距Font:{ Size:15, Name:"微软雅黑"},            //单元格字体},LimitBorder:{Color:"rgb(180,180,180)",Mergin:{ Top:1, Bottom:1,Left:0, Right:0 },},FieldColor:{Index:"rgb(60,60,60)",  //序号Symbol:"rgb(60,60,60)",Name:"rgb(60,60,60)",Vol:"rgb(90,90,90)",    //成交量Amount:"rgb(90,90,90)", //成交金额Text:"rgb(60,60,60)",   //默认文本},UpTextColor:"rgb(238,21,21)",      //上涨文字颜色DownTextColor:"rgb(25,158,0)",     //下跌文字颜色UnchagneTextColor:"rgb(90,90,90)",     //平盘文字颜色 Tab:{Font:{ Size:12, Name:"微软雅黑" },ScrollBarWidth:100,ButtonColor:"rgb(252,252,252)",BarColor:"rgb(180,180,180)",BorderColor:'rgb(180,180,180)',Mergin:{ Left:5, Right:5, Top:4, Bottom:2 },TabTitleColor:'rgb(60,60,60)',TabSelectedTitleColor:'rgb(0,0,0)',TabSelectedBGColor:"rgb(252,252,252)",TabMoveOnTitleColor:"rgb(0,0,0)",TabBGColor:"rgb(220,220,220)"}},

表格事件

目前有以下事件

ON_CLICK_REPORT_ROW:47,                 //点击报价列表
ON_REPORT_MARKET_STATUS:48,             //报价列表交易状态
ON_DBCLICK_REPORT_ROW:49,               //双击报价列表
ON_RCLICK_REPORT_ROW:50,                //右键点击列表
ON_CLICK_REPORT_HEADER:51,              //单击表头
ON_RCLICK_REPORT_HEADER:52,             //右键点击表头
ON_REPORT_LOCAL_SORT:53,                //报价列表本地排序
ON_DRAW_REPORT_NAME_COLOR:54,           //报价列表股票名称列颜色
ON_DRAW_CUSTOM_TEXT:55,                 //报价列表自定义列
ON_CLICK_REPORT_TAB:56,                 //报价列表标签点击
ON_REPORT_MOUSE_MOVE:78,                //鼠标移动 { x,y, Cell:单元格}

数据

报价列表需要的数据比较多，所以没有内置测试数据源， 使用的时候需要自己对接第3方数据。

需要数据接口

  1. 码表数据接口， 股票名称，股票代码， 其他的固定类数据， 如行业，地区，流通股本等等。
  2. 板块成分接口，获取这个板块的所有股票代码
  3. 批量股票最新数据接口， 根据当前屏的股票列表获取对应的股票数据
  4. 排序接口，根据当前屏序号， 返回对应字段的排序股票列表及股票数据

如果还有问题可以加交流QQ群: 950092318

第3方数据对接教程

HQChart使用教程95-报价列表对接第3方数据1-码表数据
HQChart使用教程95-报价列表对接第3方数据2-板块成分数据
HQChart使用教程95-报价列表对接第3方数据3-股票数据
HQChart使用教程95-报价列表对接第3方数据4-股票排序数据

HQChart代码地址

地址：github.com/jones2000/HQChart

HQChart使用教程94-如何创建报价列表相关推荐

  1. HQChart使用教程9- 如何快速创建K线训练页面

    HQChart使用教程9- 如何快速创建K线训练页面 K线训练已重构新版本使用详见 demo页面部分代码 Option的配置项说明 注册K线训练K线移动的监听 K线训练操作接口 HQChart代码地址 ...

  2. HQChart使用教程7- 如何快速创建一个分时图页面

    如何快速创建一个分时图页面 demo页面代码 品种代码后缀 Option的配置项说明 Type Symbol IsAutoUpdate DayCount Border Minute DragMode ...

  3. HQChart使用教程22-如何创建移动筹码图

    如何创建移动筹码图 效果图 筹码图创建配置 配置信息说明 效果图 使用HQChart 我们可以快速的创建与K线图联动的筹码图. 具体筹码算法请查看设计教程: 如何(c++,js)写一个传统的K线图和走 ...

  4. HQChart使用教程1- 如何快速创建一个K线图页面

    快速创建一个K线图页面 HQChart介绍 demo页面代码 Option的配置项说明 Type Symbol IsAutoUpdate IsShowRightMenu IsShowCorssCurs ...

  5. HQChart使用教程2- 如何把自定义指标显示在K线图页面

    如何把自定义指标显示在K线图页面 自定义一个指标 通过Option设置指标 自定义一个带参数的指标 让我们用上证指数来回测这个奇葩的BS指标吧 HQChart代码地址 效果图 自定义一个指标 假设我们 ...

  6. HQChart报价列表高级应用教程2-东方财富数据对接自选股列表

    HQChart报价列表高级应用教程2-东方财富数据对接自选股列表 效果图 自选股 数据流程 1. 码表数据 2. 板块数据 3. 个股数据 4. 排序 东财接口说明 报价列表配置 数据对接 数据回调 ...

  7. HQChart使用教程95-报价列表对接第3方数据3-股票数据

    HQChart使用教程95-报价列表对接第3方数据2]3-个股数据 协议名称-报价列表股票数据 协议日志截图 Request 字段说明 stocks 返回json数据结构 数据截图 data code ...

  8. HQChart使用教程74-使用快速创建数字币深度图

    HQChart使用教程74-使用快速创建数字币深度图 深度图 效果图 demo例子 demo地址 代码 Option项说明 Type Symbol IsAutoUpdate AutoUpdateFre ...

  9. HQChart使用教程37 - 如何在uni-app创建k线图(app)

    HQChart使用教程37 - 如何在uni-app创建k线图 app 插件目录 创建步骤 1. 拷贝插件到工程中 2. 创建一个page页 在page页中 3.运行到模拟器 通过uniapp下载hq ...

最新文章

  1. 【数据结构】支持四则混合运算的计算器(转)
  2. laravel框架内置的各种路径帮助函数
  3. 自动添加html结束标志,XHTML标签都有一个结束标记
  4. 工具在软件过程改进中的重要作用
  5. 决赛评审招募 | 学生创意能有多不羁？快来网易看决赛！
  6. 极性大小判断技巧_“赫洛克效应”：夸奖能激发孩子的潜能，但父母要掌握技巧与原则...
  7. 我五年来都没来过 我的意志力飞涨。
  8. 查看mysql运行的配置文件_MySQL 查看当前使用的配置文件my.cnf的方法
  9. python的安全插件
  10. 《DB 查询分析器》使用技巧之（七）
  11. 【Docker篇之三】Dockerfile创建镜像
  12. Iptables 中文 man 文档
  13. qq音乐排行榜数据爬取
  14. [内附完整源码和文档] 基于VS2013实现的弹弹堂小游戏
  15. 厦门理工学院OJ题解（1223：Rite与跳舞毯）
  16. hive面试题——求连续活跃天数
  17. 成为数据科学家的第一个project
  18. css 金额千位符,css3 - 使用C格式化数字（小数位，千位分隔符等）
  19. 【一点自己的人生经历】记一次考博经历
  20. canopen服务器协议,CANOpen协议如何保证通讯不丢帧？-通信/网络-与非网

热门文章

  1. 5种利用云赚钱的策略
  2. Wireshark抓取疯狂聊天数据包
  3. 树莓派4b风扇安装方法_树莓派安装手记
  4. 异步电机模型预测控制MATLAB仿真、感应电机预测控制MATLAB
  5. 挖掘导演最爱用的演员 关联规则-FPGrowph
  6. 计算机毕业设计springboot网上体育用品商城系统
  7. 通电自动高通900E是什么原理？
  8. 会Python竟然能让你的王者荣耀金币爆仓！
  9. 张五常的《读书方法》
  10. 中国行李箱市场深度全景调研及投资前景分析报告