vue中使用echarts地图

1、图表容器

<div :style="{height: scrollerHeight,width: scrollerWeight}" ref="charts"></div>

2、引入echarts

import * as echarts from "echarts";
import shengfen from "@/assets/css/default/china.json";  //地图包

3、通过计算属性获取图表展示区域宽高，

computed: {scrollerHeight: function () {return (document.documentElement.clientHeight - 250) + 'px'; //自定义高度},scrollerWeight: function () {return (document.documentElement.clientWeight - 550) + 'px'; //自定义宽度}},
created() {this.$nextTick(() => {this.initCharts();})},

4、图表配置

methods: {initCharts() {const charts = echarts.init(this.$refs["charts"]);let airData  = [{ name: '北京', value: 1 },{ name: '天津', value: 2 },{ name: '河北', value: 5 },{ name: '山西', value: 7 },{ name: '内蒙古', value: 10 },{ name: '辽宁', value: 12 },{ name: '吉林', value: 15 },{ name: '黑龙江', value: 18 },{ name: '上海', value: 20 },{ name: '江苏', value: 22 },{ name: '浙江', value: 25 },{ name: '安徽', value: 30 },{ name: '福建', value: 34 },{ name: '江西', value: 96 },{ name: '山东', value: 92 },{ name: '河南', value: 13 },{ name: '湖北', value: 27 },{ name: '湖南', value: 17 },{ name: '广东', value: 38 },{ name: '广西', value: 59 },{ name: '海南', value: 54 },{ name: '重庆', value: 66 },{ name: '四川', value: 8 },{ name: '贵州', value: 1 },{ name: '云南', value: 25 },{ name: '西藏', value: 24 },{ name: '陕西', value: 25 },{ name: '甘肃', value: 19 },{ name: '青海', value: 17 },{ name: '宁夏', value: 52 },{ name: '新疆', value: 10 },{ name: '台湾', value: 8 },]const option = {// 背景颜色backgroundColor: "#fff",// 提示浮窗样式tooltip: {show: true,trigger: 'item', //坐标轴触发，主要在柱状图，折线图等会使用类目轴的图表中使用axisPointer: {// 坐标轴指示器，坐标轴触发有效type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'},alwaysShowContent: false,backgroundColor: "#fff",borderColor: "rgba(0, 0, 0, 0.16);",triggerOn: "mousemove",enterable: true, //鼠标是否可进入提示框浮层中textStyle: {fontSize: "12",overflow: "break",},formatter: function (params) {let str = '';str = `<div> ` + params.name + `:` + params.value + `</div>`                   return str},},visualMap: { //分段型视觉映射组件show: true,type: 'piecewise',left: 50,bottom: 50,showLabel: true,itemWidth: 10,itemHeight: 10,inverse: true,// lt:小于; lte:小于等于; gt:大于; gte:大于等于;pieces: [  {lt: 5,label: "<5ms",color: "#83CBAC"},{gte: 5,lte: 10,label: "5-10ms",color: "#55BB8A"},{gt: 10,lte: 15,label: "10-15ms",color: "#20A162"},{gt: 15,lte: 20,label: "15-20ms",color: "#9ABEFA"},{gt: 20,lte: 30,label: '20-30ms',color: "#78A9F9"},{gt: 30,label: '>30ms',color: "#5693F7"}]},// 地图配置geo: {map: "china",aspectScale: 0.8, //长宽比,0.75的含义为宽是高的0.75,假如高为100,宽就只有75;0.5的含义就是宽只有高的一半,假如高为100,宽就只有50zoom: 1.6, //视觉比例大小,1.2即为原有大小的1.2倍roam: false, //是否开启鼠标缩放和平移漫游。默认不开启。可以不用设置,如果只想要开启缩放或者平移，可以设置成 'scale' 或者 'move'。top: '25%',label: {// 通常状态下的样式normal: {show: true,textStyle: {color: "#fff",},},// 鼠标放上去的样式emphasis: {textStyle: {color: "#fff",},},},// 地图区域的样式设置itemStyle: {normal: {borderColor: "rgba(0, 0, 0, 0.1)",borderWidth: 1,},// 鼠标放上去高亮的样式emphasis: {// areaColor: "rgba(0, 0, 0, 0.1)",borderWidth: 0,},},},series: [{selectedMode: false, //取消地图区域点击事件geoIndex: 0,  //将数据和第0个geo配置关联在一起type: 'map',data: this.airData,},],};// 地图注册，第一个参数的名字必须和option.geo.map一致echarts.registerMap("china", shengfen )charts.setOption(option);charts.on("mouseover", function () { //取消鼠标移入地图区域高亮charts.dispatchAction({type: 'legendUnSelect'});});},}

5、效果图

vue中使用echarts地图相关推荐

Vue中使用Echarts地图实现某省市区县地图的展示功能
在移动中台运营指标分析-大屏和开发点赞民警应用开发的过程中,需要展示某市的区县地图.通过这个两个项目开发应用实践和不断研究. 效果图展示: 大致总结了一下实现的方法步骤: 1.通过阿里 ...
在Vue中使用Echarts地图以及数据展示
效果图如下(东营市地图) 1.地图显示首先要获取该地区的JSON数据,网站:DATAV.GeoAtolas,逐步选择地图区域,然后复制数据到本地另存为dy.json. 直接上代码了,添加了详细备注 ...
vue 引入json地图_在vue2.x中使用echarts,地图或者theme引入js 文件，会有问题，地图的json文件重新注册可以...
One-line summary [问题简述] 在vue2.x中使用echarts,地图或者theme引入会有问题 import echarts from 'echarts/dist/echarts' ...
vue中基于echarts和基于高德地图的两种地图下钻与上浮方式
** vue中基于echarts和基于高德地图的两种地图下钻与上浮方式 ** 基于echarts的地图下钻与上浮(浙江省为例) 第一步:在<template>中构建承载echarts的do ...
VUE 中实现echarts中国地图人口迁徙
VUE 中实现echarts中国地图人口迁徙效果图: 安装Echarts依赖要在vue中使用Echarts 需要先安装依赖 npm install echarts --save 这是我的Echa ...
vue中使用ECharts实现中国地图配置详解（配官方配置地址）
前言: 1.实现自定义左下角的视觉映射组件(包括自定义颜色.文字.图元大小) 2.实现自定义悬浮提示框如下图所示: 实现步骤: 一.在vue中安装echarts 1.npm install echa ...
Vue中使用Echarts中的地图组件报错：TypeError: api.coord is not a function
首先,既然你是Vue开发者,那么其它的就不多讲,简短的说下本人是Java开发,所以有些地方可能不适用所有人,接受大家的建议. 一. 既然在Vue中使用Echarts,那将echarts引入到vue项 ...
vue中使用echarts实现地图颜色渐变及自定义浮窗内容
在这篇文章里vue中使用echarts自定义浮窗内容及样式_芝士焗红薯的博客-CSDN博客,总结了echarts的一些简单用法.这篇文章,一个是在原来的自定义浮窗内容上实现了地图的颜色渐变,一个是简化 ...
在Vue中使用eCharts的地图图表，及生成自定义地图数据（乡镇级）
如何在Vue中使用eCharts的地图图表,及如何生成自定义地图数据(乡镇级) 文章目录一.在Vue使用ECharts地图功能二.生成地图数据 1.安装Bigemap 程序 2.生成需要的各乡镇地 ...
echart高级使用_Vue:在Vue中使用echarts
前言公司的项目中需要对数据做可视化处理,高级点的D3.js目前还没接触到,因此选用了大众化的Echarts, 在vue的生态系统中已经有实现好的vue-echarts,但是使用现成的就意味着必须使用 ...

vue中使用echarts地图

vue中使用echarts地图相关推荐

最新文章

热门文章