在vue中使用echarts,echarts-map:echarts画地图

1、首先安装：cnpm install echarts --save

2、然后main.js引入（也可以组件内引入）

// 引入ECharts图表公共组件
import echarts from 'echarts'
Vue.prototype.$echarts = echarts

3、再然后我们来画个折线图，长这个样子，单纯的折线图哈

3.1、接下来是折线图的代码

<template>
<div ref="orgOptionsline" :style="{width:'800px',height:'200px'}"></div>
</template><script>export default {name: 'HelloWorld',data () {return {orgOptionsline: {textStyle: {color: "#9cbfde"},color: ['#2da8ff', '#ffce55', '#ec87bf'], //手动设置每个图例的颜色grid: {left: '30px',right: '0px',top: '10px',bottom: "30px"},xAxis: {type: 'category',boundaryGap: true,axisLine: {show: false,lineStyle: {color: "#e7e7e7"}},axisTick: {show: false},data: ['a', 'b', 'c', 'd', 'e']},yAxis: {type: 'value',boundaryGap: true,// 网格线splitLine: {lineStyle: {color: '#e7e7e7'}},// 坐标轴轴线样式axisLine: {show: false,},// 坐标轴刻度axisTick: {show: false},},series: [{name: 'a',type: 'line',symbol: 'circle', //拐点样式symbolSize: 4,stack: '总量1',lineStyle: {width: 1},data: [10, 40, 20, 50, 50]}, ]}}},mounted() {this.echarts()},methods:{// 图表echarts() {var orgOptionsline_charts = this.$echarts.init(this.$refs.orgOptionsline);orgOptionsline_charts.setOption(this.orgOptionsline)},}
}
</script>

4、再接下来我们来画地图，长这个样子，鼠标放到每个区域上会显示内容

4.1、地图的代码

<template><div class="echart"><div ref="oroptionmapjsonr" :style="{width:'400px',height:'400px'}"></div></div>
</template><script>var ltopdata = [{name: '北京',value: 2},{name: '天津',value: 1},{name: '上海',value: 2},{name: '重庆',value: 1},{name: '河北',value: 1},{name: '河南',value: 1},{name: '云南',value: 1},{name: '辽宁',value: 1},{name: '黑龙江',value: 1},{name: '湖南',value: 1},]import chinaJson from 'echarts/map/json/china.json'export default {name: 'HelloWorld',data() {return {oroptionmapjsonr: {textStyle: {color: "#9cbfde",fontSize: 10.67,},color: ['#fff'], //手动设置每个图例的颜色tooltip: {// trigger: 'item',formatter: function(params) {var percent = 0;var total = 0;for (var i = 0; i < ltopdata.length; i++) {if (params.name == ltopdata[i].name) {if (params.name !== '') {return params.name + '\n' + ltopdata[i].value;} else {return '';}}}},},legend: {show: false},toolbox: {show: true,orient: 'vertical',x: 'right',y: 'center',},roamController: {show: true,x: 'right',mapTypeControl: {'china': true}},series: [{name: 'iphoneX',type: 'map',mapType: 'china',roam: false,left: '25%',top: '25%',// zoom: 1,center: [115.97, 29.71],// aspectScale:1,itemStyle: {normal: {label: {show: false},areaColor: '#fff',borderColor: '#41c7db ',borderWidth: 1,},emphasis: {areaColor: '#41c7db '},},data: ltopdata}]},}},mounted() {this.echarts()},methods: {// 图表echarts() {this.$echarts.registerMap('china', chinaJson);var oroptionmapjsonr_charts = this.$echarts.init(this.$refs.oroptionmapjsonr);oroptionmapjsonr_charts.setOption(this.oroptionmapjsonr)},}}
</script><!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped></style>

5、最后就没有然后了，直接看代码哈我就不一步一步拆开描述了，我相信对vue的人都能看懂，加油！！！

6、放个源码git链接，里面还有个柱形图：https://gitee.com/songtaohong/echarts.git

拜拜了，下班

在vue中使用echarts,echarts-map:echarts画地图相关推荐

在vue中使用图表组件工具echarts（一）
本文介绍一款非常好用的图表绘画工具---echarts npm 安装 ECharts 你可以使用如下命令通过 npm 安装 ECharts npm install echarts 安装完成后,就可以在 ...
axios vue 加载效果动画_在vue中通过axios异步使用echarts
现实的工作中, 数据不可能是像之前的demo演示的那样把数据写死的. 所有的数据都应该通过发送请求进行获取, 所以, 这篇文章, 我将在Vue项目中使用Echarts: 在Vue中引入Echarts中 ...
Vue中构造数组数据-map和forEach方法梳理
数组操作是前端最重要的数据操作,构造数组数据,又是数组操作中很常见的.本文将梳理下map和forEach方法在Vue项目中的使用. 想要深入理解这两个方法,一定要手写几次简易的实现,理解其中的要义.这 ...
vue中因数据延迟导致echarts无法渲染问题
编写一个echart组件,只需传值就可用,如果数据变化使用watch监听重新渲染echarts <template><div id="echarts_bazaar" ...
VUE中使用Echarts绘制地图迁移
踩坑说明很久以前写jsp时使用过echarts的china.js插件,不过echarts是2.0的,目前vue项目中使用echarts3.8.5,直接将china.js插件引入,代码复制,运行一看, ...
谷歌地图API教程及在VUE中的使用
目录一.获取密钥API Key 1.创建项目 2.启用Maps JavaScript API服务 3.创建API Key 4.设置结算账户二.头文件中引入api资源文件 1.获 ...
echart高级使用_Vue:在Vue中使用echarts
前言公司的项目中需要对数据做可视化处理,高级点的D3.js目前还没接触到,因此选用了大众化的Echarts, 在vue的生态系统中已经有实现好的vue-echarts,但是使用现成的就意味着必须使用 ...
在VUE中使用Echarts世界地图，并根据经纬度标记位置
项目需求: 根据经纬度在地图上标记(14种不同类型的标记)出位置,点击标记后出现详细内容,再点击内容跳转页面一.下载 echarts 包 npm install --save echarts 二. ...
vue中基于echarts和基于高德地图的两种地图下钻与上浮方式
** vue中基于echarts和基于高德地图的两种地图下钻与上浮方式 ** 基于echarts的地图下钻与上浮(浙江省为例) 第一步:在<template>中构建承载echarts的do ...
vue中使用echarts结合百度地图制作地图（引入百度地图、获取百度地图实例、设置百度地图）
1.初始化echarts以及例子可以看管网的地址:https://echarts.apache.org/examples/zh/editor.html?c=map-polygon 2说下我遇到的问题 ...

在vue中使用echarts,echarts-map:echarts画地图

在vue中使用echarts,echarts-map:echarts画地图相关推荐

最新文章

热门文章