前言
主要介绍了vue 项目引入echarts 。
功能是地图示例，底图底色默认、浮动、点击颜色更新，给提示框（tooltitle）添加点击事件（点击显示弹出框），废话不多说，直接上干货！
NPM 安装 ECharts
npm install echarts --save
引入项目
- main.js文件中引入
// echarts 引入
import echarts from 'echarts'
Vue.prototype.$echarts = echarts
获取地图geojson数据
代码展示
<template>
<div id="main" :style="{width: '500px',height: '500px'}"></div>
</template>
<script>
import * as echarts from 'echarts';
import YC from "./yc.json" // 引入的盐城市geojson数据
export default {
data() {
return {
option: {},
};
},
methods: {
drawMiddleChart() {
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
echarts.registerMap('YC', YC);
// 初始化 echarts geojson 数据
const geoCoordMap = []
YC.features.forEach(item => {
geoCoordMap.push({
name: item.properties.name,
value: item.properties.centroid
})
})
// echarts 添加地图数据 registerMap(城市字母开头大写, geojson数据)
echarts.registerMap('YC', YC)
this.option = {
tooltip: {
show: true,
trigger: 'item',
triggerOn: 'click',
enterable: true,
extraCssText: 'z-index: 99;max-width: 100px; min-height:100px;white-space:pre-wrap',
formatter: function(params) {
return `<div onclick="dialog('${params.name}')">${params.name}</div>`
}
},
series: [{
name: '盐城地区',
type: 'map',
map: 'YC',
label: {
show: true
},
data: geoCoordMap, // 格式化后的geojaon数据
geoIndex: 0, // 只展示geo地图，，不然会有两个地图重叠
silent: false,
emphasis: {
areaColor: 'transparent'
}
}],
// geo 配置
geo: {
map: 'YC',
roam: false,
label: {
show: true
},
itemStyle: {
normal: {
areaColor: '#00FFF4', //默认区块颜色
borderColor: '#ffffff', //区块描边颜色
borderWidth: 2 //区块描边颜色宽度
},
//鼠标经过高亮显示
emphasis: {
focus: "self", //突出选中的区域 其它区域谈化效果
itemStyle: {
opacity: 1,
borderColor: "#f18355",
borderWidth: "3",
areaColor: "yellow"
}
}
},
// 点击之后的色块颜色
select: {
itemStyle: {
areaColor: "blue",
borderColor: "#f18355",
borderWidth: "3"
}
},
regions: [ // 每个区域的颜色
{
name: '大丰区', //区块名称
itemStyle: {
normal: {
areaColor: '#B9D696' // 区域颜色
}
}
}
]
}
}
// 绘制图表
myChart.setOption(this.option);
}
},
mounted() {
this.drawMiddleChart();
const _this = this
window.dialog= function() {
console.log('执行的')
}
}
}
</script>
效果图：
盐城.png
注意事项
- triggerOn 一定要改为 “click”
- enterable 要设置为 true，才能使鼠标进入提示框，才可以为提示框添加点击事件。
- dialog方法传参的时候一定要加上引号,否则会报错。
