hqchart 1.1.12693 → 1.1.12706

package/src/pages/container.demo.page/App.vue

@@ -1,118 +0,0 @@
-<template>
-    <div id="app2" >
-        <button @click='ClickAddKLine'>添加K线</button>
-        <button @click='ClickOrder'>添加沪深A5分钟涨速排名</button>
-        <button @click='ClickDelControl'>删除</button>
-        <button @click='ClickChangeControl'>切换</button>
-        <div ref='divcontainer' style="width:80%;">
-            <JSVueContainer ref='jsvuecontainer'/>
-        </div>
-    </div>
-</template>
-
-<script>
-import JSVueContainer from '../../jscommon/umychart.vue.components/jsvuecontainer2.0.vue'
-
-export default 
-{
-    
-    data () 
-    {
-        return {
-            Test:''
-        }
-    },   
-
-    components: { JSVueContainer },
-
-    created:function()
-    {
-        
-    },
-
-    mounted:function()
-    {
-        var self=this;
-        window.onresize = function () { self.OnSize(); }
-
-        //mounted执行完成一个调用 
-        this.$nextTick(function () { this.OnSize(); })
-    },
-
-
-    methods:
-    {
-        OnChangeSymbol:function(symbol)
-        {
-
-        },
-
-        OnSize()
-        {
-            this.$refs.jsvuecontainer.OnSize();
-        },
-
-        ClickAddKLine()
-        {
-            console.log('ClickAddKLine');
-            var jsVueContainer=this.$refs.jsvuecontainer;
-            var symbol=jsVueContainer.Symbol;
-            var minSize=jsVueContainer.MinSize;
-            var ID=jsVueContainer.CreateID();
-            var self=this;
-            jsVueContainer.Control.push( { ClassName:'StockChart', ID:ID,Symbol:symbol, 
-                Option:
-                    {
-                    Type: '历史K线图', 
-                    IsShowCorssCursorInfo:false,
-                    KLine:
-                        {
-                            Right:1,                    //复权 0 不复权 1 前复权 2 后复权
-                            Period:1,                   //周期 0 日线 1 周线 2 月线 3 年线 
-                        }
-                    }, 
-                Size:{ Width:minSize.Width, Height:minSize.Height },
-                CreateComplete:function(jsLoader) { jsVueContainer.OnControlCreateCompete(jsLoader); }
-            });
-        },
-
-        ClickOrder()
-        {
-            console.log('ClickOrder');
-            var jsVueContainer=this.$refs.jsvuecontainer;
-            var minSize=jsVueContainer.MinSize;
-            var ID=jsVueContainer.CreateID();
-            jsVueContainer.Control.push( { ClassName:'StockOrder', ID:ID,Symbol:"CNA.ci", Option: { OrderFiled:39, Order:-1 } , 
-                Size:{ Width:minSize.Width, Height:minSize.Height },
-                CreateComplete:function(jsLoader) { jsVueContainer.OnControlCreateCompete(jsLoader); }
-            });
-        },
-
-        ClickDelControl()
-        {
-            console.log('ClickDelControl');
-            this.$refs.jsvuecontainer.Control.splice(1,1);
-        },
-
-        ClickChangeControl()
-        {
-            console.log('ClickChangeControl');
-            
-            var jsVueContainer=this.$refs.jsvuecontainer;
-            var symbol=jsVueContainer.Symbol;
-            var minSize=jsVueContainer.MinSize;
-            var ID=jsVueContainer.CreateID();
-            //jsVueContainer.Control.splice(1,1);
-            jsVueContainer.Control.splice(1,1,{ClassName:'StockChart',ID:ID, Symbol:'600000.sh',Size:{ Width:minSize.Width, Height:minSize.Height }});
-            //this.$set(jsVueContainer.Control, 1, {ClassName:'StockChart',Symbol:'600000.sh',Size:{ Width:minSize.Width, Height:minSize.Height }});
-        }
-        
-    }
-}
-
-</script>
-
-<style>
-
-  
-</style>

package/src/pages/container.demo.page/index.js

