let chart = null; function deteleNull(arr){ let brr=[]; arr.forEach(item => { if(item!==null){ brr.push(item) } }) return brr } let envTypelist={ hcho:{ min:0, max:0.31 }, pm25:{ min:0, max:100 } } function chartFn(data=[],envType,envName) { function onInitChart(canvas, width, height, F2) { // const data = data; // const data = [ // { time: "1951",release:0, sales: 38,标准区间: [ 25, 45 ] }, // { time: "1952",release:1, sales: 52,标准区间: [ 25, 35 ] }, // { time: "1956",release:2, sales: 61,标准区间: [ 25, 45 ] }, // { time: "1957",release:3, sales: 26,标准区间: [ 25, 45 ] }, // { time: "1958",release:4, sales: 48,标准区间: [ 25, 45 ] }, // { time: "1959",release:5, sales: 30,标准区间: [ 25, 45 ] }, // { time: "1960",release:6, sales: 38,标准区间: [ 25, 45 ] }, // { time: "1962",release:7, sales: 20,标准区间: [ 25, 45 ] }, // { time: "1964",release:8, sales: null,标准区间: [ 25, 45 ]}, // { time: "1966",release:9, sales: 38,标准区间: [ 25, 45 ] }, // { time: "1968",release:10, sales: 38,标准区间: [ 25, 45 ] }, // { time: "1970",release:11, sales: 20,标准区间: [ 30, 45 ] }, // { time: "1972",release:12, sales: 20,标准区间: [ 30, 45 ] }, // ]; let maxTemp; let minTemp; if(envTypelist[envType]){ let envArr= []; data.forEach(item=>{ envArr = envArr.concat(item['标准区间']) envArr.push(item.sales) }) envArr = deteleNull(envArr); maxTemp=Math.max.call(null,...envArr); minTemp=Math.min.call(null,...envArr); /* maxTemp=envTypelist[envType].max; minTemp=envTypelist[envType].min; */ }else{ let envArr= []; data.forEach(item=>{ envArr = envArr.concat(item['标准区间']) envArr.push(item.sales) }) envArr = deteleNull(envArr); maxTemp=Math.ceil(Math.max.call(null,...envArr)) + 1; minTemp=Math.floor(Math.min.call(null,...envArr)) - 1; } chart = new F2.Chart({ el: canvas, width, height, }); chart.source(data, { // release: { // range: [ 0.05, 0.95 ], // min: (dataIndex+10)>data.length?(data.length-10):dataIndex, // 设置刚开始显示的区间 0-5 // max: (dataIndex+10)>data.length?data.length:dataIndex+10 // }, release: { isRounding:true, tickCount:9, }, sales:{ min: minTemp, max: maxTemp, }, '标准区间':{ min: minTemp, max: maxTemp, } }); chart.tooltip({ showCrosshairs: true, showItemMarker: false, background: { radius: 2, fill: '#1890FF', padding: [ 3, 5 ] }, nameStyle: { fill: '#fff' }, onShow: function onShow(ev) { const items = ev.items; // console.log(items) let time = items[0].origin.time; items[0].name = time?`${time} 区间`:'区间'; if(items[1]&&items[1].name){ items[1].name = envName } // items[1].name?(items[1].name = envName); return (ev.items = ev.items.splice(2)); } }); chart.axis('release', { label: function label(text) { return { fontSize: 10, color:'#C3C6CB', text: (data[text]&&data[text].time)?data[text].time:'' }; }, }); chart.axis('sales', { label: function label(text) { return { text: '' }; } }); chart.interval().position('release*标准区间').color('#B2E6F2').size(3); chart.line().position('release*sales').color('#04B49C').size(1); chart.point().position('release*sales').style({ lineWidth: 1, stroke: '#04B49C', }).size(0.6); chart.render(); return chart; } return onInitChart; } Component({ /** * 组件的属性列表 */ properties: { tragetChart:{ type:Array, value:()=>{return []}, observer: '_onRefresh' }, targetIndex:{ type:Number, value:0 }, envType:{ type:String, value:'' }, envName:{ type:String, value:'' } }, lifetimes: { attached:function (){ // let chartdom = this.selectComponent('#envchart') // if(this.data.tragetChart&&this.data.tragetChart.length){ // console.log(this.data.targetIndex,this.data.tragetChart,"this.data.targetIndex") // chartdom.init(chartFn(this.data.tragetChart,this.data.targetIndex)) // } }, detached: function() { }, }, updateChart(data){ // let chartdom = this.selectComponent('#envchart') // this.setdata({'opts.onInit':chartFn(this.data.tragetChart)}) }, data: { opts:{ lazyLoad: true, // onInit: chartFn } }, methods: { _onRefresh(){ let chartdom = this.selectComponent('#envchart'); chartdom.init(chartFn(this.data.tragetChart,this.data.envType,this.data.envName)); } } })