本文正在参加「金石计划 . 瓜分6万现金大奖」
vue安装echarts 之后局部引入echarts
import * as echarts from 'echarts'
从datav.aliyun.com/portal/scho… 下载json文件并引入
import dongming from './json/dongming.json'
import mudanqu from './json/mudanqu.json'
import caoxian from './json/caoxian.json'
import dingtao from './json/dingtao.json'
import juancheng from './json/juancheng.json'
import yuncheng from './json/yuncheng.json'
import juye from './json/juye.json'
import chengwu from './json/chengwu.json'
import shanxian from './json/shanxian.json'
data里边写上要显示的市
data() {
return {
mapCityCode: 'heze',
}
},
要实现地图下钻的话
switch (mapCityCode) {
case 'heze':
echarts.registerMap('city', heze)
break
case 'dongming':
echarts.registerMap('city', dongming)
break
case 'mudanqu':
echarts.registerMap('city', mudanqu)
break
case 'caoxian':
echarts.registerMap('city', caoxian)
break
case 'dingtao':
echarts.registerMap('city', dingtao)
break
case 'juancheng':
echarts.registerMap('city', juancheng)
break
case 'yuncheng':
echarts.registerMap('city', yuncheng)
break
case 'juye':
echarts.registerMap('city', juye)
break
case 'chengwu':
echarts.registerMap('city', chengwu)
break
case 'shanxian':
echarts.registerMap('city', shanxian)
break
}
接下来就是echarts 常规写法
methods: {
drawMapChart(mapCityCode) {
var mapChart = echarts.init(document.getElementById('mapChart'))
var center = {
省市县坐标:[115.098906, 35.262753]
}
// 图中 省份字的位置
var center2 = {
省市县坐标:[115.098906, 35.262753]
}
// 数据
var data = [
{ name: '省市县', value: (Math.random() * 1000 + 1000).toFixed(0) },
]
var lineData = data.map((item) => {
return {
coords: [
center[item.name],
[center[item.name][0], center[item.name][1] + item.value * 0.0001],
],
}
})
var scatterData = data.map((item) => {
return [
center[item.name][0],
center[item.name][1] + item.value * 0.0001,
]
})
var scatterData2 = data.map((item) => {
return center[item.name]
})
var scatterData3 = data.map((item) => {
return center2[item.name].concat(item.name)
})
let mapOption = {
geo: [
{
map: 'city',
zlevel: 5,
label: {
show: true,
color: '#eee',
},
itemStyle: {
color: '#2075B8', // 背景
borderWidth: '1', // 边框宽度
borderColor: '#fff', // 边框颜色
},
},
{
map: 'city',
top: '13%',
zlevel: 4,
itemStyle: {
color: '#3C5FA1', // 背景
borderWidth: '1', // 边框宽度
borderColor: '#3C5FA1', // 边框颜色
},
},
],
series: [
{
type: 'map',
map: 'heze',
geoIndex: 0,
aspectScale: 0.75, //长宽比
showLegendSymbol: false, // 存在legend时显示
label: {
normal: {
show: true,
},
emphasis: {
show: false,
textStyle: {
color: '#fff',
},
},
},
roam: true,
itemStyle: {
normal: {
areaColor: '#031525',
borderColor: '#0227ad',
},
emphasis: {
areaColor: '#2B91B7',
},
},
animation: false,
data: [],
realisticMaterial: {
detailTexture: '#fff', // 纹理贴图
textureTiling: 1, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
metalness: 0, // 0材质是非金属 ，1金属
roughnessAdjust: 0,
},
viewControl: {
distance: 135, // 地图视角 控制初始大小
rotateSensitivity: 1, // 旋转
zoomSensitivity: 1, // 缩放
},
},
// 画柱状图
{
type: 'lines',
zlevel: 5,
effect: {
show: false,
period: 4, //箭头指向速度，值越小速度越快
trailLength: 0.02, //特效尾迹长度[0,1]值越大，尾迹越长重
symbol: 'arrow', //箭头图标
symbolSize: 5, //图标大小
},
lineStyle: {
width: 15, //尾迹线条宽度
color: {
type: 'linear',
x: 0,
y: 0,
x2: 1,
y2: 0,
colorStops: [
{
offset: 0,
color: '#F09B0A', // 0% 处的颜色
},
{
offset: 0.2,
color: '#F09B0A', // 0% 处的颜色
},
{
offset: 0.5,
color: '#FEF03B', // 0% 处的颜色
},
{
offset: 0.7,
color: '#FEF03B', // 0% 处的颜色
},
{
offset: 1,
color: '#F09B0A', // 100% 处的颜色
},
],
global: false, // 缺省为 false
},
opacity: 1, //尾迹线条透明度
curveness: 0, //尾迹线条曲直度
},
label: {
show: 0,
position: 'end',
formatter: '245',
},
silent: true,
data: lineData,
},
// 柱形数量显示
{
type: 'scatter',
coordinateSystem: 'geo',
geoIndex: 0,
zlevel: 5,
label: {
show: !0,
position: 'right',
formatter: (params) => data[params.dataIndex].value,
padding: [4, 8],
backgroundColor: '#003F5E',
borderRadius: 5,
borderColor: '#67F0EF',
borderWidth: 1,
color: '#67F0EF',
},
symbol: 'circle',
symbolSize: [15, 8],
itemStyle: {
color: '#FEF03B',
opacity: 1,
},
silent: true,
data: scatterData,
},
// 图中圆点设置
{
type: 'scatter',
coordinateSystem: 'geo',
geoIndex: 0,
zlevel: 5,
symbol: 'circle',
symbolSize: [15, 8],
itemStyle: {
color: '#F09B0A',
opacity: 1,
shadowColor: '#000',
shadowBlur: 5,
shadowOffsetY: 2,
},
silent: true,
data: scatterData2,
},
{
type: 'effectScatter',
coordinateSystem: 'geo',
geoIndex: 0,
symbol: 'circle',
symbolSize: 4,
showEffectOn: 'render',
rippleEffect: {
brushType: 'fill',
scale: 10,
},
hoverAnimation: true,
itemStyle: {
color: '#FEF134',
},
zlevel: 6,
data: scatterData3,
},
],
}
// mapChart.on('click', (params) => {
// console.log('params.name', params.name)
// this.drawMapChart('mudanqu')
// })
mapChart.setOption(mapOption, true)
},
},
mounted() {
this.drawMapChart(this.mapCityCode)
},
}
</script>
