大佬，别忽略掉VUE和VUE 3 用户，什么时候demo也能更新到VUE 3 about hqchart HOT 5 CLOSED

HQChart使用教程73-使用Vue3.0创建HQChart图形

from hqchart.

参照了例子在 vue3 里写了个demo，但无论如何调试NetworkFilter都不执行，请问现在 vue3 的 demo 有问题吗？

`<script setup>
import HQChart from 'hqchart'
import {onMounted,ref,inject} from 'vue'

import 'hqchart/src/jscommon/umychart.resource/css/tools.css'
import 'hqchart/src/jscommon/umychart.resource/font/iconfont.css'

const $axios = inject("$axios");
const kline = ref(null);
function DefaultData(){}
DefaultData.GetKLineOption = function(){
let option = {
Type: 'K Line',
Windows:[
{Index:'MA',Modify:false,Change:false},
{Index:'VOL',Modify:false,Change:false}
],

Symbol:'600000.sh',
IsAutoUpdate:true,
AutoUpdateFrequency:10000,
IsApiPeriod:true,

IsShowCorssCursorInfo:true,
Boarder:
    {
      Left: 1,
      Right:  1,
      Top:  25,
      Bottom:25
    },
KLine:
    {
      Right:1,
      Period:0,
      PageSize:70,
      IsShowTooltip:true
    }

};
return option;
};

let data = {
Symbol:'600000.sh',
KLine:
{
JSChart:null,
Option:DefaultData.GetKLineOption(),
}
};

function NetworkFilter(data,callback){
console.log("~~~~~~~~~~~~~~~~~~~~~~~~~",data);
$axios({
url:'/local_kline_data'
}).then((res)=>{
console.log(res.data);
callback(res);
});
}

onMounted(()=>{
// HQChart.Chart.JSChart.JSChartContainer.IsAutoUpdate = true;
HQChart.Chart.ChartDestory();f
OnSize();
window.onresize=()=>{OnSize();}
CreateKLineChart();
});

function OnSize(){
let chartHeight = window.innerHeight - 30;
let chartWidth = window.innerWidth-30;

let pkline = kline;
console.log('-------'+pkline.value.style+" chartSize:"+chartHeight+" "+chartWidth);
pkline.value.style.width = chartWidth+'px';
pkline.value.style.height = chartHeight+'px';
if(data.KLine.JSChart) data.KLine.JSChart.OnSize();
}

function CreateKLineChart(){
if(data.KLine.JSChart) return;
data.KLine.Option.Symbol = Symbol;
// console.log("------data.KLine.Option.NetworkFilter:"+data.KLine.Option.Symbol);
data.KLine.Option.NetworkFilter = (data,callback) => {
NetworkFilter(data,callback);
}

let chart = HQChart.Chart.JSChart.Init(kline.value);
chart.SetOption(data.KLine.Option);
data.KLine.JSChart = chart;
}

from hqchart.

教程文档中的示例源码已更新

import HQData from "hqchart/lib/umychart.NetworkFilterTest.vue"

....................................
 const KLineNetworkFilter=function(data, callback)
{
   HQData.HQData.NetworkFilter(data, callback);
}
  
const MinuteNetworkFilter=function(data, callback)
{
    HQData.HQData.NetworkFilter(data, callback);
}

//创建走势图
const CreateKLineChart=function(period)
{
    ClearChart();

    var option=DefaultData.GetKLineOption();
    option.Symbol=HQChartData.Symbol;
    option.Period=period;
    
    var divKLine=document.getElementById('kline');
    var chart=HQChart.Chart.JSChart.Init(divKLine);
    option.NetworkFilter=(data, callback)=>{ KLineNetworkFilter(data, callback); }
    chart.SetOption(option);
    HQChartData.Chart=chart;
};

.................................

 //创建分时图
const CreateMinuteChart=function()
{
    ClearChart();

    var option=DefaultData.GetMinuteOption();
    option.Symbol=HQChartData.Symbol;

    var divKLine=document.getElementById('kline');
    var chart=HQChart.Chart.JSChart.Init(divKLine);
    option.NetworkFilter=(data, callback)=>{ MinuteNetworkFilter(data, callback); }
    chart.SetOption(option);
    HQChartData.Chart=chart;
};

from hqchart.

参照您的代码修改了一下，但还是原来的问题
option.NetworkFilter=(data, callback)=>{ KLineNetworkFilter(data, callback); }
中，KLineNetworkFilter(data,callback)函数没有执行，也就是说option.NetworkFilter没有被框架调用，
HQChart框架中option.NetworkFilter什么时候会被调用？

from hqchart.

我这里用vue3的框架，是可以被调用的。在setoption就之后就会被调用。

from hqchart.