一、安装echarts依赖
npm install echarts -S
使用淘宝的镜像安装
1、安装淘宝镜像
npm install -g cnpm --registry=https://registry.npm.taobao.org
2、使用
cnpm install echarts -S
二、全局引入(在main.js中引入)
// 引入echarts
import echarts from 'echarts'
Vue.prototype.$echarts = echarts
三、新建vue文件及容器
// 新建文件:例如:Map.vue
//容器:
四、具体实现
let mapContainerId = {};
export default {
name: "mapEcharts",
data() {
return {
chinaId: "000000", // 地图 code
chinaName: "china", // 地图 区域名
chinaJson: null // 地图 json数据
};
},
mounted() {
const testJson = require("./../assets/mapJson/" + this.chinaId + ".json"); // 获取地图json文件
this.chinaJson = testJson;
console.log(testJson);
this.mapFn(); // 调用地图
},
methods: {
mapFn() {
console.log(this.chinaName, this.chinaJson, this.chinaId);
mapContainerId = this.$echarts.init(document.getElementById("mapEc")); // 初始化dom
this.mapOption(
mapContainerId,
this.chinaId,
this.chinaName,
this.chinaJson
);
},
// 地图option
mapOption(myChart, id, name, mapJson) {
this.$echarts.registerMap(name, mapJson);
myChart.setOption({
visualMap: { // 视觉映射组件,用于进行『视觉编码』
min: 0, // 最小值
max: 100, // 最大值
left: 40, // 组件所在位置(left, right, top, bottom)
bottom: 40,
pieces: [ // 组件的值域显示
{
gt: 0, // lt:小于,lte小于等于,gt大于,gte大于等于
lte: 20,
label: "0[
作者博客地址:http://lwenl.cn
编写不易,勿喷,希望能帮助到您