可视化数据大屏echarts地图省份地区绘制并轮播切换地区数据

可视化数据大屏echarts地图省份地区绘制并轮播切换地区数据

公司大屏项目要求中间显示重庆几大区地图，并根据请求实时更新数据，并且每个区会根据数据人数多少改变颜色和浮动框的内容 实现效果如下

methods: {// 地图自定义 tooltip formattertooltipDom(params) {let data = params.data;// var res ='
环比：'+data.value +'C1'+ data.value2+'C2'+data.value3+'C3'+data.value4;let res = `<div class='titlebox' style='position: relative; width: 300px; height: 110px;background: rgba(5, 12, 15, 0.6);border: 1px solid rgba(4,242,161,0.46); border-radius:10px;'><div class='tooltitle' style='margin:0 auto; width: 129px;height: 32px; line-height:32px;text-align:center; font-size:16px; text-shadow: 0px 0px 8px #d5ffe7; color: #d5ffe7; background: url("/images/echarttooltilte.png") no-repeat top center;'><span>${data.name}<span></div><div class='contList' style='font-size:16px; margin-top:12px; display: flex; padding: 0 30px; justify-content: space-around;'><div><div style='color: #76c9ef; margin-bottom: 8px; font-size:12px;'>总学员数</div>${data.value}</div><div><div style='color: #76c9ef; margin-bottom: 8px; font-size:12px;'>C1数</div>${data.value1}</div><div><div style='color: #76c9ef; margin-bottom: 8px; font-size:12px;'>C2数</div>${data.value2}</div><div><div style='color: #76c9ef; margin-bottom: 8px; font-size:12px;'>B2数</div>${data.value3}</div></div><div style='position: absolute; bottom: -20px; left:46%; width:27px ;height:20px; background: url("/images/tooltiparrow.png") no-repeat top center;'></div> </div>`;return res;},// 初始化地图initMap() {let tooltipDom = this.tooltipDom;let myChart = this.$echart.init(document.getElementById("cq-map"));this.myChart = myChart;myChart.showLoading({text: "loading",color: "#c23531",textColor: "#fff",maskColor: "rgba(255, 255, 255, 0)",fontSize: "18px"});this.$http.get("/data/screen/mapDate").then(res => {if (res.success) {let data = res.data;let colorArr = [this.getAreaColor(data[0].totalNum), // 渝中区this.getAreaColor(data[1].totalNum), // 大渡口区this.getAreaColor(data[3].totalNum), // 沙坪坝区this.getAreaColor(data[2].totalNum), // 江北区this.getAreaColor(data[5].totalNum), // 南岸区this.getAreaColor(data[4].totalNum), // 九龙坡区this.getAreaColor(data[6].totalNum), // 北碚区this.getAreaColor(data[7].totalNum), // 渝北区this.getAreaColor(data[8].totalNum) // 巴南区];myChart.hideLoading();this.$echart.registerMap("重庆", areaJson);let optionData = {tooltip: {trigger: "item",triggerOn: "mousemove", // 不在 'mousemove' 或 'click' 时触发，用户可以通过 action.tooltip.showTip 和 action.tooltip.hideTip 来手动触发和隐藏。也可以通过 axisPointer.handle 来触发或隐藏。appendToBody: true, //是否将 tooltip 的 DOM 节点添加为 HTML 的  的子节点padding: 0,formatter: function(params) {return tooltipDom(params);}},series: [{type: "map",map: "重庆",zoom: 1.2, // 缩放比例aspectScale: 0.9, // 宽高比itemStyle: {areaColor: "rgba(5, 12, 15, 0.5)", // 全局显示区域背景色borderWidth: 2 // 全局显示区域边线宽度},label: {show: true, // 全局开启显示区域内文字position: "inside", // 全局区域内文字位置color: "#fff", // 全局区域内文字颜色fontSize: 14},emphasis: {label: {color: "#fff" // 全局选中是区域内文字颜色}},data: [{name: "渝中区", // 对应省市区json 地区properties.namevalue: data[0].totalNum, // tooltip.formatter(parmas) 自定义parmas的参数parmas.data.valuevalue1: data[0].coneNum, // tooltip.formatter(parmas) 自定义parmas的参数parmas.data.value1value2: data[0].ctwoNum, // tooltip.formatter(parmas) 自定义parmas的参数parmas.data.value2value3: data[0].btwoNum, // tooltip.formatter(parmas) 自定义parmas的参数parmas.data.value3itemStyle: {borderColor: colorArr[0], // 该地区边线颜色opacity: 1},tooltip: {position: "top" // tooltip提示框的具体位置},emphasis: {itemStyle: {areaColor: colorArr[0] // 该地区选中的颜色}}},{name: "大渡口区",value: data[1].totalNum,value1: data[1].coneNum,value2: data[1].ctwoNum,value3: data[1].btwoNum,itemStyle: {borderColor: colorArr[1],opacity: 0.9},tooltip: {position: ["12%", "52%"]},emphasis: {itemStyle: {areaColor: colorArr[1]}}},{name: "沙坪坝区",value: data[3].totalNum,value1: data[3].coneNum,value2: data[3].ctwoNum,value3: data[3].btwoNum,itemStyle: {borderColor: colorArr[2],opacity: 0.9},tooltip: {position: ["6%", "30%"]},emphasis: {itemStyle: {areaColor: colorArr[2]}}},{name: "江北区",value: data[2].totalNum,value1: data[2].coneNum,value2: data[2].ctwoNum,value3: data[2].btwoNum,itemStyle: {borderColor: colorArr[3],opacity: 0.9},tooltip: {position: ["36%", "30%"]},emphasis: {itemStyle: {areaColor: colorArr[3]}}},{name: "南岸区",value: data[5].totalNum,value1: data[5].coneNum,value2: data[5].ctwoNum,value3: data[5].btwoNum,itemStyle: {borderColor: colorArr[4],opacity: 0.9},tooltip: {position: ["32%", "40%"]},emphasis: {itemStyle: {areaColor: colorArr[4]}}},{name: "九龙坡区",value: data[4].totalNum,value1: data[4].coneNum,value2: data[4].ctwoNum,value3: data[4].btwoNum,itemStyle: {borderColor: colorArr[5],opacity: 0.9},tooltip: {position: ["6%", "50%"]},emphasis: {itemStyle: {areaColor: colorArr[5]}}},{name: "北碚区",value: data[6].totalNum,value1: data[6].coneNum,value2: data[6].ctwoNum,value3: data[6].btwoNum,itemStyle: {borderColor: colorArr[6],opacity: 0.9},tooltip: {position: ["16%", "10%"]},emphasis: {itemStyle: {areaColor: colorArr[6]}}},{name: "渝北区",value: data[7].totalNum,value1: data[7].coneNum,value2: data[7].ctwoNum,value3: data[7].btwoNum,itemStyle: {borderColor: colorArr[7],opacity: 0.9},tooltip: {position: ["38%", "14%"]},emphasis: {itemStyle: {areaColor: colorArr[7]}}},{name: "巴南区",value: data[8].totalNum,value1: data[8].coneNum,value2: data[8].ctwoNum,value3: data[8].btwoNum,itemStyle: {borderColor: colorArr[8],opacity: 0.9},tooltip: {position: "inside"},emphasis: {itemStyle: {areaColor: colorArr[8]}}}]}]};myChart.setOption(optionData);// 地区区域自动切换let areaIndex = this.areaIndex;this.areaIndex++;// 显示选中区域学员信息myChart.dispatchAction({type: "showTip",seriesIndex: 0, // 显示第几个seriesdataIndex: areaIndex // 显示第几个数据});myChart.dispatchAction({type: "mapSelect",dataIndex: areaIndex // 显示第几个数据});}});},// 根据学员人数返回颜色getAreaColor(num) {let maplegendColors = this.maplegendColors;if (num >= 20000) {// 学员大于20000return maplegendColors[0];} else if (num >= 15000 && num < 20000) {// 学员大于等于15000小于20000return maplegendColors[1];} else if (num >= 10000 && num < 15000) {// 学员大于等于10000小于15000return maplegendColors[2];} else if (num >= 5000 && num < 10000) {// 学员大于等于5000小于10000return maplegendColors[3];} else if (num >= 2000 && num < 5000) {// 学员大于等于2000小于5000return maplegendColors[4];} else {return maplegendColors[5];}},// 刷新地图refreshMap() {let myChart = this.myChart;if (this.myChart) {this.$http.get("/data/screen/mapDate").then(res => {if (res.success) {let data = res.data;let selectAreaIndex = this.selectAreaIndex; // 选中地图的indexlet colorArr = [this.getAreaColor(data[0].totalNum), // 渝中区this.getAreaColor(data[1].totalNum), // 大渡口区this.getAreaColor(data[3].totalNum), // 沙坪坝区this.getAreaColor(data[2].totalNum), // 江北区this.getAreaColor(data[5].totalNum), // 南岸区this.getAreaColor(data[4].totalNum), // 九龙坡区this.getAreaColor(data[6].totalNum), // 北碚区this.getAreaColor(data[7].totalNum), // 渝北区this.getAreaColor(data[8].totalNum) // 巴南区];let optionData = {series: [{type: "map",map: "重庆",zoom: 1.2, // 缩放比例aspectScale: 0.9, // 宽高比itemStyle: {areaColor: "rgba(5, 12, 15, 0.5)", // 全局显示区域背景色borderWidth: 2 // 全局显示区域边线宽度},label: {show: true, // 全局开启显示区域内文字position: "inside", // 全局区域内文字位置color: "#fff", // 全局区域内文字颜色fontSize: 14},emphasis: {label: {color: "#fff" // 全局选中是区域内文字颜色}},data: [{name: "渝中区", // 对应省市区json 地区properties.namevalue: data[0].totalNum, // tooltip.formatter(parmas) 自定义parmas的参数parmas.data.valuevalue1: data[0].coneNum, // tooltip.formatter(parmas) 自定义parmas的参数parmas.data.value1value2: data[0].ctwoNum, // tooltip.formatter(parmas) 自定义parmas的参数parmas.data.value2value3: data[0].btwoNum, // tooltip.formatter(parmas) 自定义parmas的参数parmas.data.value3itemStyle: {borderColor: colorArr[0], // 该地区边线颜色opacity: 1},tooltip: {position: "top" // tooltip提示框的具体位置},emphasis: {itemStyle: {areaColor: colorArr[0] // 该地区选中的颜色}}},{name: "大渡口区",value: data[1].totalNum,value1: data[1].coneNum,value2: data[1].ctwoNum,value3: data[1].btwoNum,itemStyle: {borderColor: colorArr[1],opacity: 0.9},tooltip: {position: ["12%", "52%"]},emphasis: {itemStyle: {areaColor: colorArr[1]}}},{name: "沙坪坝区",value: data[3].totalNum,value1: data[3].coneNum,value2: data[3].ctwoNum,value3: data[3].btwoNum,itemStyle: {borderColor: colorArr[2],opacity: 0.9},tooltip: {position: ["6%", "30%"]},emphasis: {itemStyle: {areaColor: colorArr[2]}}},{name: "江北区",value: data[2].totalNum,value1: data[2].coneNum,value2: data[2].ctwoNum,value3: data[2].btwoNum,itemStyle: {borderColor: colorArr[3],opacity: 0.9},tooltip: {position: ["36%", "30%"]},emphasis: {itemStyle: {areaColor: colorArr[3]}}},{name: "南岸区",value: data[5].totalNum,value1: data[5].coneNum,value2: data[5].ctwoNum,value3: data[5].btwoNum,itemStyle: {borderColor: colorArr[4],opacity: 0.9},tooltip: {position: ["32%", "40%"]},emphasis: {itemStyle: {areaColor: colorArr[4]}}},{name: "九龙坡区",value: data[4].totalNum,value1: data[4].coneNum,value2: data[4].ctwoNum,value3: data[4].btwoNum,itemStyle: {borderColor: colorArr[5],opacity: 0.9},tooltip: {position: ["6%", "50%"]},emphasis: {itemStyle: {areaColor: colorArr[5]}}},{name: "北碚区",value: data[6].totalNum,value1: data[6].coneNum,value2: data[6].ctwoNum,value3: data[6].btwoNum,itemStyle: {borderColor: colorArr[6],opacity: 0.9},tooltip: {position: ["16%", "10%"]},emphasis: {itemStyle: {areaColor: colorArr[6]}}},{name: "渝北区",value: data[7].totalNum,value1: data[7].coneNum,value2: data[7].ctwoNum,value3: data[7].btwoNum,itemStyle: {borderColor: colorArr[7],opacity: 0.9},tooltip: {position: ["38%", "14%"]},emphasis: {itemStyle: {areaColor: colorArr[7]}}},{name: "巴南区",value: data[8].totalNum,value1: data[8].coneNum,value2: data[8].ctwoNum,value3: data[8].btwoNum,itemStyle: {borderColor: colorArr[8],opacity: 0.9},tooltip: {position: "inside"},emphasis: {itemStyle: {areaColor: colorArr[8]}}}]}]};optionData.series[0].data[selectAreaIndex].selected = true;myChart.setOption(optionData);// 关闭上一个选中区域学员信息myChart.dispatchAction({type: "hideTip"});// 显示选中区域学员信息myChart.dispatchAction({type: "showTip",seriesIndex: 0, // 显示第几个seriesdataIndex: selectAreaIndex // 显示第几个数据});}});}},// 地区区域自动切换动画changeArea() {let myChart = this.myChart;if (this.myChart) {let areaIndex = this.areaIndex;let oldIndex = areaIndex - 1 < 0 ? 9 : areaIndex - 1;if (areaIndex > 8) {areaIndex = 0;}// 关闭上一个选中区域学员信息myChart.dispatchAction({type: "hideTip"});// 关闭上一个选中区域学员信息myChart.dispatchAction({type: "mapUnSelect",seriesIndex: 0, // 显示第几个seriesdataIndex: oldIndex // 显示第几个数据});// 显示选中区域学员信息myChart.dispatchAction({type: "showTip",seriesIndex: 0, // 显示第几个seriesdataIndex: areaIndex // 显示第几个数据});myChart.dispatchAction({type: "mapSelect",dataIndex: areaIndex // 显示第几个数据});this.selectAreaIndex = areaIndex;let index = areaIndex+1;this.areaIndex = index;}},}  

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！