前言

例如：随着人工智能的不断发展，机器学习这门技术也越来越重要，很多人都开启了学习机器学习，本文就介绍了机器学习的基础内容。

一、首先就是项目中引入地图包.

由于echarts5.0以后不再提供map地图包.只好网上招.(捷径:echart4.9之前的版本都有map地图包可以下载下来拷贝过来使用.虽然有乱码问题.但是不影响使用)

二、代码如下

1.项目中首先要引入json中国地图

上代码

<template><div class="echartsMapAllDemo"><div ref="chart" style="width:60.5rem;height:67.5rem;" id="left_map"></div></div>
</template><script>const echarts = require('echarts');import china from '@/utils/china.json'import axios from 'axios'var provinces = ['shanghai', 'hebei', 'shanxi', 'neimenggu', 'liaoning', 'jilin', 'heilongjiang', 'jiangsu','zhejiang', 'anhui', 'fujian', 'jiangxi', 'shandong', 'henan', 'hubei', 'hunan', 'guangdong', 'guangxi','hainan','sichuan', 'guizhou', 'yunnan', 'xizang', 'shanxi1', 'gansu', 'qinghai', 'ningxia', 'xinjiang', 'beijing','tianjin', 'chongqing', 'xianggang', 'aomen', 'taiwan']var provincesText = ['上海', '河北', '山西', '内蒙古自治区', '辽宁', '吉林', '黑龙江', '江苏', '浙江', '安徽', '福建', '江西', '山东', '河南', '湖北','湖南','广东', '广西壮族自治区', '海南', '四川', '贵州', '云南', '西藏自治区', '陕西', '甘肃', '青海', '宁夏', '新疆维吾尔自治区', '北京', '天津', '重庆','香港特别行政区','澳门特别行政区', '台湾']export default {created() {},mounted() {this.$nextTick(() => {this.initMap()})},data() {return {map: {},}},methods: {getMapOpt(place, cityList) {var that = this// console.log('获取的省份', place)var dataList = [{name: "北京",value: 177,provinceId: 110000},{name: "天津",value: 42,provinceId: 120000},{name: "河北",value: 102,provinceId: 130000},{name: "山西",value: 81,provinceId: 140000},{name: "内蒙古自治区",value: 47,provinceId: 150000},{name: "辽宁",value: 67,provinceId: 210000},{name: "吉林",value: 82,provinceId: 220000},{name: "黑龙江",value: 66,provinceId: 230000},{name: "上海",value: 24,provinceId: 310000},{name: "江苏",value: 90000,provinceId: 320000},{name: "浙江",value: 500,provinceId: 330000},{name: "安徽",value: 1000,provinceId: 340000},{name: "福建",value: 116,provinceId: 350000},{name: "江西",value: 91,provinceId: 360000},{name: "山东",value: 119,provinceId: 370000},{name: "河南",value: 137,provinceId: 410000},{name: "湖北",value: 116,provinceId: 420000},{name: "湖南",value: 114,provinceId: 430000},{name: "重庆",value: 91,provinceId: 500000},{name: "四川",value: 125,provinceId: 510000},{name: "贵州",value: 62,provinceId: 520000},{name: "云南",value: 83,provinceId: 530000},{name: "西藏自治区",value: 900000,provinceId: 540000},{name: "陕西",value: 80,provinceId: 610000},{name: "甘肃",value: 56,provinceId: 620000},{name: "青海",value: 10,provinceId: 630000},{name: "宁夏回族自治区",value: 18,provinceId: 640000},{name: "新疆维吾尔自治区",value: 67,provinceId: 650000},{name: "广东",value: 123,provinceId: 440000},{name: "广西壮族自治区",value: 59,provinceId: 450000},{name: "海南",value: 14,provinceId: 460000},{name: "台湾",value: 900,provinceId: 710000},{name: "香港特别行政区",value: 900,provinceId: 810000},{name: "澳门特别行政区",value: 900,provinceId: 820000}];//dataList 在这里处理数据// dataList.forEach((item) => {//   this.provinceListMes.forEach(ins => {//     if (item.provinceId == ins.provinceId) {//       // console.l'og(item.value, ins.statis)//     }//   })// })let option = {title: {text: that.charsTit,left: "center",textStyle: {fontStyle: '',fontWeight: 'bold',fontSize: '20',color: '#000'}},tooltip: {// background: '',// trigger: 'item', // 触发类型， 'item'数据项图形触发，主要在散点图，饼图等无类目轴的图表中使用。 'axis'坐标轴触发，主要在柱状图，折线图等会使用类目轴的图表中使用。triggerOn: 'mousemove', // 提示框触发的条件,'mousemove'鼠标移动时触发。'click'鼠标点击时触发。'mousemove|click'同时鼠标移动和点击时触发。'none'不在 'mousemove' 或 'click' 时触发showContent: true, //是否显示提示框浮层alwaysShowContent: false, //是否永远显示提示框内容showDelay: 0, //浮层显示的延迟，单位为 mshideDelay: 50, //浮层隐藏的延迟，单位为 msenterable: false, //鼠标是否可进入提示框浮层中confine: false, //是否将 tooltip 框限制在图表的区域内transitionDuration: 0.1, //提示框浮层的移动动画过渡时间，单位是 s,设置为 0 的时候会紧跟着鼠标移动// position: ['50%', '50%'],                    //提示框浮层的位置，默认不设置时位置会跟随鼠标的位置,[10, 10],回掉函数，inside鼠标所在图形的内部中心位置，top、left、bottom、right鼠标所在图形上侧，左侧，下侧，右侧，// backgroundColor: "transparent", //标题背景色// borderColor: "#FFFFFF", //边框颜色// borderWidth: 0, //边框线宽padding: [5, 10], //图例内边距，单位px  5  [5, 10]  [5,10,5,10]textStyle: 'mytextStyle', //文本样式formatter: function(params) { //提示框浮层内容格式器，支持字符串模板和回调函数两种形式// console.log(params)return '地区：' + params.name + '<br />' + '当前地区信息量：' + '：' + (params.value || 0);},// formatter: "地区:{b}</br>当前地区用户量:{c}",valueFormatter: (value) => '$' + value.toFixed(2)},//右下角的示例图visualMap: { //这里的示例图可以根据需求自己调整type: 'piecewise', top: 'middle',right: '0',// left: 'right',itemSymbol: 'circle',align: 'left',pieces: [{ lt: 2000,label: '2000以下',color: '#e0f3f8'},{gte: 2000,lt: 5000,label: '2000以上',color: '#abd9e9',},{gte: 5000,lt: 10000,label: '5000以上',color: '#74add1'},{gte: 10000,lt: 20000,label: '10000以上',color: '#4575b4'},{gte: 20000,label: '20000以上',color: '#313695'},],},toolbox: [{show: true,//orient: 'vertical',left: 'left',top: 'top',feature: {// dataView: {//   readOnly: false// },// restore: {},// saveAsImage: {}},toolbox: {show: true,showTitle: false, // 隐藏默认文字，否则两者位置会重叠feature: {saveAsImage: {show: true,title: 'Save As Image'},dataView: {show: true,title: 'Data View'},},},}],//这个属性配置一定要有，要不然无法实现光圈效果series: [{type: 'map',// roam: place ? true : false,// 全国不能缩放/省能缩放roam: false,map: place || 'china',name: "中国地图",colorBy: 'data',data: cityList || dataList,label: {show: false,position: 'inside'},}]};return option},// 显示各省的地图 放到 /src/assets/map/json/china.json即可async getProvinceMapOpt(provinceAlphabet) {console.log('获取地图信息2', provinceAlphabet)await axios.get('province/' + provinceAlphabet + '.json').then((res) => {echarts.registerMap(provinceAlphabet, {geoJSON: res.data})//在这里得到数据根据自己的业务需求来调整})},initMap() {echarts.registerMap('china', {geoJSON: china})this.map = echarts.init(this.$refs.chart)const option = this.getMapOpt()if (option && typeof option === 'object') {this.map.setOption(option, true)window.addEventListener("resize", function() {this.map.resize();});}this.map.off('click') //由于地图点击次数会累加，所以加这个事件来防止多次触发this.map.on('click', (param) => {// console.log(param)event.stopPropagation() // 阻止冒泡事件// 找到省份名const provinceIndex = provincesText.findIndex(x => {return param.name === x})//在这里判断provincesText中是否包含点击的省份名，有则渲染省级地图，无则无处理（需要可从此获得）if (provinceIndex === -1) returnconst provinceAlphabet = provinces[provinceIndex]// 重新渲染各省份地图this.getProvinceMapOpt(provinceAlphabet)})},},}
</script><style lang="scss" scoped>.echartsMapAllDemo {display: flex;flex-direction: row;justify-content: space-around;flex-wrap: wrap;padding-top: 1.875rem;background-color: #FFF;border-radius: 0.625rem;padding: 0.625rem;}
</style>

注意避坑：全国自治区的名称(也就是china.json文件的name值)要和以上的provincesText 对照.否则颜色不会正常展示并且不会下探(例如:我们项目用的是：‘西藏自治区 ’，官方提供的name是‘西藏’)其他的有内蒙古，新疆…遇到后自己根据需求做出调整一样即可

2.免费地图数据

这里免费提供一份完整的中国地图数据.
链接：https://pan.baidu.com/s/1-lhNNsMtQ_8ZKi-EtBlFAQ
提取码：hG65

echart4.9版本的地图包
链接：https://pan.baidu.com/s/1b4iniXPImg4DSW_kdXkFCg
提取码：hG66

总结

主要是多看文档.eharts的引入和使用其实很简单.有什么问题欢迎大家提出

echarts引入中国地图并且下探到省相关推荐

vue 引入json地图_vue中echarts引入中国地图的案例
如下所示: mounted() { this.drawLine(); }, drawLine(){ // 基于准备好的dom,初始化echarts实例 var myChartContainer = d ...
微信小程序用echarts引入中国地图
下载下载GitHub 上的 ecomfe/echarts-for-weixin 项目链接: ecomfe/echarts-for-weixin. 导入下载好后解压,打开微信开发者工具,新建一个项 ...
vue中使用ECharts引入中国地图
坑我来踩代码你们看 china.js 提取码:iwn9 百度网盘请输入提取码 <template><div class="echarsMap">< ...
Echarts中引入中国地图
摘要:最近公司要求开发大屏大数据展示界面,其中有个需求是迁徙图,以下是自己的相关总结,如有些的不好的地方请大家多多指教,我会虚心学习并修改不足的地方. 思考:1.迁徙图实现的第一步是引入中国地图,那如 ...
基于VUE+TS中引用ECharts的中国地图和世界地图密度表
(第一次写掘金,嗯也不知道写啥好.想了想,先来一份简单可口的老菜谱.虽然以前在其他平台也上过,换个地方说不准口味刚好呢哈哈哈哈-) 首先先附上官网 http://echarts.baidu.com/o ...
echarts实现中国地图和各省市地图
echarts实现中国地图我会把china.js和各省市的js以及json上传资源,有需要的可以下载首先引入echarts.js和china.js <!DOCTYPE html> &l ...
echarts实现中国地图，山西地图，图表面积图配置项
文章目录 1.vue引入echars 2.建立echars基本框架 3.中国地图 4.山西地图为例,展示点击获取城市名称并保存在data中,方便使用 6.图表面积图(大小,线条颜色,面积颜色,百分比显 ...
echarts实现中国地图各省背景根据数值大小变化的方法
很多人不清楚中国地图要怎么实现,其实 echarts 已经为我们封装好了,只要我们配置好各省数据就可以快捷实现了. 首先我们先来实现中国地图: 中国地图的实现 (1)引入 echarts 及中国地图 ...
Echarts实现——中国地图
Echarts实现--中国地图如下图: 使用Echarts进行地图绘制展示的时候,需要china.json: 举例在vue的项目中可以通过cnpm install echarts --save安装E ...

echarts引入中国地图并且下探到省

文章目录

前言

一、首先就是项目中引入地图包.

二、代码如下

1.项目中首先要引入json中国地图

2.免费地图数据

总结

echarts引入中国地图并且下探到省相关推荐

最新文章

热门文章