当前位置:   article > 正文

echarts--map ,地图显示、通过dataRange 动态改变地图上线的颜色,还没实践_echarts datarange

echarts datarange
  1. function getEcharts(end_obj,pointsdata,linedata){
  2. // Step:3 conifg ECharts's path, link to echarts.js from current page.
  3. // Step:3 为模块加载器配置echarts的路径,从当前页面链接到echarts.js,定义所需图表路径
  4. require.config({
  5. paths: {
  6. echarts: './js'
  7. }
  8. });
  9. // Step:4 require echarts and use it in the callback.
  10. // Step:4 动态加载echarts然后在回调函数中开始使用,注意保持按需加载结构定义图表路径
  11. require(
  12. [
  13. 'echarts',
  14. 'echarts/chart/map'
  15. ],
  16. function (ec) {
  17. // --- 地图 ---
  18. var myChart2 = ec.init(document.getElementById('mapcontainer'));
  19. myChart2.setOption({
  20. title : {
  21. text: '',
  22. subtext: '',
  23. left: 'center',
  24. textStyle : {
  25. color: '#fff'
  26. }
  27. },
  28. tooltip : {
  29. trigger: 'axis',
  30. backgroundColor: 'rgba(0,0,0,.6)',
  31. padding: 14,
  32. textStyle:{
  33. color:'#fff'
  34. },
  35. fontSize: 12,
  36. lineHeight:20
  37. },
  38. dataRange: {
  39. /*min :min,
  40. max:max,*/
  41. calculable : false,
  42. //splitList控制线与点的颜色,start意思是大于等于,end是小于等于,当满足条件时可以改变颜色,这里是通过linedata与pointsdata,来改变的
  43. splitList: [
  44. {start: 6, color:'2a2a2a'},
  45. {start: 4, end: 5,color:'#fa9c08'},
  46. {start: 3, end: 3,color:'#fc0c38'},
  47. {start: 2, end: 2,color:'#f1ff0e'},
  48. {start: 1, end: 1,color:'#39f60e'},
  49. {start: 0, end: 0,color:'#d0d0d0'},
  50. ],
  51. // color: ['#ff3333','#0af08c'], 如果不加splitList,也可以通过color,但是必须得有max,与min
  52. x: '',
  53. show: false,
  54. textStyle:{
  55. color:'#fff'
  56. }
  57. },
  58. layoutCenter: ['50%', '50%'],
  59. series : [
  60. {
  61. name: '湖南\n\n',
  62. type: 'map',
  63. roam: false,
  64. hoverable: true,
  65. clickable:true,
  66. mapType: '湖南',
  67. data:end_obj,
  68. //这是鼠标悬停的时候的数据
  69. tooltip : {
  70. trigger: 'item',
  71. formatter: function (params){
  72. var chityname = params.name;
  73. if(end_obj!=null){
  74. for(var i=0;i<end_obj.length;i++){
  75. if(chityname.indexOf(end_obj[i].name)!=-1){
  76. return(`${chityname}<br>
  77. 站点数量:${end_obj[i].count}<br>
  78. 正常站点:${end_obj[i].good}<br>
  79. 告警站点:${end_obj[i].fault}<br>`)
  80. }
  81. }
  82. }else{
  83. return chityname
  84. }
  85. },
  86. },
  87. itemStyle:{
  88. normal:{
  89. label:{
  90. show:true,
  91. textStyle: {
  92. color: 'rgba(255,255,255,0.7)',
  93. fontSize: 10
  94. }
  95. },
  96. borderColor:'rgba(104,183,239,0.7)',
  97. borderWidth:1,
  98. areaStyle:{
  99. color: 'rgba(104,183,239,0.2)'
  100. }
  101. },
  102. emphasis:{
  103. label:{
  104. show:true,
  105. textStyle: {
  106. color: 'rgba(255,255,255,1)',
  107. fontSize: 14
  108. }
  109. },
  110. areaStyle:{
  111. color:'rgba(0,0,0,0.6)'
  112. }
  113. }
  114. },
  115. markLine : {
  116. smooth:true,
  117. symbol: ['none', 'circle'],
  118. symbolSize : 1,
  119. itemStyle : {
  120. normal: {
  121. color:'#fff',
  122. borderWidth:1,
  123. borderColor:'rgba(30,144,255,0.5)'
  124. }
  125. },
  126. data : [
  127. ],
  128. },
  129. geoCoord: {
  130. '长沙': [112.93,28.23],
  131. '株洲': [113.13,27.83],
  132. '湘潭': [112.93,27.83],
  133. '衡阳': [112.57,26.90],
  134. '邵阳': [111.47,27.25],
  135. '岳阳': [113.12,29.37],
  136. '常德': [111.68,29.05],
  137. '张家界': [110.47,29.13],
  138. '益阳': [112.32,28.60],
  139. '郴州': [113.02,25.78],
  140. '永州': [111.62,26.43],
  141. '怀化': [110.00,27.57],
  142. '娄底': [112.00,27.73],
  143. '湘西土家族苗族自治州': [109.73,28.32]
  144. },
  145. markPoint : {
  146. symbol:'emptyCircle',
  147. symbolSize : function (v){
  148. return 10 + 2*v
  149. },
  150. effect : {
  151. show: true,
  152. shadowBlur : 1
  153. },
  154. itemStyle:{
  155. normal:{
  156. label:{show:true}
  157. },
  158. emphasis: {
  159. label:{position:'bottom'}
  160. }
  161. },
  162. data : pointsdata
  163. // 这是点的数据格式是[{name:'长沙',value:2},{name:'郴州',value:1}]
  164. }
  165. },
  166. {
  167. name: '',
  168. type: 'map',
  169. mapType: '湖南',
  170. data:[],
  171. markLine : {
  172. smooth:true,
  173. effect : {
  174. show: true,
  175. scaleSize: 2,
  176. period: 15,
  177. color: 'rgba(255,255,255,0.7)',
  178. shadowBlur: 5
  179. },
  180. itemStyle : {
  181. normal: {
  182. label:{
  183. show:false,
  184. color: '#333333',
  185. formatter: '{b}'
  186. },
  187. silent:true,
  188. borderWidth:1,
  189. lineStyle: {
  190. type: 'solid',
  191. shadowBlur: 3
  192. },
  193. },
  194. emphasis: {
  195. label:{show:false}
  196. }
  197. },
  198. data : linedata,
  199. // 这是线的数据格式是[[{name:'长沙'},{name:'郴州',value:1}],[{name:'长沙'},{name:'邵阳',value:1}]]
  200. },
  201. }
  202. ]
  203. });
  204. window.addEventListener("resize",function(){
  205. myChart2.resize();
  206. })
  207. });
  208. }
  209. // 有时候地图点的位置混乱了,如果定位没错的话,linedata 中的{name:'长沙'}的name要和地理位置中的一致对
声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/从前慢现在也慢/article/detail/108702
推荐阅读