提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档
前言
例如:随着人工智能的不断发展,机器学习这门技术也越来越重要,很多人都开启了学习机器学习,本文就介绍了机器学习的基础内容。
一、首先就是项目中引入地图包.
由于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, //浮层显示的延迟,单位为 ms
hideDelay: 50, //浮层隐藏的延迟,单位为 ms
enterable: 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) return
const 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的引入和使用其实很简单.有什么问题欢迎大家提出