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

[manyhelp]

[jones2000]

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

[sorcerer310]

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

`

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; }

`

[jones2000]

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

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;
};

[sorcerer310]

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

[jones2000]

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