0
0

echarts 地图区域显示不同颜色笔记

  1. <template>
  2.   <div class="map">
  3.     <div class="map_chart" ref="map_chart"></div>
  4.   </div>
  5. </template>
  6.  
  7. <script>
  8. import axios from "axios";
  9. import {mapData} from '../utils/map'
  10. export default {
  11.   name: "Map",
  12.   data() {
  13.     return {
  14.       chartInstance: null,
  15.       allData: null,
  16.       mapData: {}, // 所获取的省份的地图矢量数据
  17.       dataList:[
  18.         {name: '庐阳区', value: 101},
  19.         {name: '肥东县', value: 101},
  20.         {name: '濉溪县', value: 101},
  21.         {name: '埇桥区', value: 18},
  22.         {name: '萧县', value: 101},
  23.         {name: '蚌山区', value: 101},
  24.         {name: '颍泉区', value: 101},
  25.         {name: '临泉县', value: 101},
  26.         {name: '太和县', value: 101},
  27.         {name: '舒城县', value: 101},
  28.         {name: '当涂县', value: 101},
  29.         {name: '南陵县', value: 101},
  30.         {name: '宣州区', value: 101},
  31.         {name: '郎溪县', value: 101},
  32.         {name: '广德市', value: 101},
  33.         {name: '泾县', value: 101},
  34.         {name: '休宁县', value: 101},
  35.       ],
  36.       nameStr:'庐阳区肥东县濉溪县埇桥区萧县蚌山区颍泉区临泉县太和县舒城县当涂县南陵县宣州区郎溪县广德市泾县休宁县'
  37.     };
  38.   },
  39.   created() {},
  40.   mounted() {
  41.     this.initChart();
  42.     window.addEventListener("resize", this.screenAdapter);
  43.   },
  44.   destroyed() {
  45.     window.removeEventListener("resize", this.screenAdapter);
  46.   },
  47.   methods: {
  48.     async initChart() {
  49.       this.chartInstance = this.$echarts.init(this.$refs.map_chart);
  50.       // 获取中国地图的矢量数据
  51.       // http://localhost:8999/static/map/china.json
  52.       // 由于我们现在获取的地图矢量数据并不是位于KOA2的后台, 所以咱们不能使用this.$http
  53.       this.$echarts.registerMap("anhui", mapData);
  54.       const initOption = {
  55.         // title: {
  56.         //   text: "▎ 公墓分布",
  57.         //   left: 20,
  58.         //   top: 20,
  59.         // },
  60.          toolbox: {
  61.             show: true,
  62.             feature: {
  63.                 saveAsImage: {
  64.                   show:true
  65.                 }
  66.             }
  67.         }, // 提供下载工具
  68.         // visualMap: {
  70.         //     min: 0,
  71.         //     max: 100000,
  72.         //     left: 26,
  73.         //     bottom: 40,
  74.         //     showLabel: !0,
  75.         //     // text: ["土葬", "智慧殡葬"],
  76.         //     pieces: [{
  77.         //         gte: 1,
  78.         //         lt: 100,
  79.         //         label: "土葬区",
  80.         //         color: "red",
  81.         //     }, {
  82.         //         gte: 100,
  83.         //         lt: 1000,
  84.         //         label: "土葬区",
  85.         //         color: "#ff3990",
  86.         //     },
  87.         //     {
  88.         //         gt: 1000,
  89.         //         lt: 10000,
  90.         //         label: "智慧殡葬",
  91.                 
  92.         //         color: "#f2d5ad"
  93.         //     }],
  94.         //     show: false
  95.         // },
  96.         geo: {
  97.           // type: "map",
  98.           map: "anhui",
  99.            //  默认设置完地图是固定死的不能拖动
  100.          // roam:true,//否开启鼠标缩放和平移漫游。默认不开启。
  101.           roam: 1,
  102.           //zoom :1,//当前视角的缩放比例。越大比例越大
  103.           // center:[108.956239,34.268309],//当前视角的中心点，用经纬度表示108.956239,34.268309
  104.           // label:{//地图上显示文字提示信息
  105.           //   show:true,
  106.           //   // color:"#ff6600",
  107.           //   fontSize:10//字体大小
  108.           // },
  109.           label: {
  110.             normal: {
  111.               // formatter:(params)=>{
  112.               //     console.log(params,'747')
  113.               //     // if(params.name=="庐阳区"||params.name=="肥东县"||params.name=="濉溪县"||params.name=="埇桥区"||params.name=="萧县"||params.name=="蚌山区"||params.name=="颍泉区"||params.name=="临泉县"||params.name=="太和县"||params.name=="舒城县"||params.name=="当涂县"||params.name=="南陵县"){
  114.               //     //   return params.name
  115.               //     // }else{
  116.               //     //   return ''
  117.               //     // }
  118.               //     if(this.nameStr.includes(params.name)){
  119.               //       return params.name
  120.               //     }else{
  121.               //       return ''
  122.               //     }
  123.               //   },
  124.                 show: !0,
  125.                 fontSize: "7",
  126.                 color: "#000"
  127.             }
  128.         },
  129.         itemStyle: {
  130.             normal: {
  131.                 areaColor: "#f2d5ad",
  132.                // areaColor: "#ff3940",
  133.                 //shadowBlur: 50,
  134.                 //shadowColor: 'rgba(0, 0, 0, 0.2)',
  135.                 borderColor: "rgba(0, 0, 0, 0.2)"
  136.             },
  137.             emphasis: {
  138.                 areaColor: "#ff6600",
  139.                 shadowOffsetX: 0,
  140.                 shadowOffsetY: 0,
  141.                 borderWidth: 0
  142.             }
  143.         }
  144.           // itemStyle:{//地图区域的多边形 图形样式。
  145.           //   areaColor:"#ff6600"//地图区域的颜色。
  146.           // }
  147.           // label: {
  148.           //   show: true,
  149.           //   color: "#1DE9B6",
  150.           // },
  152.         },
  153.         // legend: {
  154.         //   left: '5%',
  155.         //   bottom: '5%',
  156.         //   orient: 'vertical'
  157.         // },
  158.         series:[
  159.          {
  160.             name: "殡葬",
  161.             type: "map",
  162.             geoIndex: 0,
  163.             data: this.dataList
  164.         }
  165.          
  166.  
  167.         ]
  168.       };
  169.       this.chartInstance.setOption(initOption);
  170.       this.chartInstance.on("click", async (arg) => {
  171.         // arg.name 得到所点击的省份, 这个省份他是中文
  172.       });
  173.     },
  174.    
  175.   },
  176. };
  177. </script>
  178. <style scoped>
  179. .map {
  180.   width: 100%;
  181.   height: 100%;
  183. }
  184. .map_chart {
  185.   width: 600px;
  186.   height: 800px;
  187.   margin:0 auto;
  188. }
  189. </style>

  1. <template>
  2.   <div class="map">
  3.     <div class="map_chart" ref="map_chart"></div>
  4.   </div>
  5. </template>
  6.  
  7. <script>
  8. import axios from "axios";
  9. import {mapData} from '../utils/map'
  10. export default {
  11.   name: "Map",
  12.   data() {
  13.     return {
  14.       chartInstance: null,
  15.       allData: null,
  16.       mapData: {}, // 所获取的省份的地图矢量数据
  17.       dataList:[
  18.         {name: '金寨县', value: 18},
  19.         {name: '岳西县', value: 18},
  20.         {name: '旌德县', value: 18},
  21.         {name: '绩溪县', value: 18},
  22.         {name: '休宁县', value: 18},
  23.         {name: '歙县', value: 18},
  24.         {name: '黟县', value: 18},
  25.         {name: '祁门县', value: 18},
  26.         {name: '石台县', value: 18},
  27.         {name: '青阳县', value: 18},
  28.         {name: '东至县', value: 18},
  29.         {name: '黄山区', value: 18},
  30.       ],
  31.       names:['东至县','黄山区','金寨县','岳西县','旌德县','绩溪县','休宁县','歙县','黟县','祁门县','石台县','青阳县',]
  32.     };
  33.   },
  34.   created() {},
  35.   mounted() {
  36.     this.initChart();
  37.     window.addEventListener("resize", this.screenAdapter);
  38.   },
  39.   destroyed() {
  40.     window.removeEventListener("resize", this.screenAdapter);
  41.   },
  42.   methods: {
  43.     async initChart() {
  44.       this.chartInstance = this.$echarts.init(this.$refs.map_chart);
  45.       // 获取中国地图的矢量数据
  46.       // http://localhost:8999/static/map/china.json
  47.       // 由于我们现在获取的地图矢量数据并不是位于KOA2的后台, 所以咱们不能使用this.$http
  48.       this.$echarts.registerMap("anhui", mapData);
  49.       const initOption = {
  50.         // title: {
  51.         //   text: "▎ 公墓分布",
  52.         //   left: 20,
  53.         //   top: 20,
  54.         // },
  55.          toolbox: {
  56.             show: true,
  57.             feature: {
  58.                 saveAsImage: {
  59.                   show:true
  60.                 }
  61.             }
  62.         }, // 提供下载工具
  63.         visualMap: {
  65.             min: 0,
  66.             max: 100000,
  67.             left: 26,
  68.             bottom: 40,
  69.             showLabel: !0,
  70.             // text: ["土葬", "智慧殡葬"],
  71.             pieces: [{
  72.                 gte: 1,
  73.                 lt: 100,
  74.                 label: "土葬区",
  75.                 color: "#ff3940",
  76.             }, {
  77.                 gt: 100,
  78.                 lt: 1000,
  79.                 label: "智慧殡葬",
  80.                 
  81.                 color: "#f2d5ad"
  82.             }],
  83.             show: false
  84.         },
  85.         geo: {
  86.           // type: "map",
  87.           map: "anhui",
  88.            //  默认设置完地图是固定死的不能拖动
  89.          // roam:true,//否开启鼠标缩放和平移漫游。默认不开启。
  90.           roam: 1,
  91.           //zoom :1,//当前视角的缩放比例。越大比例越大
  92.           // center:[108.956239,34.268309],//当前视角的中心点，用经纬度表示108.956239,34.268309
  93.           // label:{//地图上显示文字提示信息
  94.           //   show:true,
  95.           //   // color:"#ff6600",
  96.           //   fontSize:10//字体大小
  97.           // },
  98.           label: {
  99.             normal: {
  100.               formatter:(params)=>{
  101.                   console.log(params,'747')
  102.                   if(params.name=="金寨县"||params.name=="岳西县"||params.name=="旌德县"||params.name=="绩溪县"||params.name=="休宁县"||params.name=="歙县"||params.name=="黟县"||params.name=="祁门县"||params.name=="石台县"||params.name=="青阳县"||params.name=="东至县"||params.name=="黄山区"){
  103.                     return params.name
  104.                   }else{
  105.                     return ''
  106.                   }
  107.                 },
  108.                 show: !0,
  109.                 fontSize: "11",
  110.                 color: "#000"
  111.             }
  112.         },
  113.         itemStyle: {
  114.             normal: {
  115.                 areaColor: "#f2d5ad",
  116.                // areaColor: "#ff3940",
  117.                 //shadowBlur: 50,
  118.                 //shadowColor: 'rgba(0, 0, 0, 0.2)',
  119.                 borderColor: "rgba(0, 0, 0, 0.2)"
  120.             },
  121.             emphasis: {
  122.                 areaColor: "#ff6600",
  123.                 shadowOffsetX: 0,
  124.                 shadowOffsetY: 0,
  125.                 borderWidth: 0
  126.             }
  127.         }
  128.           // itemStyle:{//地图区域的多边形 图形样式。
  129.           //   areaColor:"#ff6600"//地图区域的颜色。
  130.           // }
  131.           // label: {
  132.           //   show: true,
  133.           //   color: "#1DE9B6",
  134.           // },
  136.         },
  137.         // legend: {
  138.         //   left: '5%',
  139.         //   bottom: '5%',
  140.         //   orient: 'vertical'
  141.         // },
  142.         series:[
  143.          {
  144.             name: "殡葬",
  145.             type: "map",
  146.             geoIndex: 0,
  147.             data: this.dataList
  148.         }
  149.          
  150.  
  151.         ]
  152.       };
  153.       this.chartInstance.setOption(initOption);
  154.       this.chartInstance.on("click", async (arg) => {
  155.         // arg.name 得到所点击的省份, 这个省份他是中文
  156.       });
  157.     },
  158.    
  159.   },
  160. };
  161. </script>
  162. <style scoped>
  163. .map {
  164.   width: 100%;
  165.   height: 100%;
  167. }
  168. .map_chart {
  169.   width: 600px;
  170.   height: 800px;
  171.   margin:0 auto;
  172. }
  173. </style>

  1. <template>
  2.   <div class="map">
  3.     <div class="map_chart" ref="map_chart"></div>
  4.   </div>
  5. </template>
  6.  
  7. <script>
  8. import axios from "axios";
  9. import {mapData} from '../utils/map'
  10. export default {
  11.   name: "Map",
  12.   data() {
  13.     return {
  14.       chartInstance: null,
  15.       allData: null,
  16.       mapData: {}, // 所获取的省份的地图矢量数据
  17.       dataList:[
  18.         {name: '庐阳区', value: 101},
  19.         {name: '肥东县', value: 101},
  20.         {name: '濉溪县', value: 101},
  21.         {name: '埇桥区', value: 18},
  22.         {name: '萧县', value: 101},
  23.         {name: '蚌山区', value: 101},
  24.         {name: '颍泉区', value: 101},
  25.         {name: '临泉县', value: 101},
  26.         {name: '太和县', value: 101},
  27.         {name: '舒城县', value: 101},
  28.         {name: '当涂县', value: 101},
  29.         {name: '南陵县', value: 101},
  30.         {name: '宣州区', value: 101},
  31.         {name: '郎溪县', value: 101},
  32.         {name: '广德市', value: 101},
  33.         {name: '泾县', value: 101},
  34.         {name: '休宁县', value: 101},
  35.       ],
  36.       nameStr:'庐阳区肥东县濉溪县埇桥区萧县蚌山区颍泉区临泉县太和县舒城县当涂县南陵县宣州区郎溪县广德市泾县休宁县'
  37.     };
  38.   },
  39.   created() {},
  40.   mounted() {
  41.     this.initChart();
  42.     window.addEventListener("resize", this.screenAdapter);
  43.   },
  44.   destroyed() {
  45.     window.removeEventListener("resize", this.screenAdapter);
  46.   },
  47.   methods: {
  48.     async initChart() {
  49.       this.chartInstance = this.$echarts.init(this.$refs.map_chart);
  50.       // 获取中国地图的矢量数据
  51.       // http://localhost:8999/static/map/china.json
  52.       // 由于我们现在获取的地图矢量数据并不是位于KOA2的后台, 所以咱们不能使用this.$http
  53.       this.$echarts.registerMap("anhui", mapData);
  54.       const initOption = {
  55.         // title: {
  56.         //   text: "▎ 公墓分布",
  57.         //   left: 20,
  58.         //   top: 20,
  59.         // },
  60.          toolbox: {
  61.             show: true,
  62.             feature: {
  63.                 saveAsImage: {
  64.                   show:true
  65.                 }
  66.             }
  67.         }, // 提供下载工具
  68.         visualMap: {
  70.             min: 0,
  71.             max: 100000,
  72.             left: 26,
  73.             bottom: 40,
  74.             showLabel: !0,
  75.             // text: ["土葬", "智慧殡葬"],
  76.             pieces: [{
  77.                 gte: 1,
  78.                 lt: 100,
  79.                 label: "土葬区",
  80.                 color: "red",
  81.             }, {
  82.                 gte: 100,
  83.                 lt: 1000,
  84.                 label: "土葬区",
  85.                 color: "#ff3990",
  86.             },
  87.             {
  88.                 gt: 1000,
  89.                 lt: 10000,
  90.                 label: "智慧殡葬",
  91.                 
  92.                 color: "#f2d5ad"
  93.             }],
  94.             show: false
  95.         },
  96.         geo: {
  97.           // type: "map",
  98.           map: "anhui",
  99.            //  默认设置完地图是固定死的不能拖动
  100.          // roam:true,//否开启鼠标缩放和平移漫游。默认不开启。
  101.           roam: 1,
  102.           //zoom :1,//当前视角的缩放比例。越大比例越大
  103.           // center:[108.956239,34.268309],//当前视角的中心点，用经纬度表示108.956239,34.268309
  104.           // label:{//地图上显示文字提示信息
  105.           //   show:true,
  106.           //   // color:"#ff6600",
  107.           //   fontSize:10//字体大小
  108.           // },
  109.           label: {
  110.             normal: {
  111.               formatter:(params)=>{
  112.                   console.log(params,'747')
  113.                   // if(params.name=="庐阳区"||params.name=="肥东县"||params.name=="濉溪县"||params.name=="埇桥区"||params.name=="萧县"||params.name=="蚌山区"||params.name=="颍泉区"||params.name=="临泉县"||params.name=="太和县"||params.name=="舒城县"||params.name=="当涂县"||params.name=="南陵县"){
  114.                   //   return params.name
  115.                   // }else{
  116.                   //   return ''
  117.                   // }
  118.                   if(this.nameStr.includes(params.name)){
  119.                     return params.name
  120.                   }else{
  121.                     return ''
  122.                   }
  123.                 },
  124.                 show: !0,
  125.                 fontSize: "11",
  126.                 color: "#000"
  127.             }
  128.         },
  129.         itemStyle: {
  130.             normal: {
  131.                 areaColor: "#f2d5ad",
  132.                // areaColor: "#ff3940",
  133.                 //shadowBlur: 50,
  134.                 //shadowColor: 'rgba(0, 0, 0, 0.2)',
  135.                 borderColor: "rgba(0, 0, 0, 0.2)"
  136.             },
  137.             emphasis: {
  138.                 areaColor: "#ff6600",
  139.                 shadowOffsetX: 0,
  140.                 shadowOffsetY: 0,
  141.                 borderWidth: 0
  142.             }
  143.         }
  144.           // itemStyle:{//地图区域的多边形 图形样式。
  145.           //   areaColor:"#ff6600"//地图区域的颜色。
  146.           // }
  147.           // label: {
  148.           //   show: true,
  149.           //   color: "#1DE9B6",
  150.           // },
  152.         },
  153.         // legend: {
  154.         //   left: '5%',
  155.         //   bottom: '5%',
  156.         //   orient: 'vertical'
  157.         // },
  158.         series:[
  159.          {
  160.             name: "殡葬",
  161.             type: "map",
  162.             geoIndex: 0,
  163.             data: this.dataList
  164.         }
  165.          
  166.  
  167.         ]
  168.       };
  169.       this.chartInstance.setOption(initOption);
  170.       this.chartInstance.on("click", async (arg) => {
  171.         // arg.name 得到所点击的省份, 这个省份他是中文
  172.       });
  173.     },
  174.    
  175.   },
  176. };
  177. </script>
  178. <style scoped>
  179. .map {
  180.   width: 100%;
  181.   height: 100%;
  183. }
  184. .map_chart {
  185.   width: 600px;
  186.   height: 800px;
  187.   margin:0 auto;
  188. }
  189. </style>
标签： echarts javascript 前端
本文转载自: https://blog.csdn.net/qq_38388578/article/details/129589770
版权归原作者 开心就好1314520 所有， 如有侵权，请联系我们删除。
登录后发布评论

“echarts 地图区域显示不同颜色笔记”的评论:

还没有评论
关于作者
...
overfit同步小助手
文章同步
相关阅读

网络安全法-网络运行安全

使用selenium/drissionpage时如何阻止chrome自动跳转http到https

docker desktop 里部署的Open WebUI 管理员密码忘记了的处理方法

在ubuntu20.04中搭建onsite比赛运行环境

利用开源的低代码表单设计器FcDesigner高效管理和渲染复杂表单结构

Kafka学习笔记

【前端】浏览器输入url到页面呈现发生了什么？

文章导航
没有找到文章内容分段。。。