前端笔记-vue cli中使用echarts画江苏省地图
目录基本概念代码与实例基本概念这里使用echarts,框架用vue cli,下面这个链接是vue cli导入echartshttps://blog.csdn.net/qq78442761/article/details/97756198这里只有一点要注意!!导入后,已经集成了很多地图的json文件,或者js,只要调用就可以了!程序运行截图如下:...
·
目录
基本概念
这里使用echarts,框架用vue cli,下面这个链接是vue cli导入echarts
https://blog.csdn.net/qq78442761/article/details/97756198
这里只有一点要注意!!导入后,已经集成了很多地图的json文件,或者js,只要调用就可以了!
程序运行截图如下:
代码与实例
vue代码如下:
<template>
<div>
<div>
<div id="main" style="width: 500px; height:500px"></div>
</div>
</div>
</template>
<script>
import echarts from 'echarts';
import 'echarts/map/js/province/jiangsu'
export default {
mounted(){
this.drawLine();
},
methods: {
//开始画图了
drawLine() {
let myChart = echarts.init(document.getElementById('main'));
let option = {
title: {
// text: 'XXXXXXXX',
subtext: '江苏省分布图',
left: 'right'
},
tooltip: {
trigger: 'item',
showDelay: 0,
transitionDuration: 0.2,
formatter: function (params) {
let value = (params.value + '').split('.');
value = value[0].replace(/(\d{1,3})(?=(?:\d{3})+(?!\d))/g, '$1,');
return params.seriesName + '<br/>' + params.name + ': ' + value;
}
},
visualMap: {
left: 'left',
min: 500000,
max: 3800000,
inRange: {
color: ['#313695', '#4575b4', '#74add1', '#abd9e9', '#e0f3f8', '#ffffbf', '#fee090', '#fdae61', '#f46d43', '#d73027', '#a50026']
},
text:['High','Low'],
calculable: true,
show: false
},
series: [
{
name: '可调资源分布',
type: 'map',
roam: true,
map: '江苏',
label: {
normal: {
show: true,
textStyle: {
color: 'rgba(0, 255, 0, 1)'
}
}
},
itemStyle:{
emphasis:{label:{show:true}}
},
// 文本位置修正
textFixed: {
Alaska: [20, -20]
},
data:[
{name: '南京市', value: 4822023},
{name: '常州市', value: 731449},
{name: '徐州市', value: 6553255},
{name: '淮安市', value: 2949131},
{name: '南通市', value: 38041430},
{name: '宿迁市', value: 5187582},
{name: '无锡市', value: 3590347},
{name: '扬州市', value: 917092},
{name: '盐城市', value: 632323},
{name: '苏州市', value: 1931751},
{name: '泰州市', value: 9919945},
{name: '镇江市', value: 1392313},
{name: '连云港市', value: 1595728}
]
}
]
};
myChart.setOption(option)
}
}
}
</script>
<style scoped>
</style>
更多推荐
已为社区贡献33条内容
所有评论(0)