vue 引入json地图_VUE中通过Echarts引入地图

渲染的方法如下记得引入echarts

import echarts from 'echarts'

-----------------------------------

init(dalian){

this.$nextTick(()=>{

var myChart = this.$echarts.init(document.getElementById('echartMap'));

echarts.registerMap('dalian', dalian,{});

myChart.setOption({

series: [{

name:'大连市',

label: {

normal: {

show: true,

emphasis: {

show: true

}

itemStyle: {

color: '#ddb926'

type: 'map',

zoom: 1,//缩放比例

roam: true,

mapType: 'dalian',

emphasis: {

label: {

show: true

}

// 文本位置修正

textFixed: {

Alaska: [20, -20]

data: [{

value: 4822023

{

value: 731449

{

value: 6553255

{

value: 949131

{

value: 8041430

{

value: 5187582

{

value: 3590347

{

value: 917092

{

value: 632323

{

value: 9317568

}

]

}],

//右下角数值条

visualMap: {

left: 'right',

min: 1,

max: 100,

inRange: {

color: ['#313695', '#4575b4', '#74add1', '#abd9e9', '#e0f3f8', '#ffffbf', '#fee090', '#fdae61', '#f46d43', '#d73027', '#a50026']

//text: ['High', 'Low'], // 文本，默认为数值文本

calculable: true

tooltip: {

trigger: 'item',

showDelay: 0,

transitionDuration: 0.2,

formatter: function(params) {

var value = (params.value + '').split('.');

value = value[0].replace(/(\d{1,3})(?=(?:\d{3})+(?!\d))/g, '$1,');

return params.seriesName + '
' + params.name + ': ' + value;

}

});

})

}

vue 引入json地图_VUE中通过Echarts引入地图相关推荐

在Vue中使用eCharts的地图图表，及生成自定义地图数据（乡镇级）
如何在Vue中使用eCharts的地图图表,及如何生成自定义地图数据(乡镇级) 文章目录一.在Vue使用ECharts地图功能二.生成地图数据 1.安装Bigemap 程序 2.生成需要的各乡镇地 ...
VUE 中实现echarts中国地图人口迁徙
VUE 中实现echarts中国地图人口迁徙效果图: 安装Echarts依赖要在vue中使用Echarts 需要先安装依赖 npm install echarts --save 这是我的Echa ...
vue 引入json地图_vue中echarts引入中国地图的案例
如下所示: mounted() { this.drawLine(); }, drawLine(){ // 基于准备好的dom,初始化echarts实例 var myChartContainer = d ...
vue 引入json地图_vue中引入地图的js文件，显示echarts is not loaded
<script type="text/javascript"> var vue = new Vue({ el:'#app', data:{ function () { ...
echarts地图文字重叠解决方案_vue中使用echarts地图且修改地图文字位置
使用echarts地图的时候,从阿里云地图选择器下载完对应省份的geojson之后,在页面中显示,会出现一些地市名字覆盖的情况,可以直接修改geojson中的数据对文字的位置进行修改解决方法打 ...
vue中展示echarts中国地图
在vue项目中展示中国地图可以使用echarts库,根据配置数据区分不同颜色展示地图等功能. 先看效果一.安装Echarts npm install echarts@4.9.0 --save 我这里 ...
echarts vue 柱状图实例_VUE中使用Echarts绘制柱状图
在main.js中引入echarts import echarts from 'echarts' Vue.prototype.$echarts = echarts 在相应的vue中导入echarts ...
Vue中使用echarts绘制地图，以及只显示南海问题
下载echarts依赖下载依赖我想大家都会:cnpm / npm install echartsyar add echarts typescript项目 npm install @types/ech ...
vue中使用echarts实现地图颜色渐变及自定义浮窗内容
在这篇文章里vue中使用echarts自定义浮窗内容及样式_芝士焗红薯的博客-CSDN博客,总结了echarts的一些简单用法.这篇文章,一个是在原来的自定义浮窗内容上实现了地图的颜色渐变,一个是简化 ...

vue 引入json地图_VUE中通过Echarts引入地图

vue 引入json地图_VUE中通过Echarts引入地图相关推荐

最新文章

热门文章