平台兼容
安装
两个方法：
- 在uniapp 插件市场 找到 百度图表 导入
- npm install echarts
注意：
- 标点在 方法一 里，可以标一个点也可以标多个点（这点秋云是做不到的，也可能是我菜没有找到方法）。
- 方法二 echarts 版本要在3.8.0 左右，如何要用高版本的。option中的写法参考官方
- 地图的json文件一定是三层数组的，不能用四层数组
代码演示
基础用法 一
<template>
<view class="">
<l-echart style="padding-bottom: 60rpx;" ref="chart"></l-echart>
</view>
</template>
<script>
// 这是地图的json文件
import mapdata from '@/pages/pagesA/mockdata/mapdata.json';
import * as echarts from '@/uni_modules/lime-echart/static/echarts.min'
export default {
data() {
return {}
},
onReady() {
this.getServerData();
// 注册自定义地图
echarts.registerMap('customMap', mapdata);
// 使用自定义地图创建地图图表
setTimeout(()=>{
this.$refs.chart.init(echarts, art =>{
art.setOption(this.getSurabaya())
// 初始化 echarts 实例后绑定事件
art.on('click', (params) => {
// 这里是点击事件
});
});
},100)
},
methods: {
// 设置配置
getSurabaya(){
const option = {
visualMap: {
min: 0,
max: 100000,
left: 26,
bottom: 40,
showLabel: true,
text: ["高", "低"],
pieces: [{
gt: 60,
label: "> 60人",
color: "#F2B0E0"
},{
gte: 55,
lte: 60,
label: "55 - 60人",
color: "#C2A0D2"
},{
gte: 50,
lte: 55,
label: "50 - 55人",
color: "#FCDE9B"
},{
gte: 45,
lte: 50,
label: "45 - 50人",
color: "#BDE0AC"
},{
gte: 40,
lte: 45,
label: "40 - 45人",
color: "#F5A3A3"
},{
gte: 35,
lte: 40,
label: "35 - 40人",
color: "#F5A3A3"
},{
gte: 30,
lte: 35,
label: "30 - 35人",
color: "#74BCFF"
},{
gte: 25,
lte: 30,
label: "25 - 30人",
color: "#8AC7AA"
},{
gte: 20,
lte: 25,
label: "20 - 25人",
color: "#74BCFF"
}, {
gte: 15,
lte: 20,
label: "15 - 20人",
color: "#ABD9EB"
}, {
gte: 10,
lt: 15,
label: "10 - 15人",
color: "#FACC14"
}, {
gte: 5,
lt: 10,
label: "5 - 10人",
color: "#FCDE9B"
}, {
gte: 1,
lt: 5,
label: "1 - 5人",
color: "#FDB597"
}],
// 是否显示visualMap
show: false
},
series: [
{
type: 'map',
map: 'customMap', // 使用注册的自定义地图
itemStyle: {
normal: {
// areaColor: 'red',
borderColor: '#000', // 边界线颜色
borderWidth: 1 // 边界线宽度
}
},
label: {
normal: {
show: true, //名称,
},
// emphasis: {
// show: false,
// },
},
// 对应的是pieces 数组中的颜色
data: [
{name:'柘沟镇',value: 3, currentIndex: 6, },
{name:'中册镇', value: 7, currentIndex: 2 },
{name:'高峪镇',value: 13,currentIndex: 10 },
{name:'杨柳镇',value: 17, currentIndex: 4 },
{name:'金庄镇',value: 23,currentIndex: 9 },
{name:'泗河街道',value: 27,currentIndex: 5},
{name:'济河街道',value: 33,currentIndex: 0},
{name:'星村镇',value: 37,currentIndex: 3 },
{name:'华村镇',value: 43,currentIndex: 12 },
{name:'苗馆镇',value: 47, currentIndex: 1 },
{name:'圣水峪镇',value: 53,currentIndex:11},
{name:'泉林镇',value: 57,currentIndex: 7},
{name: '泗张镇',value: 63,currentIndex:8}
]
},
{
type: 'effectScatter',
coordinateSystem: 'geo',
showEffectOn: 'render',
zlevel: 1,
label: {
normal: {
// a:value，b:是name
formatter: '{b}',
position: 'right',
offset: [15, 0],
color: '#000',
show: true,
},
},
itemStyle: {
normal: {
color: '#1DE9B6',
//shadowBlur和shadowColor配置阴影效果
shadowBlur: 20,
shadowColor: '#333',
},
},
symbolSize: 10,
// 标点。可以标多个点也可以标一个点
data: [
{
value: [117.470179,35.676698],
name: '华村镇'
},
{
value: [117.48713,35.667019],
name: '演马村'
},
{
value: [117.442762,35.660689],
name: '华村镇卫生院'
},
{
value: [117.4596,35.647729],
name: '崇义村'
}]
},
]
};
return option;
},
}
}
</script>
基础用法 二
<template>
<view>
<view style="height: 400px;" id="chart"></view>
</view>
</template>
<script>
import mapdata from '@/pages/pagesA/mockdata/mapdata.json';
import * as echarts from 'echarts'
export default {
data() {
return {}
},
onReady() {
// 注册自定义地图
echarts.registerMap('customMap', mapdata);
// 使用自定义地图创建地图图表
let myChart = echarts.init(document.getElementById('chart'))
// 初始化 echarts 实例后绑定事件
myChart.on('click', (params) => {
// 点击事件
console.log(params,'paramsparams.dataIndex');
});
// 设置配置
myChart.setOption({
visualMap: {
min: 0,
max: 100000,
left: 26,
bottom: 40,
showLabel: true,
text: ["高", "低"],
pieces: [{
gt: 60,
label: "> 60人",
color: "#F2B0E0"
},{
gte: 55,
lte: 60,
label: "55 - 60人",
color: "#C2A0D2"
},{
gte: 50,
lte: 55,
label: "50 - 55人",
color: "#FCDE9B"
},{
gte: 45,
lte: 50,
label: "45 - 50人",
color: "#BDE0AC"
},{
gte: 40,
lte: 45,
label: "40 - 45人",
color: "#F5A3A3"
},{
gte: 35,
lte: 40,
label: "35 - 40人",
color: "#F5A3A3"
},{
gte: 30,
lte: 35,
label: "30 - 35人",
color: "#74BCFF"
},{
gte: 25,
lte: 30,
label: "25 - 30人",
color: "#8AC7AA"
},{
gte: 20,
lte: 25,
label: "20 - 25人",
color: "#74BCFF"
}, {
gte: 15,
lte: 20,
label: "15 - 20人",
color: "#ABD9EB"
}, {
gte: 10,
lt: 15,
label: "10 - 15人",
color: "#FACC14"
}, {
gte: 5,
lt: 10,
label: "5 - 10人",
color: "#FCDE9B"
}, {
gte: 1,
lt: 5,
label: "1 - 5人",
color: "#FDB597"
}],
show: false
},
series: [
{
type: 'map',
map: 'customMap', // 使用注册的自定义地图
itemStyle: {
normal: {
borderColor: '#000', // 边界线颜色
borderWidth: 1 // 边界线宽度
}
},
label: {
normal: {
show: true, //名称,
},
},
data: [
{ name: '柘沟镇', value: 3, currentIndex: 6 },
{ name: '中册镇', value: 7, currentIndex: 2 },
{ name: '高峪镇', value: 13, currentIndex: 10 },
{ name: '杨柳镇', value: 17, currentIndex: 4 },
{ name: '金庄镇', value: 23, currentIndex: 9 },
{ name: '泗河街道', value: 27, currentIndex: 5 },
{ name: '济河街道', value: 33, currentIndex: 0 },
{ name: '星村镇', value: 37, currentIndex: 3 },
{ name: '华村镇', value: 43, currentIndex: 12 },
{ name: '苗馆镇', value: 47, currentIndex: 1 },
{ name: '圣水峪镇', value: 53,currentIndex: 11 },
{ name: '泉林镇', value: 57, currentIndex: 7 },
{ name: '泗张镇', value: 63, currentIndex: 8 }
]
}
]
});
},
methods: {}
}
</script>
