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

报价列表

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

表格列配置

FixedColumn

固定列

VScrollbar

是否显示竖线滚动条
VScrollbar:{ Enable:true },

SelectedModel

选中模式 0=表示当前屏索引 1=所有数据的索引

MultiSelectModel

多选模式 0=禁止 1=开启

PageUpDownCycle

是否循环翻页

FixedRowCount

顶部固定行

WheelPageType

鼠标滚轴翻页模式
0=一页一页翻
1=一条一条翻

TextOverflowStyle

输出内容比单元格长度大 0=裁剪 1=输出"####"

EnableResize

自适应外部div大小， 默认 false

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

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

EnableDragWidth

是否允许拖动列宽度 默认false

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群: 719525615

第3方数据对接教程

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

HQChart代码地址

地址：github.com/jones2000/HQChart