Echarts系列(二):vue2.0使用echarts3实现中国地图字符云

本文主要是介绍Echarts系列(二):vue2.0使用echarts3实现中国地图字符云，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

在这里插入图片描述

一、vue使用Echarts流程

首先打开vue项目，cmd进入命令安装echarts依赖包，默认下载最新版本

npm install echarts --save
或者
cnpm install echarts --save   ---建议使用第二种，国内毕竟比国外下载要快

进入src目录里的main.js全局引入echarts，这样就可以在任何组件中使用了

import Echarts from 'echarts'		// 引入 EchartsVue.prototype.$echarts = Echarts	// 给Vue原型上挂载 Echarts

在组件中去创建一个容器，比如说div，必须设置宽高，不然的话图表显示不出，然后在methods中定义一个方法来封装配置的图表，最后在mounted钩子函数内调用即可。话不多说，直接上代码

<template><div class="home"><!-- 柱状图为例，给div绑定ref，可以获取到当前dom元素本身，跟原生获取没什么区别 --><h2>柱状图</h2><divclass="charts"ref="bar"style="width: 600px;height:400px;"></div></div>
</template><script>
export default {name: 'Home',data () {return {}},mounted () {// 调用了methods中的bar方法this.bar()	},methods:{// 柱状图bar () {// 初始化echarts实例，init参数为要绑定的dom元素，通过this.$refs方法获取domlet myChart = this.$echarts.init(this.$refs.bar)// 指定图表的配置项和数据let option = {title: {text: 'ECharts 入门示例'},tooltip: {},legend: {data:['销量']},xAxis: {data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]},yAxis: {},series: [{name: '销量',type: 'bar',data: [5, 20, 36, 10, 10, 20]}]};// 使用刚指定的配置项和数据显示图表。myChart.setOption(option)},}
}
</script><style scoped>.home {width: 100%;height: 100%;}
</style>

二、Vue通过Echarts3.0使用中国地图

在组件中局部引入或者 main.js中全局引入china.js
```
import 'echarts/map/js/china.js'
```

除了这一步操作，其他跟上边操作一样，option配置项改成地图就行，代码：

let option = {title: {text: '订单量',subtext: '纯属虚构',x: 'center'},tooltip: {trigger: 'item'},legend: {orient: 'vertical',x: 'left',data: ['订单量']},dataRange: {x: 'left',y: 'bottom',splitList: [{ start: 1500 },{ start: 900, end: 1500 },{ start: 310, end: 1000 },{ start: 200, end: 300 },{ start: 10, end: 200, label: '10 到 200（自定义label）' },{ start: 5, end: 5, label: '5（自定义特殊颜色）', color: 'black' },{ end: 10 }],color: ['#E0022B', '#E09107', '#A3E00B']},toolbox: {show: true,orient: 'vertical',x: 'right',y: 'center',feature: {mark: { show: true },dataView: { show: true, readOnly: false },restore: { show: true },saveAsImage: { show: true }}},roamController: {show: true,x: 'right',mapTypeControl: {'china': true}},series: [{name: '订单量',type