@@ -1,18 +0,0 @@
-import Promise from 'promise-polyfill'
-import Vue from 'vue'
-import ElementUI from 'element-ui'
-import 'element-ui/lib/theme-default/index.css';
-import locale from 'element-ui/lib/locale/lang/en'
-import App from './App.vue'
-
-if (!window.Promise) {  
-  window.Promise = Promise;  
-}  
-
-
-Vue.use(ElementUI,{ locale })
-
-new Vue({
-  el: '#app',
-  render: h => h(App)
-})

package/src/pages/dataZoom.demo.page/App.vue

@@ -1,265 +0,0 @@
-<template>
-  <div class="demoWrap" ref='demoWrap'>
-    <div id="kline" ref='kline'></div>
-    <DataZoom ref='dataZoom' 
-      :lineAndNameAry='lineAndNameAry'
-      :startPosition='startPosition'
-      :endPosition='endPosition'
-      @move='moveChart'
-    ></DataZoom>
-  </div>
-</template>
-
-<script>
-  import DataZoom from './components/dataZoom.vue'
-  import JSCommon from '../../jscommon/umychart.vue/umychart.vue.js'
-  function DefaultData() {}
-  DefaultData.GetKlineOption = function(symbol){
-    let data = {
-        Type: '历史K线图',
-        Windows: [
-            { Index: "均线",Modify:false,Change:false},
-            { Index: "VOL",Modify:false,Change:false },
-        ], //窗口指标
-        Symbol: symbol,
-        IsAutoUpate: true, //是自动更新数据
-
-        IsShowRightMenu: false, //右键菜单
-
-        KLine: {
-            DragMode: 1, //拖拽模式 0 禁止拖拽 1 数据拖拽 2 区间选择
-            Right: 1, //复权 0 不复权 1 前复权 2 后复权
-            Period: 0, //周期 0 日线 1 周线 2 月线 3 年线
-            MaxReqeustDataCount: 3000, //日线数据最近1000天
-            MaxRequestMinuteDayCount: 15,    //分钟数据最近15天
-            PageSize: 50, //一屏显示多少数据
-            IsShowTooltip: false //是否显示K线提示信息
-        },
-
-        KLineTitle: //标题设置
-        {
-            IsShowName: false, //不显示股票名称
-            IsShowSettingInfo: false //不显示周期/复权
-        },
-
-        Border: //边框
-        {
-            Left: 0, //左边间距
-            Right: 1, //右边间距
-            Top: 20
-        },
-
-        Frame: //子框架设置
-        [
-            { SplitCount: 3, StringFormat: 0 },
-            { SplitCount: 3, StringFormat: 0 },
-            { SplitCount: 3, StringFormat: 0 },
-            { SplitCount: 3, StringFormat: 0 }
-        ]
-    };
-    return data;
-  }
-
-  export default {
-    data () {
-      return {
-        Kline:{
-          JSChart:null,
-          // IsShow:false,
-          Option:null
-        },
-        Symbol: '600000.sh',
-        lineAndNameAry: [],
-        PageSize: 50, //初始一屏展示的数据
-        startPosition: 0.5,
-        endPosition: 1,
-        lineCount: 0
-      }
-    },
-    created () {
-      this.Kline.Option = DefaultData.GetKlineOption(this.Symbol);
-    },
-    mounted () {
-      this.OnSize();
-      window.onresize = () => {
-        this.OnSize();
-      };
-
-      this.createKlineChart(0);
-    },
-    components: {
-      DataZoom
-    },
-    watch: {
-      startPosition: function(){
-        this.OnSize();
-      }
-    },
-    methods: {
-      OnSize(){
-        var width = this.$refs.demoWrap.clientWidth;
-        var height = this.$refs.demoWrap.clientHeight;
-
-        var chartHeight = height - this.$refs.dataZoom.getHeight();
-        console.log(height+', ',chartHeight);
-        this.$refs.kline.style.width = width + 'px';
-        this.$refs.kline.style.height = chartHeight + 'px';
-
-        this.$refs.dataZoom.OnSize(width,this.startPosition,this.endPosition);
-
-      },
-      IncreasLeftShowCount (bIncrease,step) //左边增加或减少
-      {
-          // var step=document.getElementById("left_zoom_step").value;
-
-          if (bIncrease==true)
-          {
-              var obj={ID:8, Step:parseInt(step) };
-              this.Kline.JSChart.JSChartContainer.ChartOperator(obj);
-          }
-          else
-          {
-              var obj={ID:7, Step:parseInt(step)};
-              this.Kline.JSChart.JSChartContainer.ChartOperator(obj);
-          }
-          
-      },
-
-      IncreasRightShowCount (bIncrease,step) //右边边增加或减少
-      {
-          // var step=document.getElementById("right_zoom_step").value;
-
-          if (bIncrease==true)    //放大
-          {
-              var obj={ID:10, Step:parseInt(step) };
-              this.Kline.JSChart.JSChartContainer.ChartOperator(obj);
-          }
-          else        //缩小
-          {
-              var obj={ID:9, Step:parseInt(step)};
-              this.Kline.JSChart.JSChartContainer.ChartOperator(obj);
-          }
-          
-      },
-      moveChart(moveInfo){
-        let {movePercent, direction, isCountChange} = moveInfo;
-        console.log('moveChart::',movePercent,direction, isCountChange);
-        let step = this.lineCount * movePercent;
-        switch(isCountChange){
-          case 'no':
-            console.log('整体移动，step:',step);
-            if(direction == 'toleft') { //鼠标向左，图形向右
-              this.MoveRight(step);
-            }else{
-              this.MoveLeft(step);
-            }
-            break;
-          case 'increase':
-            console.log('整体增加，step:',step);
-            if(direction == 'toleft'){
-              this.IncreasLeftShowCount(true,step);
-            }else{
-              this.IncreasRightShowCount(true,step);
-            }
-            break;
-          case 'reduce':
-            console.log('整体减少，step:',step);
-            if(direction == 'toleft'){
-              this.IncreasRightShowCount(false,step);
-            }else{
-              this.IncreasLeftShowCount(false,step);
-            }
-            break;
-        }
-      },
-      //接受到历史数据
-      OnRecvHistoryData (event,data,obj)
-      {
-          console.log("[KLineChart::OnRecvHistoryData] data=", data);
-          var hisData=data.HistoryData;
-          var count=hisData.Data.length;
-          this.lineCount = count;
-          // let yearAry = [];
-          hisData.Data.forEach(item => {
-            let year = item.Date.toString().substring(0,4);
-            // debugger;
-            if(this.lineAndNameAry.find(lineName => lineName.name == year) != undefined){
-              this.lineAndNameAry.find(lineName => lineName.name == year).dataCount++;
-            }else{
-              this.lineAndNameAry.push(
-                {
-                  dataCount: 0,
-                  width: '',
-                  name: year
-                }
-              );
-            }
-          });
-          // console.log('年分割：',this.lineAndNameAry);
-          this.startPosition = Number(this.PageSize / count).toFixed(2);
-          // debugger;
-          // console.log('年分割：',this.startPosition);
-          // document.getElementById("kline_count").innerText=`K线个数${count}`;
-      },
-
-      OnDrawFinish (event,data,obj)
-      {
-          var showCount=this.Kline.JSChart.JSChartContainer.Frame.SubFrame[0].Frame.XPointCount; //获取一屏显示的数据个数
-          var count=this.Kline.JSChart.JSChartContainer.ChartPaint[0].Data.Data.length;
-          var offset=this.Kline.JSChart.JSChartContainer.ChartPaint[0].Data.DataOffset;
-
-          // document.getElementById("kline_showcount").innerText=`当前屏数据个数${showCount}`;
-          // document.getElementById("kline_count").innerText=`K线个数${count}`;
-          // document.getElementById("kline_offset").innerText=`起始数据索引${offset}`;
-          
-      },
-      MoveLeft (step)
-      {
-          // var step=document.getElementById("left_step").value;
-
-          var obj = { ID: 1, Step:parseInt(step) };
-          this.Kline.JSChart.JSChartContainer.ChartOperator(obj);
-      },
-      MoveRight (step)
-      {
-          // var step=document.getElementById("right_step").value;
-
-          var obj = { ID: 2, Step:parseInt(step) };
-          this.Kline.JSChart.JSChartContainer.ChartOperator(obj);
-      },
-      createKlineChart (value) {
-        this.Kline.JSChart = JSCommon.JSChart.Init(document.getElementById('kline'));
-        this.Kline.Option.KLine.PageSize = this.PageSize;
-        this.Kline.Option.KLine.Period = value;
-        this.Kline.JSChart.SetOption(this.Kline.Option);
-
-        //选中图形事件
-        this.Kline.JSChart.AddEventCallback( {
-          event:JSCommon.JSCHART_EVENT_ID.RECV_HISTROY_DATA, 
-          callback:(event,data,obj)=>{ this.OnRecvHistoryData(event,data,obj); }
-        });
-
-
-        this.Kline.JSChart.AddEventCallback({ 
-          event:JSCommon.JSCHART_EVENT_ID.CHART_STATUS, 
-          callback:(event,data,obj)=>{ this.OnDrawFinish(event,data,obj); }
-        });
-      }
-    }
-  }
-
-</script>
-
-<style lang="less">
-  html,body{
-    width: 100%;
-    height: 100%;  
-  }
-.demoWrap{
-  width: 900px;
-  height: 700px;
-  position: relative;
-  margin: 0 auto;
-  margin-top: 50px;
-}
-</style>

