vue项目使用echarts画地图

285 阅读1分钟

直接步入正题:

地图插件在node_modules文件中的echarts/map/js/province中

"dependencies": {
        "axios": "^0.18.0",
        "babel-polyfill": "^6.26.0",
        "echarts": "^4.1.0",
        "echarts-liquidfill": "^2.0.2",
        "element-ui": "^2.6.1",
        "jquery": "^3.4.1",
        "moment": "^2.26.0",
        "node-sass": "^4.11.0",
        "nprogress": "^0.2.0",
        "sass-loader": "^7.1.0",
        "video.js": "^7.6.0",
        "vue": "^2.5.2",
        "vue-router": "^3.0.1",
        "vuex": "^3.1.0"
    }
import Vue from "vue";
import App from "./App.vue";
import router from "./router";
import store from "./store";
import Element from 'element-ui'
import 'echarts-liquidfill'
import 'element-ui/lib/theme-chalk/index.css'

Vue.config.productionTip = false
Vue.use(Element)

new Vue({
    router,
    store,
    render: (h) => h(App),
}).$mount("#app");
<template>
    <div><div id="main" style="width: 100%;height:760px;"></div></div>
</template>
<script>
import jq from 'jquery';
import echarts from 'echarts';
import 'echarts/map/js/province/hubei.js';

export default {
    name: 'map2',
    data() {
        return {};
    },
    created() {},
    mounted() {
        this.initMap();
    },
    methods: {
        initMap() {
            var myChart = echarts.init(document.getElementById('main'));
            var option = {
                title: {
                    text: '地图入门示例-type:map'
                },
                tooltip: {},
                grid: {
                    default: false,
                    x: '0%',
                    y: '0%',
                    width: '0%',
                    height: '0%'
                },
                toolbox: {
                    show: true,
                    feature: {
                        dataView: {
                            readOnly: false
                        },
                        saveAsImage: {}
                    }
                },
                xAxis: {},
                yAxis: {},
                series: {
                    type: 'map',
                    map: '湖北',
                    left: '20%',
                    itemStyle: {
                        normal: {
                            borderColor: '#2364c9',
                            borderWidth: 1,
                            areaColor: '#2BA7E5',
                            label: {
                                show: true
                            }
                        },
                        emphasis: {
                            areaColor: '#0f4eb0'
                        }
                    },
                    data: []
                }
            };
            myChart.setOption(option);
            //单击事件
            myChart.on('click', this.areaClick);
        },
        areaClick(params) {
            console.log(params);
        }
    }
};
</script>