envchart.js 5.0 KB

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