package/src/pages/dataZoom.demo.page/components/dataZoom.vue

@@ -1,303 +0,0 @@
-<template>
-  <div class="miniMap">
-    <div class="splitLines">
-      <div class="lineAndName" v-for="(lineName, index) in lineAndNameAry" :key='index' :style="{width: lineName.width}">
-        <div class="line" v-if='index != 0'></div>
-        <div class="name" v-if='index != 0'>{{lineName.name}}</div>
-      </div>
-    </div>
-    <div class="slideBar" :style="{left:slideBarStyle.left+'px',right:slideBarStyle.right+'px'}" @mousedown='commonMouseDown'>
-      <div class="sbLeft" @mousedown.stop='commonMouseDown'></div>
-      <div class="sbRight" @mousedown.stop='commonMouseDown'></div>
-    </div>
-    <!-- <div class="slideBarWrap">
-      
-    </div> -->
-    
-  </div>
-</template>
-
-<script>
-  export default {
-    props: ['lineAndNameAry'],
-    data () {
-      return {
-        // miniMapStyle: {
-        //   height: "49.73px", 
-        //   left: "59px", 
-        //   right: "65px",  
-        //   bottom: "20px"
-        // },
-        isSlideBarMove: false,
-        isLeftMove: false,
-        isRightMove: false,
-        slideBarStyle: {
-          left: 0, 
-          right: 0,
-          MaxWidth: 0,
-          width: 0
-        },
-        PointPosition: {
-          x: 0,
-          y: 0
-        },
-        beforeMoveX: 0, //滑动前的位置-左
-        beforeMoveXRight: 0 //滑动前的位置-右
-        // lineAndNameAry: [
-        // ]
-      }
-    },
-    created () {
-      let totalWidth = 0;
-      this.lineAndNameAry.forEach(item => {
-        totalWidth += item.dataCount;
-      });
-      this.lineAndNameAry.forEach(item => {
-        item.width = parseInt(item.dataCount / totalWidth * 100) + '%';
-      });
-
-      const _this = this;
-      document.onmouseup = function(e) {
-        _this.commonMouseUp(e);
-      }
-    },
-    mounted () {
-
-    },
-    methods: {
-      OnSize (boxWidth,startPosition,endPosition) {
-        this.slideBarStyle.MaxWidth = boxWidth;
-        this.slideBarStyle.left = parseInt(boxWidth * (1- startPosition));
-        this.slideBarStyle.right = parseInt(boxWidth * (1 - endPosition));
-        this.slideBarStyle.width = boxWidth - this.slideBarStyle.left - this.slideBarStyle.right;
-        // console.log('OnSize::left,right,width:',this.slideBarStyle);
-        this.beforeMoveX = this.slideBarStyle.left;
-        this.beforeMoveXRight = this.slideBarStyle.right;
-      },
-      getHeight(){
-        return 50;
-      },
-      changeSlideBarPosition () {
-        
-      },
-      slideBarMouseMove (e) {
-        if(this.isSlideBarMove) {
-          let offsetWidth = e.clientX - this.PointPosition.x; //左移为负值
-          this.PointPosition.x = e.clientX;
-          // console.log('偏移：',offsetWidth);
-          const oldLeft = this.slideBarStyle.left;
-          const oldRight = this.slideBarStyle.right;
-          this.slideBarStyle.left += offsetWidth;
-          this.slideBarStyle.right -= offsetWidth;
-          // let realOffset = -offsetWidth;
-          if(this.slideBarStyle.left < 0) {
-            this.slideBarStyle.left = 0;
-            this.slideBarStyle.right = this.slideBarStyle.MaxWidth - this.slideBarStyle.width;
-            // realOffset = oldLeft;
-          }
-          if(this.slideBarStyle.right < 0) {
-            this.slideBarStyle.right = 0;
-            this.slideBarStyle.left = this.slideBarStyle.MaxWidth - this.slideBarStyle.width;
-            realOffset = oldRight;
-          }
-        }
-      },
-      sbLeftMouseMove (e) {
-        if(this.isLeftMove) {
-          let offsetWidth = e.clientX - this.PointPosition.x;
-          this.PointPosition.x = e.clientX;
-          // console.log('偏移：',offsetWidth);
-          this.slideBarStyle.left += offsetWidth;
-          if(this.slideBarStyle.left < 0) {
-            this.slideBarStyle.left = 0;
-          }else if(this.slideBarStyle.left + 10 > this.slideBarStyle.MaxWidth - this.slideBarStyle.right) { //sbLeft 与 sbRight紧挨着的位置，left与right最小间隔是10px
-            this.slideBarStyle.left = this.slideBarStyle.MaxWidth - this.slideBarStyle.right - 10
-          }
-          // console.log('偏移：', this.slideBarStyle.left, this.slideBarStyle.right);
-        }
-      },
-      sbRightMouseMove (e) {
-        if(this.isRightMove){
-          let offsetWidth = e.clientX - this.PointPosition.x;
-          this.PointPosition.x = e.clientX;
-          // console.log('偏移：',offsetWidth);
-          this.slideBarStyle.right -= offsetWidth;
-          if(this.slideBarStyle.right < 0) {
-            this.slideBarStyle.right = 0;
-          }else if(this.slideBarStyle.right + 10 > this.slideBarStyle.MaxWidth - this.slideBarStyle.left){
-            this.slideBarStyle.right = this.slideBarStyle.MaxWidth - this.slideBarStyle.left - 10;
-          }
-          console.log('偏移：', this.slideBarStyle.left, this.slideBarStyle.right);
-        }
-      },
-      commonMouseDown (e) {
-        if(e.target.className == "slideBar") { //点击透明色互动块，保存初始宽度
-          this.slideBarStyle.width = this.slideBarStyle.MaxWidth - this.slideBarStyle.left - this.slideBarStyle.right;
-          this.isSlideBarMove = true;
-        }else if(e.target.className == "sbLeft"){
-          this.isLeftMove = true;
-        }else if(e.target.className == "sbRight"){
-          this.isRightMove = true;
-        }
-        
-        this.PointPosition.x = e.clientX;
-        // this.PointPosition.y = e.clientY;
-        // console.log('down：：',e,e.target, e.clientX, e.clientY);
-        
-        document.onmousemove= (ev) => { //写在mousedown,保证快速拖动时扔能有效
-          if(e.target.className == "slideBar"){
-            this.slideBarMouseMove(ev);
-          }else if(e.target.className == "sbLeft"){
-            this.sbLeftMouseMove(ev);
-          }else if(e.target.className == "sbRight"){
-            this.sbRightMouseMove(ev);
-          }
-        };
-
-      },
-      commonMouseUp (e) {
-        // console.log('哪个移动，',this.isSlideBarMove,);
-        let realOffset = 0;
-        let movePercent = 0;
-        let direction = '';
-        let isCountChange = 'no';
-        if(this.isSlideBarMove){
-          console.log('块 滑动');
-          realOffset = this.slideBarStyle.left - this.beforeMoveX;
-          if(realOffset < 0){
-            realOffset = -realOffset;
-            direction = 'toleft';
-          }else{
-            direction = 'toright';
-          }
-          
-        }else if(this.isLeftMove){
-          console.log('左 滑动');
-          realOffset = this.slideBarStyle.left - this.beforeMoveX;
-          if(realOffset < 0){
-            realOffset = -realOffset;
-            direction = 'toleft';
-            isCountChange = 'increase';
-          }else{
-            direction = 'toright';
-            isCountChange = 'reduce';
-          }
-          
-        }else if(this.isRightMove){
-          console.log('右 滑动');
-          realOffset = this.slideBarStyle.right - this.beforeMoveXRight;
-          if(realOffset < 0) {
-            realOffset = -realOffset;
-            direction = 'toright';
-            isCountChange = 'increase';
-          }else{
-            direction = 'toleft';
-            isCountChange = 'reduce';
-          }
-        }
-        movePercent = (realOffset / this.slideBarStyle.MaxWidth).toFixed(2);
-        this.isSlideBarMove = false;
-        this.isLeftMove = false;
-        this.isRightMove = false;
-        this.beforeMoveX = this.slideBarStyle.left; //保存滑动前位置
-        this.beforeMoveXRight = this.slideBarStyle.right; //保存滑动前位置
-
-        let moveInfo = {
-          movePercent, 
-          direction, 
-          isCountChange
-        };
-        console.log('moveInfo::', realOffset, moveInfo);
-        this.$emit('move', moveInfo);
-        // console.log('isSlideBarMove::', this.isSlideBarMove);
-        
-      }
-    }
-  }
-</script>
-
-<style lang="less">
-  html,body{ /*鼠标移动时禁止选中文字*/
-    -moz-user-select: none; 
-    -khtml-user-select: none; 
-    user-select: none;
-  }
-  .miniMap{
-    position: absolute;
-    bottom: 0;
-    z-index: 30;
-    overflow: visible;
-    /* clear: both; */
-    border: 1px solid #ccc;
-    font: 14px 'Microsoft Yahei';
-    height: 50px;
-    width: 100%;
-    left: 0;
-    bottom: 0;
-    box-sizing: border-box;
-
-    .splitLines{
-      height: 100%;
-      display: flex;
-
-      .lineAndName{
-        width: 20%;
-        height: 100%;
-        position: relative;
-      }
-
-      .line {
-        position: absolute;
-        top: 25px;
-        bottom: 0;
-        width: 1px;
-        background-color: #333;
-      }
-
-      .name {
-        position: absolute;
-        top: 25px;
-        left: 5px;
-        font-size: 12px;
-        color: #333;
-      }
-    }
-
-    .slideBarWrap{
-      position: absolute;
-      width: 100%;
-      height: 100%;
-      top: 0;
-      left: 0;
-      background-color: transparent;
-    }
-
-    .slideBar{
-      position: absolute;
-      height: 100%;
-      left: 0;
-      right: 0;
-      top: 0;
-      background-color: rgba(0, 0, 0, 0.1);
-      cursor: move;
-      transition: all .5 ease;
-
-      .sbLeft,
-      .sbRight {
-        position: absolute;
-        cursor: w-resize;
-        width: 10px;
-        height: 50%;
-        top: 25%;
-        background-color: #999999;
-      }
-
-      .sbLeft {
-        left: -5px;
-      }
-      .sbRight{
-        right: -5px;
-      }
-    }
-  }
-</style>