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、放个源码git链接，里面还有个柱形图：https://gitee.com/songtaohong/echarts.git