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