在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

拜拜了，下班