envchart.js 5.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202
  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.2
  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. console.log(envTypelist[envType],envType,"envType")
  42. if(envTypelist[envType]){
  43. maxTemp=envTypelist[envType].max;
  44. minTemp=envTypelist[envType].min;
  45. }else{
  46. let envArr= [];
  47. data.forEach(item=>{
  48. envArr = envArr.concat(item['标准区间'])
  49. envArr.push(item.sales)
  50. })
  51. envArr = deteleNull(envArr);
  52. maxTemp=Math.ceil(Math.max.call(null,...envArr)) + 1;
  53. minTemp=Math.floor(Math.min.call(null,...envArr)) - 1;
  54. }
  55. console.log(maxTemp,minTemp,"envType")
  56. chart = new F2.Chart({
  57. el: canvas,
  58. width,
  59. height,
  60. });
  61. chart.source(data, {
  62. // release: {
  63. // range: [ 0.05, 0.95 ],
  64. // min: (dataIndex+10)>data.length?(data.length-10):dataIndex, // 设置刚开始显示的区间 0-5
  65. // max: (dataIndex+10)>data.length?data.length:dataIndex+10
  66. // },
  67. sales:{
  68. min: minTemp,
  69. max: maxTemp
  70. },
  71. '标准区间':{
  72. min: minTemp,
  73. max: maxTemp
  74. }
  75. });
  76. chart.tooltip({
  77. showCrosshairs: true,
  78. showItemMarker: false,
  79. background: {
  80. radius: 2,
  81. fill: '#1890FF',
  82. padding: [ 3, 5 ]
  83. },
  84. nameStyle: {
  85. fill: '#fff'
  86. },
  87. onShow: function onShow(ev) {
  88. const items = ev.items;
  89. // console.log(items)
  90. let time = items[0].origin.time;
  91. items[0].name = time?`${time} 区间`:'区间';
  92. if(items[1]&&items[1].name){
  93. items[1].name = envName
  94. }
  95. // items[1].name?(items[1].name = envName);
  96. return (ev.items = ev.items.splice(2));
  97. }
  98. });
  99. // 定义进度条
  100. // chart.scrollBar({
  101. // mode: 'x',
  102. // xStyle: {
  103. // offsetY: -5
  104. // }
  105. // });
  106. // chart.interaction('pan',{
  107. // mode: 'x',
  108. // // step: 2,
  109. // pressTime:0,
  110. // onStart:function(){
  111. // },
  112. // onEnd:function(){
  113. // },
  114. // });
  115. chart.axis('release', {
  116. label: function label(text) {
  117. return {
  118. fontSize: 10,
  119. color:'#C3C6CB',
  120. text: (data[text]&&data[text].time)?data[text].time:''
  121. };
  122. }
  123. });
  124. chart.axis('sales', {
  125. label: function label(text) {
  126. return {
  127. text: ''
  128. };
  129. }
  130. });
  131. chart.interval().position('release*标准区间').color('#B2E6F2').size(3);
  132. chart.line().position('release*sales').color('#04B49C').size(1);
  133. chart.point().position('release*sales').style({
  134. lineWidth: 1,
  135. stroke: '#04B49C',
  136. }).size(0.6);
  137. chart.render();
  138. return chart;
  139. }
  140. return onInitChart;
  141. }
  142. Component({
  143. /**
  144. * 组件的属性列表
  145. */
  146. properties: {
  147. tragetChart:{
  148. type:Array,
  149. value:()=>{return []},
  150. observer: '_onRefresh'
  151. },
  152. targetIndex:{
  153. type:Number,
  154. value:0
  155. },
  156. envType:{
  157. type:String,
  158. value:''
  159. },
  160. envName:{
  161. type:String,
  162. value:''
  163. }
  164. },
  165. lifetimes: {
  166. attached:function (){
  167. // let chartdom = this.selectComponent('#envchart')
  168. // if(this.data.tragetChart&&this.data.tragetChart.length){
  169. // console.log(this.data.targetIndex,this.data.tragetChart,"this.data.targetIndex")
  170. // chartdom.init(chartFn(this.data.tragetChart,this.data.targetIndex))
  171. // }
  172. },
  173. detached: function() {
  174. },
  175. },
  176. updateChart(data){
  177. // let chartdom = this.selectComponent('#envchart')
  178. // this.setdata({'opts.onInit':chartFn(this.data.tragetChart)})
  179. },
  180. data: {
  181. opts:{
  182. lazyLoad: true,
  183. // onInit: chartFn
  184. }
  185. },
  186. methods: {
  187. _onRefresh(){
  188. let chartdom = this.selectComponent('#envchart');
  189. chartdom.init(chartFn(this.data.tragetChart,this.data.envType,this.data.envName));
  190. }
  191. }
  192. })