envchart.js 5.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192
  1. let chart = null;
  2. function deteleNull(arr){
  3. let brr=[];
  4. arr.forEach(item => {
  5. if(item!==null){
  6. brr.push(item)
  7. }
  8. })
  9. return brr
  10. }
  11. let envTypelist={
  12. hcho:{
  13. min:0,
  14. max:0.31
  15. },
  16. pm25:{
  17. min:0,
  18. max:100
  19. }
  20. }
  21. function chartFn(data=[],envType,envName) {
  22. function onInitChart(canvas, width, height, F2) {
  23. // const data = data;
  24. // const data = [
  25. // { time: "1951",release:0, sales: 38,标准区间: [ 25, 45 ] },
  26. // { time: "1952",release:1, sales: 52,标准区间: [ 25, 35 ] },
  27. // { time: "1956",release:2, sales: 61,标准区间: [ 25, 45 ] },
  28. // { time: "1957",release:3, sales: 26,标准区间: [ 25, 45 ] },
  29. // { time: "1958",release:4, sales: 48,标准区间: [ 25, 45 ] },
  30. // { time: "1959",release:5, sales: 30,标准区间: [ 25, 45 ] },
  31. // { time: "1960",release:6, sales: 38,标准区间: [ 25, 45 ] },
  32. // { time: "1962",release:7, sales: 20,标准区间: [ 25, 45 ] },
  33. // { time: "1964",release:8, sales: null,标准区间: [ 25, 45 ]},
  34. // { time: "1966",release:9, sales: 38,标准区间: [ 25, 45 ] },
  35. // { time: "1968",release:10, sales: 38,标准区间: [ 25, 45 ] },
  36. // { time: "1970",release:11, sales: 20,标准区间: [ 30, 45 ] },
  37. // { time: "1972",release:12, sales: 20,标准区间: [ 30, 45 ] },
  38. // ];
  39. let maxTemp;
  40. let minTemp;
  41. if(envTypelist[envType]){
  42. let envArr= [];
  43. data.forEach(item=>{
  44. envArr = envArr.concat(item['标准区间'])
  45. envArr.push(item.sales)
  46. })
  47. envArr = deteleNull(envArr);
  48. maxTemp=Math.max.call(null,...envArr);
  49. minTemp=Math.min.call(null,...envArr);
  50. /* maxTemp=envTypelist[envType].max;
  51. minTemp=envTypelist[envType].min; */
  52. }else{
  53. let envArr= [];
  54. data.forEach(item=>{
  55. envArr = envArr.concat(item['标准区间'])
  56. envArr.push(item.sales)
  57. })
  58. envArr = deteleNull(envArr);
  59. maxTemp=Math.ceil(Math.max.call(null,...envArr)) + 1;
  60. minTemp=Math.floor(Math.min.call(null,...envArr)) - 1;
  61. }
  62. chart = new F2.Chart({
  63. el: canvas,
  64. width,
  65. height,
  66. });
  67. chart.source(data, {
  68. // release: {
  69. // range: [ 0.05, 0.95 ],
  70. // min: (dataIndex+10)>data.length?(data.length-10):dataIndex, // 设置刚开始显示的区间 0-5
  71. // max: (dataIndex+10)>data.length?data.length:dataIndex+10
  72. // },
  73. release: {
  74. isRounding:true,
  75. tickCount:9,
  76. },
  77. sales:{
  78. min: minTemp,
  79. max: maxTemp,
  80. },
  81. '标准区间':{
  82. min: minTemp,
  83. max: maxTemp,
  84. }
  85. });
  86. chart.tooltip({
  87. showCrosshairs: true,
  88. showItemMarker: false,
  89. background: {
  90. radius: 2,
  91. fill: '#1890FF',
  92. padding: [ 3, 5 ]
  93. },
  94. nameStyle: {
  95. fill: '#fff'
  96. },
  97. onShow: function onShow(ev) {
  98. const items = ev.items;
  99. // console.log(items)
  100. let time = items[0].origin.time;
  101. items[0].name = time?`${time} 区间`:'区间';
  102. if(items[1]&&items[1].name){
  103. items[1].name = envName
  104. }
  105. // items[1].name?(items[1].name = envName);
  106. return (ev.items = ev.items.splice(2));
  107. }
  108. });
  109. chart.axis('release', {
  110. label: function label(text) {
  111. return {
  112. fontSize: 10,
  113. color:'#C3C6CB',
  114. text: (data[text]&&data[text].time)?data[text].time:''
  115. };
  116. },
  117. });
  118. chart.axis('sales', {
  119. label: function label(text) {
  120. return {
  121. text: ''
  122. };
  123. }
  124. });
  125. chart.interval().position('release*标准区间').color('#B2E6F2').size(3);
  126. chart.line().position('release*sales').color('#04B49C').size(1);
  127. chart.point().position('release*sales').style({
  128. lineWidth: 1,
  129. stroke: '#04B49C',
  130. }).size(0.6);
  131. chart.render();
  132. return chart;
  133. }
  134. return onInitChart;
  135. }
  136. Component({
  137. /**
  138. * 组件的属性列表
  139. */
  140. properties: {
  141. tragetChart:{
  142. type:Array,
  143. value:()=>{return []},
  144. observer: '_onRefresh'
  145. },
  146. targetIndex:{
  147. type:Number,
  148. value:0
  149. },
  150. envType:{
  151. type:String,
  152. value:''
  153. },
  154. envName:{
  155. type:String,
  156. value:''
  157. }
  158. },
  159. lifetimes: {
  160. attached:function (){
  161. // let chartdom = this.selectComponent('#envchart')
  162. // if(this.data.tragetChart&&this.data.tragetChart.length){
  163. // console.log(this.data.targetIndex,this.data.tragetChart,"this.data.targetIndex")
  164. // chartdom.init(chartFn(this.data.tragetChart,this.data.targetIndex))
  165. // }
  166. },
  167. detached: function() {
  168. },
  169. },
  170. updateChart(data){
  171. // let chartdom = this.selectComponent('#envchart')
  172. // this.setdata({'opts.onInit':chartFn(this.data.tragetChart)})
  173. },
  174. data: {
  175. opts:{
  176. lazyLoad: true,
  177. // onInit: chartFn
  178. }
  179. },
  180. methods: {
  181. _onRefresh(){
  182. let chartdom = this.selectComponent('#envchart');
  183. chartdom.init(chartFn(this.data.tragetChart,this.data.envType,this.data.envName));
  184. }
  185. }
  186. })