|
|
@@ -0,0 +1,544 @@
|
|
|
+<template>
|
|
|
+ <div :style="styleObj">
|
|
|
+ <v-chart :options="options" autoresize/>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+<script>
|
|
|
+import echarts from 'echarts';
|
|
|
+
|
|
|
+let geoMap = {
|
|
|
+ '上海': '/assets/map/上海市.json',
|
|
|
+ '云南': '/assets/map/云南省.json',
|
|
|
+ '内蒙古': '/assets/map/内蒙古自治区.json',
|
|
|
+ '北京': '/assets/map/北京市.json',
|
|
|
+ '台湾': '/assets/map/台湾省.json',
|
|
|
+ '吉林': '/assets/map/吉林省.json',
|
|
|
+ '天津': '/assets/map/天津市.json',
|
|
|
+ '宁夏': '/assets/map/宁夏回族自治区.json',
|
|
|
+ '安徽': '/assets/map/安徽省.json',
|
|
|
+ '山东': '/assets/map/山东省.json',
|
|
|
+ '山西': '/assets/map/山西省.json',
|
|
|
+ '广东': '/assets/map/广东省.json',
|
|
|
+ '广西': '/assets/map/广西壮族自治区.json',
|
|
|
+ '新疆': '/assets/map/新疆维吾尔自治区.json',
|
|
|
+ '江苏': '/assets/map/江苏省.json',
|
|
|
+ '江西': '/assets/map/江西省.json',
|
|
|
+ '河北': '/assets/map/河北省.json',
|
|
|
+ '河南': '/assets/map/河南省.json',
|
|
|
+ '海南': '/assets/map/海南省.json',
|
|
|
+ '湖北': '/assets/map/湖北省.json',
|
|
|
+ '湖南': '/assets/map/湖南省.json',
|
|
|
+ '澳门': '/assets/map/澳门特别行政区.json',
|
|
|
+ '甘肃': '/assets/map/甘肃省.json',
|
|
|
+ '福建': '/assets/map/福建省.json',
|
|
|
+ '西藏': '/assets/map/西藏自治区.json',
|
|
|
+ '贵州': '/assets/map/贵州省.json',
|
|
|
+ '辽宁': '/assets/map/辽宁省.json',
|
|
|
+ '重庆': '/assets/map/重庆市.json',
|
|
|
+ '陕西': '/assets/map/陕西省.json',
|
|
|
+ '青海': '/assets/map/青海省.json',
|
|
|
+ '香港': '/assets/map/香港特别行政区.json',
|
|
|
+ '黑龙江': '/assets/map/黑龙江省.json',
|
|
|
+};
|
|
|
+export default {
|
|
|
+ name: 'allMap',
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ myCharts: null,
|
|
|
+ geo: {
|
|
|
+ map: "china",
|
|
|
+ show: true,
|
|
|
+ roam: false,
|
|
|
+ label: {
|
|
|
+ emphasis: {
|
|
|
+ show: false
|
|
|
+ }
|
|
|
+ },
|
|
|
+ layoutSize: "80%",
|
|
|
+ itemStyle: {
|
|
|
+ normal: {
|
|
|
+ borderColor: new echarts.graphic.LinearGradient(
|
|
|
+ 0,
|
|
|
+ 0,
|
|
|
+ 0,
|
|
|
+ 1,
|
|
|
+ [
|
|
|
+ {
|
|
|
+ offset: 0,
|
|
|
+ color: "#00F6FF"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ offset: 1,
|
|
|
+ color: "#53D9FF"
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ false
|
|
|
+ ),
|
|
|
+ borderWidth: 3,
|
|
|
+ shadowColor: "rgba(10,76,139,1)",
|
|
|
+ shadowOffsetY: 0,
|
|
|
+ shadowBlur: 60
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ series:[],
|
|
|
+ }
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ this.getGeoJson(100000)
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ getGeoJson(adcode) {
|
|
|
+ let that = this;
|
|
|
+ AMapUI.loadUI(["geo/DistrictExplorer"], DistrictExplorer => {
|
|
|
+ var districtExplorer = new DistrictExplorer();
|
|
|
+ districtExplorer.loadAreaNode(adcode, function (error, areaNode) {
|
|
|
+ if (error) {
|
|
|
+ console.error(error);
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ let Json = areaNode.getSubFeatures();
|
|
|
+ if (Json.length > 0) {
|
|
|
+ that.geoJson.features = Json;
|
|
|
+ } else if (Json.length === 0) {
|
|
|
+ that.geoJson.features = that.geoJson.features.filter(
|
|
|
+ item => item.properties.adcode == adcode
|
|
|
+ );
|
|
|
+ if (that.geoJson.features.length === 0) return;
|
|
|
+ }
|
|
|
+ that.getMapData();
|
|
|
+ });
|
|
|
+ });
|
|
|
+ },
|
|
|
+ //获取数据
|
|
|
+ getMapData() {
|
|
|
+ let mapData = {},
|
|
|
+ pointData = {},
|
|
|
+ sum = {}
|
|
|
+ this.timeTitle.forEach(item => {
|
|
|
+ mapData[item] = []
|
|
|
+ pointData[item] = []
|
|
|
+ sum[item] = 0
|
|
|
+ this.geoJson.features.forEach(j => {
|
|
|
+ let value = Math.random() * 3000
|
|
|
+ mapData[item].push({
|
|
|
+ name: j.properties.name,
|
|
|
+ value: value,
|
|
|
+ cityCode: j.properties.adcode
|
|
|
+ })
|
|
|
+ pointData[item].push({
|
|
|
+ name: j.properties.name,
|
|
|
+ value: [j.properties.center[0], j.properties.center[1], value],
|
|
|
+ cityCode: j.properties.adcode
|
|
|
+ })
|
|
|
+ sum[item] += value
|
|
|
+ })
|
|
|
+ mapData[item] = mapData[item].sort(function (a, b) {
|
|
|
+ return b.value - a.value
|
|
|
+ });
|
|
|
+ })
|
|
|
+ this.initEcharts(mapData, pointData, sum)
|
|
|
+ },
|
|
|
+ initEcharts(mapData, pointData, sum) {
|
|
|
+ this.myChart = echarts.init(this.$refs.allMap)
|
|
|
+ if (this.parentInfo.length === 1) {
|
|
|
+ echarts.registerMap('china', this.geoJson); //注册
|
|
|
+ } else {
|
|
|
+ echarts.registerMap('map', this.geoJson); //注册
|
|
|
+ }
|
|
|
+ var option = {
|
|
|
+ timeline: {
|
|
|
+ data: this.timeTitle,
|
|
|
+ axisType: 'category',
|
|
|
+ autoPlay: true,
|
|
|
+ playInterval: 3000,
|
|
|
+ left: '10%',
|
|
|
+ right: '10%',
|
|
|
+ bottom: '2%',
|
|
|
+ width: '80%',
|
|
|
+ label: {
|
|
|
+ normal: {
|
|
|
+ textStyle: {
|
|
|
+ color: 'rgb(179, 239, 255)'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ emphasis: {
|
|
|
+ textStyle: {
|
|
|
+ color: '#fff'
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ symbolSize: 10,
|
|
|
+ lineStyle: {
|
|
|
+ color: '#8df4f4'
|
|
|
+ },
|
|
|
+ checkpointStyle: {
|
|
|
+ borderColor: '#8df4f4',
|
|
|
+ color: '#53D9FF',
|
|
|
+ borderWidth: 2,
|
|
|
+ },
|
|
|
+ controlStyle: {
|
|
|
+ showNextBtn: true,
|
|
|
+ showPrevBtn: true,
|
|
|
+ normal: {
|
|
|
+ color: '#53D9FF',
|
|
|
+ borderColor: '#53D9FF'
|
|
|
+ },
|
|
|
+ emphasis: {
|
|
|
+ color: 'rgb(58,115,192)',
|
|
|
+ borderColor: 'rgb(58,115,192)'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ },
|
|
|
+ baseOption: {
|
|
|
+ animation: true,
|
|
|
+ animationDuration: 900,
|
|
|
+ animationEasing: 'cubicInOut',
|
|
|
+ animationDurationUpdate: 900,
|
|
|
+ animationEasingUpdate: 'cubicInOut',
|
|
|
+ tooltip: {
|
|
|
+ trigger: 'axis',
|
|
|
+ axisPointer: {
|
|
|
+ type: 'shadow'
|
|
|
+ },
|
|
|
+ },
|
|
|
+ grid: {
|
|
|
+ right: '2%',
|
|
|
+ top: '12%',
|
|
|
+ bottom: '8%',
|
|
|
+ width: '20%'
|
|
|
+ },
|
|
|
+ toolbox: {
|
|
|
+ feature: {
|
|
|
+ restore: {
|
|
|
+ show: false
|
|
|
+ },
|
|
|
+ dataView: {
|
|
|
+ optionToContent: function (opt) {
|
|
|
+ let series = opt.series[0].data //折线图数据
|
|
|
+ let tdHeads =
|
|
|
+ '<th style="padding: 0 20px">所在地区</th><th style="padding: 0 20px">销售额</th>' //表头
|
|
|
+ let tdBodys = '' //数据
|
|
|
+ let table =
|
|
|
+ `<table border="1" style="margin-left:20px;border-collapse:collapse;font-size:14px;text-align:left;"><tbody><tr>${tdHeads} </tr>`
|
|
|
+ for (let i = 0; i < series.length; i++) {
|
|
|
+ table += `<tr>
|
|
|
+ <td style="padding: 0 50px">${series[i].name}</td>
|
|
|
+ <td style="padding: 0 50px">${series[i].value.toFixed(2)}万</td>
|
|
|
+ </tr>`
|
|
|
+ }
|
|
|
+ table += '</tbody></table>'
|
|
|
+ return table
|
|
|
+ }
|
|
|
+ },
|
|
|
+ saveAsImage: {
|
|
|
+ name: this.parentInfo[this.parentInfo.length - 1].cityName + '销售额统计图'
|
|
|
+ },
|
|
|
+ dataZoom: {
|
|
|
+ show: false
|
|
|
+ },
|
|
|
+ magicType: {
|
|
|
+ show: false
|
|
|
+ }
|
|
|
+ },
|
|
|
+ iconStyle: {
|
|
|
+ normal: {
|
|
|
+ borderColor: '#1990DA'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ top: 15,
|
|
|
+ right: 35
|
|
|
+ },
|
|
|
+ geo: {
|
|
|
+ map: this.parentInfo.length === 1 ? 'china' : 'map',
|
|
|
+ zoom: 1.1,
|
|
|
+ roam: true,
|
|
|
+ center: this.parentInfo.length === 1 ? ['118.83531246', '32.0267395887'] : false,
|
|
|
+ tooltip: {
|
|
|
+ trigger: 'item',
|
|
|
+ formatter: (p) => {
|
|
|
+ let val = p.value[2];
|
|
|
+ if (window.isNaN(val)) {
|
|
|
+ val = 0;
|
|
|
+ }
|
|
|
+ let txtCon =
|
|
|
+ "<div style='text-align:left'>" + p.name + ":<br />销售额：" + val.toFixed(
|
|
|
+ 2) + '万</div>';
|
|
|
+ return txtCon;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ label: {
|
|
|
+ normal: {
|
|
|
+ show: true,
|
|
|
+ color: "rgb(249, 249, 249)", //省份标签字体颜色
|
|
|
+ formatter: p => {
|
|
|
+ switch (p.name) {
|
|
|
+ case '内蒙古自治区':
|
|
|
+ p.name = "内蒙古"
|
|
|
+ break;
|
|
|
+ case '西藏自治区':
|
|
|
+ p.name = "西藏"
|
|
|
+ break;
|
|
|
+ case '新疆维吾尔自治区':
|
|
|
+ p.name = "新疆"
|
|
|
+ break;
|
|
|
+ case '宁夏回族自治区':
|
|
|
+ p.name = "宁夏"
|
|
|
+ break;
|
|
|
+ case '广西壮族自治区':
|
|
|
+ p.name = "广西"
|
|
|
+ break;
|
|
|
+ case '香港特别行政区':
|
|
|
+ p.name = "香港"
|
|
|
+ break;
|
|
|
+ case '澳门特别行政区':
|
|
|
+ p.name = "澳门"
|
|
|
+ break;
|
|
|
+ default:
|
|
|
+ break;
|
|
|
+ }
|
|
|
+ return p.name;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ emphasis: {
|
|
|
+ show: true,
|
|
|
+ color: '#f75a00',
|
|
|
+ }
|
|
|
+ },
|
|
|
+ itemStyle: {
|
|
|
+ normal: {
|
|
|
+ areaColor: '#24CFF4',
|
|
|
+ borderColor: '#53D9FF',
|
|
|
+ borderWidth: 1.3,
|
|
|
+ shadowBlur: 15,
|
|
|
+ shadowColor: 'rgb(58,115,192)',
|
|
|
+ shadowOffsetX: 7,
|
|
|
+ shadowOffsetY: 6,
|
|
|
+ },
|
|
|
+ emphasis: {
|
|
|
+ areaColor: '#8dd7fc',
|
|
|
+ borderWidth: 1.6,
|
|
|
+ shadowBlur: 25,
|
|
|
+ }
|
|
|
+ },
|
|
|
+ },
|
|
|
+ },
|
|
|
+ options: []
|
|
|
+ }
|
|
|
+ this.timeTitle.forEach(item => {
|
|
|
+ var xData = [],
|
|
|
+ yData = []
|
|
|
+ var min = mapData[item][mapData[item].length - 1].value
|
|
|
+ var max = mapData[item][0].value
|
|
|
+ if (mapData[item].length === 1) {
|
|
|
+ min = 0
|
|
|
+ }
|
|
|
+ mapData[item].forEach(c => {
|
|
|
+ xData.unshift(c.name)
|
|
|
+ yData.unshift(c.value)
|
|
|
+ })
|
|
|
+ option.options.push({
|
|
|
+ title: [{
|
|
|
+ left: 'center',
|
|
|
+ top: 10,
|
|
|
+ text: item + this.parentInfo[this.parentInfo.length - 1].cityName +
|
|
|
+ '年' +
|
|
|
+ '销售额统计图(可点击下钻到县)',
|
|
|
+ textStyle: {
|
|
|
+ color: 'rgb(179, 239, 255)',
|
|
|
+ fontSize: 16
|
|
|
+ },
|
|
|
+ },
|
|
|
+ {
|
|
|
+ text: "销售总额：" + sum[item].toFixed(2) + '万',
|
|
|
+ left: 'center',
|
|
|
+ top: '6.5%',
|
|
|
+ textStyle: {
|
|
|
+ color: '#FFAC50',
|
|
|
+ fontSize: 26
|
|
|
+ }
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ visualMap: {
|
|
|
+ min: min,
|
|
|
+ max: max,
|
|
|
+ left: '3%',
|
|
|
+ bottom: '5%',
|
|
|
+ calculable: true,
|
|
|
+ seriesIndex: [0],
|
|
|
+ inRange: {
|
|
|
+ color: ['#24CFF4', '#2E98CA', '#1E62AC']
|
|
|
+ },
|
|
|
+ textStyle: {
|
|
|
+ color: '#24CFF4'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ xAxis: {
|
|
|
+ type: 'value',
|
|
|
+ scale: true,
|
|
|
+ position: 'top',
|
|
|
+ boundaryGap: false,
|
|
|
+ splitLine: {
|
|
|
+ show: false
|
|
|
+ },
|
|
|
+ axisLine: {
|
|
|
+ show: true,
|
|
|
+ lineStyle: {
|
|
|
+ color: '#455B77'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ axisTick: {
|
|
|
+ show: false
|
|
|
+ },
|
|
|
+ axisLabel: {
|
|
|
+ margin: 2,
|
|
|
+ textStyle: {
|
|
|
+ fontSize: 12,
|
|
|
+ color: '#c0e6f9'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ },
|
|
|
+ yAxis: {
|
|
|
+ type: 'category',
|
|
|
+ nameGap: 16,
|
|
|
+ axisLine: {
|
|
|
+ show: true,
|
|
|
+ lineStyle: {
|
|
|
+ color: '#455B77'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ axisTick: {
|
|
|
+ show: false,
|
|
|
+ },
|
|
|
+ axisLabel: {
|
|
|
+ interval: 0,
|
|
|
+ textStyle: {
|
|
|
+ color: '#c0e6f9'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ data: xData
|
|
|
+ },
|
|
|
+ series: [{
|
|
|
+ name: item + '销售额度',
|
|
|
+ type: 'map',
|
|
|
+ geoIndex: 0,
|
|
|
+ map: this.parentInfo.length === 1 ? 'china' : 'map',
|
|
|
+ roam: true,
|
|
|
+ zoom: 1.3,
|
|
|
+ tooltip: {
|
|
|
+ trigger: "item",
|
|
|
+ formatter: p => {
|
|
|
+ let val = p.value;
|
|
|
+ if (p.name == '南海诸岛') return
|
|
|
+ if (window.isNaN(val)) {
|
|
|
+ val = 0;
|
|
|
+ }
|
|
|
+ let txtCon =
|
|
|
+ "<div style='text-align:left'>" + p.name +
|
|
|
+ ":<br />销售额：" + val.toFixed(2) + '万</div>';
|
|
|
+ return txtCon;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ label: {
|
|
|
+ normal: {
|
|
|
+ show: false,
|
|
|
+ },
|
|
|
+ emphasis: {
|
|
|
+ show: false,
|
|
|
+ }
|
|
|
+ },
|
|
|
+ data: mapData[item],
|
|
|
+ }, {
|
|
|
+ name: '散点',
|
|
|
+ type: 'effectScatter',
|
|
|
+ coordinateSystem: 'geo',
|
|
|
+ rippleEffect: {
|
|
|
+ brushType: 'fill'
|
|
|
+ },
|
|
|
+ itemStyle: {
|
|
|
+ normal: {
|
|
|
+ color: '#F4E925',
|
|
|
+ shadowBlur: 10,
|
|
|
+ shadowColor: '#333'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ data: pointData[item],
|
|
|
+ // symbolSize: 8,
|
|
|
+ symbolSize: function (val) {
|
|
|
+ let value = val[2]
|
|
|
+ if (value == max) {
|
|
|
+ return 27
|
|
|
+ }
|
|
|
+ return 10
|
|
|
+ },
|
|
|
+ showEffectOn: 'render', //加载完毕显示特效
|
|
|
+ },
|
|
|
+ {
|
|
|
+ type: 'bar',
|
|
|
+ barGap: '-100%',
|
|
|
+ barCategoryGap: '55%',
|
|
|
+ itemStyle: {
|
|
|
+ normal: {
|
|
|
+ barBorderRadius: 30,
|
|
|
+ color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
|
|
|
+ offset: 0,
|
|
|
+ color: 'rgb(57,89,255,1)'
|
|
|
+ }, {
|
|
|
+ offset: 1,
|
|
|
+ color: 'rgb(46,200,207,1)'
|
|
|
+ }]),
|
|
|
+ },
|
|
|
+ emphasis: {
|
|
|
+ show: false
|
|
|
+ }
|
|
|
+ },
|
|
|
+ data: yData
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ })
|
|
|
+ })
|
|
|
+ this.myChart.setOption(option, true)
|
|
|
+ this.myChart.off('click');
|
|
|
+ this.myChart.on('click', this.echartsMapClick);
|
|
|
+ },
|
|
|
+ //点击下钻
|
|
|
+ echartsMapClick(params) {
|
|
|
+ if (!params.data) {
|
|
|
+ return
|
|
|
+ }
|
|
|
+ if (
|
|
|
+ this.parentInfo[this.parentInfo.length - 1].code ==
|
|
|
+ params.data.cityCode
|
|
|
+ ) {
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ let data = params.data;
|
|
|
+ this.parentInfo.push({
|
|
|
+ cityName: data.name,
|
|
|
+ code: data.cityCode
|
|
|
+ });
|
|
|
+ this.getGeoJson(data.cityCode);
|
|
|
+ },
|
|
|
+ //选择切换市县
|
|
|
+ chooseArea(val, index) {
|
|
|
+ if (this.parentInfo.length === index + 1) {
|
|
|
+ return
|
|
|
+ }
|
|
|
+ this.parentInfo.splice(index + 1)
|
|
|
+ this.getGeoJson(this.parentInfo[this.parentInfo.length - 1].code);
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</script>
|
|
|
+<style lang="scss" scoped>
|
|
|
+.echartMap {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+}
|
|
|
+
|
|
|
+.echarts {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ overflow: hidden;
|
|
|
+}
|
|
|
+</style>
|
qianming