赞
踩
- function getEcharts(end_obj,pointsdata,linedata){
- // Step:3 conifg ECharts's path, link to echarts.js from current page.
- // Step:3 为模块加载器配置echarts的路径,从当前页面链接到echarts.js,定义所需图表路径
- require.config({
- paths: {
- echarts: './js'
- }
- });
-
- // Step:4 require echarts and use it in the callback.
- // Step:4 动态加载echarts然后在回调函数中开始使用,注意保持按需加载结构定义图表路径
- require(
- [
- 'echarts',
- 'echarts/chart/map'
- ],
- function (ec) {
- // --- 地图 ---
- var myChart2 = ec.init(document.getElementById('mapcontainer'));
- myChart2.setOption({
- title : {
- text: '',
- subtext: '',
- left: 'center',
- textStyle : {
- color: '#fff'
- }
- },
- tooltip : {
- trigger: 'axis',
- backgroundColor: 'rgba(0,0,0,.6)',
- padding: 14,
- textStyle:{
- color:'#fff'
- },
- fontSize: 12,
- lineHeight:20
- },
-
- dataRange: {
- /*min :min,
- max:max,*/
- calculable : false,
- //splitList控制线与点的颜色,start意思是大于等于,end是小于等于,当满足条件时可以改变颜色,这里是通过linedata与pointsdata,来改变的
- splitList: [
- {start: 6, color:'2a2a2a'},
- {start: 4, end: 5,color:'#fa9c08'},
- {start: 3, end: 3,color:'#fc0c38'},
- {start: 2, end: 2,color:'#f1ff0e'},
- {start: 1, end: 1,color:'#39f60e'},
- {start: 0, end: 0,color:'#d0d0d0'},
- ],
-
- // color: ['#ff3333','#0af08c'], 如果不加splitList,也可以通过color,但是必须得有max,与min
- x: '',
- show: false,
- textStyle:{
- color:'#fff'
- }
- },
- layoutCenter: ['50%', '50%'],
- series : [
- {
- name: '湖南\n\n',
- type: 'map',
- roam: false,
- hoverable: true,
- clickable:true,
- mapType: '湖南',
-
- data:end_obj,
- //这是鼠标悬停的时候的数据
- tooltip : {
-
- trigger: 'item',
- formatter: function (params){
- var chityname = params.name;
- if(end_obj!=null){
- for(var i=0;i<end_obj.length;i++){
- if(chityname.indexOf(end_obj[i].name)!=-1){
- return(`${chityname}<br>
- 站点数量:${end_obj[i].count}<br>
- 正常站点:${end_obj[i].good}<br>
- 告警站点:${end_obj[i].fault}<br>`)
- }
- }
- }else{
- return chityname
- }
-
- },
- },
- itemStyle:{
- normal:{
- label:{
- show:true,
- textStyle: {
- color: 'rgba(255,255,255,0.7)',
- fontSize: 10
- }
- },
- borderColor:'rgba(104,183,239,0.7)',
- borderWidth:1,
- areaStyle:{
- color: 'rgba(104,183,239,0.2)'
- }
- },
- emphasis:{
- label:{
- show:true,
- textStyle: {
- color: 'rgba(255,255,255,1)',
- fontSize: 14
- }
- },
- areaStyle:{
- color:'rgba(0,0,0,0.6)'
- }
- }
-
- },
-
- markLine : {
- smooth:true,
- symbol: ['none', 'circle'],
-
- symbolSize : 1,
- itemStyle : {
- normal: {
- color:'#fff',
- borderWidth:1,
- borderColor:'rgba(30,144,255,0.5)'
- }
- },
- data : [
- ],
- },
- geoCoord: {
- '长沙': [112.93,28.23],
- '株洲': [113.13,27.83],
- '湘潭': [112.93,27.83],
- '衡阳': [112.57,26.90],
- '邵阳': [111.47,27.25],
- '岳阳': [113.12,29.37],
- '常德': [111.68,29.05],
- '张家界': [110.47,29.13],
- '益阳': [112.32,28.60],
- '郴州': [113.02,25.78],
- '永州': [111.62,26.43],
- '怀化': [110.00,27.57],
- '娄底': [112.00,27.73],
- '湘西土家族苗族自治州': [109.73,28.32]
- },
- markPoint : {
- symbol:'emptyCircle',
- symbolSize : function (v){
- return 10 + 2*v
- },
- effect : {
- show: true,
- shadowBlur : 1
- },
- itemStyle:{
- normal:{
- label:{show:true}
- },
- emphasis: {
- label:{position:'bottom'}
- }
- },
- data : pointsdata
- // 这是点的数据格式是[{name:'长沙',value:2},{name:'郴州',value:1}]
- }
- },
- {
- name: '',
- type: 'map',
- mapType: '湖南',
- data:[],
- markLine : {
- smooth:true,
- effect : {
- show: true,
- scaleSize: 2,
- period: 15,
- color: 'rgba(255,255,255,0.7)',
- shadowBlur: 5
- },
- itemStyle : {
- normal: {
- label:{
- show:false,
- color: '#333333',
- formatter: '{b}'
- },
- silent:true,
- borderWidth:1,
- lineStyle: {
- type: 'solid',
- shadowBlur: 3
-
- },
-
- },
- emphasis: {
- label:{show:false}
- }
- },
-
- data : linedata,
- // 这是线的数据格式是[[{name:'长沙'},{name:'郴州',value:1}],[{name:'长沙'},{name:'邵阳',value:1}]]
-
- },
-
- }
- ]
- });
-
- window.addEventListener("resize",function(){
- myChart2.resize();
- })
-
-
-
- });
- }
- // 有时候地图点的位置混乱了,如果定位没错的话,linedata 中的{name:'长沙'}的name要和地理位置中的一致对
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。