在vue中使用echarts,echarts-map:echarts画地图_this.$echarts.registermap-优快云博客

本文详细介绍了如何在Vue项目中安装并使用ECharts绘制折线图和地图，包括安装步骤、代码示例和配置选项，适用于希望提升数据可视化能力的前端开发者。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

拜拜了，下班