map-chart.js 7.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190
  1. (function () {
  2. Vue.component('map-chart', {
  3. template: '<div class="chart_box" >\
  4. <div :id="chartid" class="chart_box"></div>\
  5. </div>',
  6. props: ['config'],
  7. data: function () {
  8. return {
  9. chartid: _.uniqueId("chart_"),
  10. chart: null,
  11. lastIndex: null
  12. }
  13. },
  14. mounted: function () {
  15. var that = this;
  16. this.$nextTick(function () {
  17. that.chart = echarts.init(document.getElementById(that.chartid));
  18. that.chart.setOption(that.setOption()); //试着一下
  19. this.chart.on('click', function (params) { //点击事件
  20. that.$emit('clickMap', params) //传给外面点击事件
  21. if (params.componentType === 'series') {
  22. if (that.lastIndex !== null) {
  23. that.chart.dispatchAction({ //把上一个高亮的取消掉
  24. type: 'downplay',
  25. seriesIndex: 0,
  26. dataIndex: that.lastIndex
  27. })
  28. }
  29. that.$emit('map-click', params)
  30. that.lastIndex = params.dataIndex //高亮现在这个
  31. that.chart.dispatchAction({
  32. type: 'highlight',
  33. seriesIndex: 0,
  34. dataIndex: params.dataIndex
  35. })
  36. }
  37. })
  38. })
  39. },
  40. methods: {
  41. setOption: function () {
  42. var options=JSON.parse(JSON.stringify(defaults));
  43. if(this.config){
  44. var maxValue =0;
  45. this.config.data.map(function(v){
  46. if(v.value){
  47. maxValue = Math.max(maxValue,parseInt(v.value || 0));
  48. maxValue = Math.ceil(maxValue/5)*5
  49. }
  50. })
  51. var piceArr = this.getPiceArr(maxValue)
  52. options.visualMap = {
  53. text: null,
  54. color: ['#62a3ff', '#bdcfe5', '#c5ddff'],
  55. pieces: piceArr,
  56. textStyle: {
  57. color: '#b5e1fc'
  58. },
  59. left: '50'
  60. }
  61. options.series[0].zoom = this.config.zoom || 1.2;
  62. options.series[0].data = this.config.data;
  63. }
  64. return options
  65. },
  66. getPiceArr(max, num) {
  67. var lastArr = [];
  68. if (max == 0) {
  69. lastArr = [{
  70. max: 0,
  71. min: 0,
  72. label: '0'
  73. }]
  74. } else {
  75. var divisor = max > 10000 ? 10000 : (max > 1000 ? 1000 : 100); //最小区间跨度值
  76. var unitSpan = divisor >= 10000 ? 10000 : 1; //计算单位用
  77. var _num = num || (max / divisor > 5) ? 5 : (max / divisor); //区间取值次数
  78. var _span = (max / _num); //刚好区间跨度,需调整
  79. _span = ((_span + '').match(/0/ig) && (_span + '').match(/0/ig).length) == (((_span + '').split('.'))[0].length - 1) ? _span : (((_span + '').substr(0, 1) | 0) + 1) + Array(((_span + '').split('.'))[0].length).join(0); //区间跨度,可能需要进位 0填充等
  80. var company = _span >= 10000 ? '万' : ''; //区间单位
  81. _num = num || Math.ceil(max / _span); //重新计算区间次数
  82. for (var j = 0; j < _num; j++) {
  83. lastArr.push({
  84. min: _span * (_num - j - 1),
  85. max: _span * (_num - j),
  86. label: (_span * (_num - j - 1) / unitSpan) + company + "-" + (_span * (_num - j) / unitSpan) + company
  87. })
  88. }
  89. }
  90. return lastArr;
  91. },
  92. closeLineHeight(index) {
  93. var that = this;
  94. if (index) that.lastIndex = index
  95. if (that.lastIndex === null) return
  96. that.chart.dispatchAction({ //把上一个高亮的取消掉
  97. type: 'downplay',
  98. seriesIndex: 0,
  99. dataIndex: that.lastIndex
  100. })
  101. },
  102. selectLineHeight(index){ //高亮某个区县 港北区--0 港南区--1 桂平市--2 平南县--3 覃塘区--4 //直接写死 顺序和guigang.js 的顺序一样
  103. var that =this;
  104. this.closeLineHeight();
  105. console.log
  106. this.config.data.map(function(v,i){
  107. console.log(v)
  108. console.log(index)
  109. if(v.name == index) {
  110. console.log(i)
  111. that.lastIndex =i
  112. }
  113. })
  114. // this.lastIndex = index;
  115. this.chart.dispatchAction({
  116. type: 'highlight',
  117. seriesIndex: 0,
  118. dataIndex: that.lastIndex
  119. })
  120. }
  121. },
  122. watch: {
  123. config: function (data) {
  124. if (data) {
  125. this.chart.setOption(this.setOption());
  126. if(data.index !== null)this.selectLineHeight(data.index)
  127. }
  128. }
  129. }
  130. })
  131. var defaults = {
  132. tooltip: {
  133. trigger: 'item',
  134. formatter: '{b}<br/>{c} (人次)'
  135. },
  136. series: [{
  137. type: 'map',
  138. mapType: '贵港', // 自定义扩展图表类型
  139. itemStyle: {
  140. normal: {
  141. label: {
  142. show: true,
  143. color: '#fff'
  144. },
  145. borderColor: '#fff',
  146. shadowColor: '#0355ab',
  147. shadowBlur: 10,
  148. shadowOffsetX: 10,
  149. shadowOffsetY: 10
  150. },
  151. emphasis: {
  152. label: {
  153. show: true,
  154. color: '#fff'
  155. },
  156. areaColor: '#00e9fa',
  157. }
  158. },
  159. data: [{
  160. name: '港北区',
  161. value: 20057.34
  162. },
  163. {
  164. name: '港南区',
  165. value: 15477.48
  166. },
  167. {
  168. name: '桂平市',
  169. value: 31686.1
  170. },
  171. {
  172. name: '平南县',
  173. value: 6992.6
  174. },
  175. {
  176. name: '覃塘区',
  177. value: 44045.49
  178. }
  179. ],
  180. selectedMode: 'single'
  181. }],
  182. }
  183. })()