基本概念

这里使用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>

前端笔记-vue cli中使用echarts画江苏省地图相关推荐

Web前端笔记-vue cli中使用echarts加载geo地图
效果是这样的: 此处是使用echarts加载geo地图. 这里简单说下逻辑: 首先npm下个包: npm install echarts 然后用个vue组件封装下. 如下代码: <templat ...
前端笔记-vue cli中axios批量发送get和post请求及注意事项
目录基本概念关键代码基本概念这里安装好axios后,还要安装qs npm install --save qs 在vue cli中在created里面调用方法,他会在页面加载完成后自动调用! 批 ...
前端笔记-vue cli中使用router-link进行路由跳转
目录以前的方法新方法以前的方法以前是通过router的push进行跳转,代码如下: <template><div class="XXXXXXXXXXXXXXXXX& ...
前端笔记-Vue cli中使用axios后JavaScript变量传输给vue变量要注意的地方
目录 axios.all中的注意事项为什么要采用全局的JavaScript变量给vue变量 axios.all中的注意事项如下的请求: methods:{getData(){axios.all([ ...
前端笔记-vue cli中v-bind动态数据实时更新
目录基本概念代码基本概念如下的例子,刚开始运行: 点击按钮: 数据库修改下数据: 再点击按钮刷新下: 下面给出请求的json数据: 刷新有2个方式第一种是强制刷新,这样是有问题的,数据和图表 ...
基于VUE+TS中引用ECharts的中国地图和世界地图密度表
(第一次写掘金,嗯也不知道写啥好.想了想,先来一份简单可口的老菜谱.虽然以前在其他平台也上过,换个地方说不准口味刚好呢哈哈哈哈-) 首先先附上官网 http://echarts.baidu.com/o ...
如何在vue项目中使用echarts和高德地图绘制折线和热力图
1.先下载相关的依赖,这里echarts和高德地图放到一起.(高德地图需要先去申请一个key) // The Vue build version to load with the `import` c ...
前端笔记-vue cli使用echarts
目录过程代码与实例过程首先下载echarts cnpm install echarts -S //或者是 cnpm install echarts --save 下载好后: 在main.js中 ...
前端笔记-vue cli为web添加底纹
目录基本概念代码与实例基本概念这里主要是使用了css预处理首先下载包 npm install stylus stylus-loader 随后创建文件,然后写代码这里还要导入代码: 这里还要 ...

前端笔记-vue cli中使用echarts画江苏省地图

基本概念

代码与实例

前端笔记-vue cli中使用echarts画江苏省地图相关推荐

最新文章

热门文章