vue中使用echarts实现中国地图加城市定位功能

首先这个是承接上个博客中创建的china.json,并在main.js的注册一下.

initCityDataPic () {let obj = darkthis.$echarts.registerTheme('dark', obj)//上面的两段是我自己设置的暗色系主题，不需要可以注释掉let dom = this.$refs.cityDataPiclet myChart = this.$echarts.init(dom, dark) //没有主题就把dark删掉// console.log(geo)myChart.setOption({geo: {     // map: 'china',    //此处的china就是之前博客中全局注册的china地图itemStyle: { // 定义样式normal: { // 普通状态下的样式areaColor: '#2D4455',  //地图块的颜色borderColor: '#243440'},emphasis: { // 高亮状态下的样式areaColor: '#1DB47E',shadowOffsetX: 0,shadowOffsetY: 0,shadowBlur: 20,borderWidth: 0,// shadowColor: 'rgba(0, 0, 0, 0.5)'shadowColor: 'white'}}},tooltip: {},legend: {orient: 'vertical',left: 'left',data: ['']},selectedMode: 'single',  //单选series: [{name: '',type: 'scatter',    //散点系列coordinateSystem: 'geo',    //表明坐标系center: [115.97, 29.71],  /地图中心点itemStyle: {normal: {color: '#1DB47E',label: {show: false,formatter: '{b}',position: 'right',textStyle: {color: "#fff"}}},emphasis: {label: {show: true}}},label: {show: false},data: [{ name: '北京', value: [116.46, 39.92, 666] },   //数据格式{ name: '天津', value: [117.19, 39.08, 123] },{ name: '上海', value: [121.47, 31.23, 333] },{ name: '武汉市', value: [114.3, 30.5, 321] },{ name: '唐山', value: [118.02, 39.63], }]}]})}

vue中使用echarts实现中国地图加城市定位功能相关推荐

vue中基于echarts和基于高德地图的两种地图下钻与上浮方式
** vue中基于echarts和基于高德地图的两种地图下钻与上浮方式 ** 基于echarts的地图下钻与上浮(浙江省为例) 第一步:在<template>中构建承载echarts的do ...
在vue中，Echarts雷达图中indicator的点击事件，不能改变data中的值的解决方法
在vue中,Echarts雷达图中indicator的点击事件,不能改变data中的值的解决方法参考文章: (1)在vue中,Echarts雷达图中indicator的点击事件,不能改变data中的 ...
Vue中使用echarts图表插件
一.安装echarts依赖 npm install echarts -S 或者使用淘宝的镜像 npm install -g cnpm --registry=https://registry.npm.t ...
echart高级使用_Vue:在Vue中使用echarts
前言公司的项目中需要对数据做可视化处理,高级点的D3.js目前还没接触到,因此选用了大众化的Echarts, 在vue的生态系统中已经有实现好的vue-echarts,但是使用现成的就意味着必须使用 ...
Vue中引入echarts的步骤，折线图、柱状图、饼图的常用配置项
vue中引入echarts 一.安装echarts 二.引入echarts 1.全局引入 2.局部引入三.vue中使用echarts 1.准备好函数 2.准备一个容器来放echarts 3.初始化容 ...
vue中使用echarts实现动态数据绑定、获取后端接口数据
之前几篇echarts的文章是实现了静态的柱状图.折线图.饼状图.地图,在项目中我们肯定是需要获取后端接口,将后端返回的数据显示在图表上,所以这次就记录一下如何实现echarts的动态数据绑定. 简单 ...
【Echarts】在Vue中使用Echarts
在Vue中使用Echarts 引入第三方库vue-echarts vue-echarts安装与使用 vue2中使用Echarts vue-echarts安装 vue2中使用Echarts vue3中使 ...
VUE 中实现echarts中国地图人口迁徙
VUE 中实现echarts中国地图人口迁徙效果图: 安装Echarts依赖要在vue中使用Echarts 需要先安装依赖 npm install echarts --save 这是我的Echa ...
vue中使用Echarts绘制K线图
一.需求问题在开发项目中,我们可能会遇到这样的需求.在vue中使用Echarts绘制K线图,进行数据分析.下面是一个简单的K线图绘制,数据是伪造的,虽然不多,但是能够实现大致的K线图效果. 二.需求 ...

vue中使用echarts实现中国地图加城市定位功能

vue中使用echarts实现中国地图加城市定位功能相关推荐

最新文章

热门文章