HQChart使用教程94-如何创建报价列表
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代码地址
报价列表
- 传统PC终端的报价列表。
- 支持固定列， 虚拟表格
- 键盘操作: PageUP/PageDown 翻页, Up/Down 移动当前选中股票, Left/Right 移动列, 滚轴上下翻页.
- 支持配置列本地排序或远程排序
- 横向滚动条
注意 目前支持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方数据。
需要数据接口
- 码表数据接口， 股票名称，股票代码， 其他的固定类数据， 如行业，地区，流通股本等等。
- 板块成分接口，获取这个板块的所有股票代码
- 批量股票最新数据接口， 根据当前屏的股票列表获取对应的股票数据
- 排序接口，根据当前屏序号， 返回对应字段的排序股票列表及股票数据
如果还有问题可以加交流QQ群: 950092318
第3方数据对接教程
HQChart使用教程95-报价列表对接第3方数据1-码表数据
HQChart使用教程95-报价列表对接第3方数据2-板块成分数据
HQChart使用教程95-报价列表对接第3方数据3-股票数据
HQChart使用教程95-报价列表对接第3方数据4-股票排序数据
HQChart代码地址
地址：github.com/jones2000/HQChart