如何利用在vue中echart 生成全国、省、市地图

生成中国地图比较简单,参照echarts文档就可以实现，可能就是稍微花一点点时间。下面记录通过cdn 引入echart 和npm安装echart来实现地图的方式

1、通过cdn方式

在 public/index.html 页面引入echart cdn 和 echart map数据china.js

   <script src="https://cdn.bootcss.com/echarts/4.3.0/echarts.min.js"></script><script src="http://gallery.echartsjs.com/dep/echarts/map/js/china.js"></script>

在vue.config.js 进行配置，通过cdn引入的依赖文件都需要在这里进行配置

//这里同时开启了gzip压缩
const path = require('path')
const CompressionPlugin = require('compression-webpack-plugin')
const productionGzipExtensions = /\.(js|css|json|txt|html|ico|svg)(\?.*)?$/i;
module.exports = {productionSourceMap: false,configureWebpack: config => {if (process.env.NODE_ENV === 'production') {return {plugins: [new CompressionPlugin({test: productionGzipExtensions,threshold: 10240,deleteOriginalAssets: false})],externals: {'echarts': 'echarts' // 配置使用CDN}}} else {return {externals: {'echarts': 'echarts' // 配置使用CDN}}}}
}

封装drawMap方法 /chart.js

import echarts from 'echarts'
// 原本这里使用了rich，代码太长删除了，有需要可以看之前的rich例子
const oprions = {roamController: {show: true,x: 'right',mapTypeControl: {'china': true}},geo: {itemStyle: {areaColor: 'transparent'}},series: [{name: 'iphoneX',type: 'map',mapType: 'china',roam: false,label: {normal: {show: true,position: "centerTop",backgroundColor: '#3e7dee',height: 20,padding: 3,formatter: '{c}个',textStyle: {color: "#ccc",fontSize: "10",},},},itemStyle: {normal: {color: 'transparent',borderColor: '#3e91be',areaColor: 'transparent',areaStyle: { areaColor: 'transparent', },textStyle: {color: 'red' //省份字体颜色}},},data: [//这里是各省的数据，可以自己添加{ name: '北京', value: 40 },]}]
}
export const drawMap = (id) => {let mapChart = echarts.init(document.getElementById(id));mapChart.setOption(oprions);window.addEventListener("resize", () => {mapChart.resize();});}

调用

<div id='map'></div>
import {drawMap} from './chart'mounted(){drawMap('map')
}

2、通过npm 安装echart

安装依赖

npm i echarts -S

通过npm 安装echarts 会自己下载china.js和个省的map数据包含json和js格式
封装drawMap方法 /chart.js

import echarts from 'echarts'
import '../../node_modules/echarts/map/js/province/anhui'// 原本这里使用了rich，代码太长删除了，有需要可以看之前的rich例子
const oprions = {roamController: {show: true,x: 'right',mapTypeControl: {'china': true}},geo: {itemStyle: {areaColor: 'transparent'}},series: [{name: 'iphoneX',type: 'map',map: '安徽',roam: false,label: {normal: {show: true,position: "centerTop",backgroundColor: '#3e7dee',height: 20,padding: 3,formatter: '{c}个',textStyle: {color: "#ccc",fontSize: "10",},},},itemStyle: {normal: {color: 'transparent',borderColor: '#3e91be',areaColor: 'transparent',areaStyle: { areaColor: 'transparent', },textStyle: {color: 'red' //省份字体颜色}},},data: [//这里是各省的数据，可以自己添加{ name: '滁州', value: 40 },]}]
}
export const drawMap = (id) => {let mapChart = echarts.init(document.getElementById(id));mapChart.setOption(oprions);window.addEventListener("resize", () => {mapChart.resize();});}

3、通过axios请求json数据

map 地图json数据可以通过npm安装下载；也可以直接去网上找，就不用通过npm安装echarts

根据各地市的编码可以找到对应的map.json文件。
在public文件夹新建js文件，讲滁州的对应的json数据 341100.json方进去
定义options参数

const oprions = {roamController: {show: true,x: 'right',mapTypeControl: {'china': true}},geo: {itemStyle: {areaColor: 'transparent'}},series: [{name: 'iphoneX',type: 'map',map: '滁州',roam: false,label: {normal: {show: true,position: "centerTop",backgroundColor: '#3e7dee',height: 20,padding: 3,formatter: '{c}个',textStyle: {color: "#ccc",fontSize: "10",},},},itemStyle: {normal: {color: 'transparent',borderColor: '#3e91be',areaColor: 'transparent',areaStyle: { areaColor: 'transparent', },textStyle: {color: 'red' //省份字体颜色}},},data: [//这里是各省的数据，可以自己添加{ name: '琅琊', value: 40 },]}]
}

同样在chart.js封装drapMap方法: 这里需要用到axios来请求本地json数据
axios 请求本地json需要将json文件放入/public/js文件夹中

export const drawMap = (id) => {axios.get('/js/341100.json').then(res => {echarts.registerMap('滁州', res.data)let mapChart = echarts.init(document.getElementById(id));mapChart.setOption(oprions);window.addEventListener("resize", () => {mapChart.resize();});})}

放一张滁州市的echart图

如何利用在vue中echart 生成全国、省、市地图相关推荐

利用Excel表格中数据生成地图类型可视化图形案例
利用Excel表格中数据生成地图类型可视化图形案例一.准备工作二.读取excel数据三.创建地图并进行设置创建地图设置地图相关参数四.渲染保存为网页文件写在最后某人工作不设限,创新不断 ...
vue中基于echarts和基于高德地图的两种地图下钻与上浮方式
** vue中基于echarts和基于高德地图的两种地图下钻与上浮方式 ** 基于echarts的地图下钻与上浮(浙江省为例) 第一步:在<template>中构建承载echarts的do ...
vue中ast生成render
我们先使用 vue 的模板编译库 vue-template-compiler 验证一下输出结果. const compiler = require('vue-template-compiler') l ...
Vue中链接生成二维码
1.安装插件 npm install qrcodejs2 --save 2.导入组件 import QRCode from 'qrcodejs2' 3.页面中添加二维码 <div id=&quo ...
vue中实现生成海报图片html2canvas详细教程
该插件详细配置文档地址建议谷歌浏览器打开,因为翻译的比较准确实现效果如图所示 1.安装插件 npm install --save html2canvas 2.将要生成图片的区域用大的元素包裹起来例如 ...
vue使用echart绘制全国地图，叠加图表
场景: 大数据展示全国各省份信息,绘制地图,并在每个省份上叠加图表. 需要做的就是 1.绘制全国地图(不同省份根据数据的不同而颜色不同) 2.每个省份都需要单独叠加一个图表(饼图) 3.地图缩放.图表 ...
vue中引用echarts全国地图
<template><div><div ref="mapInfo" style="width:750px; height: 540px&qu ...
VUE中echart自适应外部div大小
父组件:(因为要做动画效果,父组件要放大且居中,最开始时为了自适应全部都是用的是百分比) html: <div ref="testDiv" class="recta ...
Vue中Html2canvas生成网页局部截图
Html2canvas文档地址 npm安装Html2canvas npm install --save html2canvas 项目文件引入Html2canvas(在哪使用就引入到哪) import ...

如何利用在vue中echart 生成全国、省、市地图

1、通过cdn方式

2、通过npm 安装echart

3、通过axios请求json数据

如何利用在vue中echart 生成全国、省、市地图相关推荐

最新文章

热门文章