vue使用echarts设置中国地图

最新推荐文章于 2024-04-29 17:07:21 发布

PLAN B!

最新推荐文章于 2024-04-29 17:07:21 发布

阅读量214

点赞数

分类专栏： echarts 文章标签： echarts vue.js javascript

本文链接：https://blog.csdn.net/qq_47888106/article/details/122159762

版权

<template>
    <div id="china-map" style="width: 100%; height: 500px"></div>
</template>

<script>
export default {
    mounted() {
        this.initCharts()
    },
    methods: {
        initCharts() {
            let chinaMap = document.getElementById('china-map')
            let myChart = this.echarts.init(chinaMap)
            // 绘制图表  canvas画布
            myChart.setOption(this.option)
            window.onresize = function() {
                console.log('uguufiuu')
                myChart.resize()
            }
        }
    },
    data() {
        return {
            option: {
                title: { text: '中国地图' },
                geo: {
                    show: true,
                    map: 'china',
                    emphasis: {
                        label: {
                            show: false
                        }
                    },
                    label: {
                        emphasis: {
                            show: false
                        },
                        show: true //地图文字显示
                    },
                    itemStyle: {
                        areaColor: '#eee',
                        borderColor: '#fdc000',
                        shadowBlur: 4,
                        shadowColor: '#fdc000',
                        shadowOffsetY: 10
                    }
                },
                series: [
                    {
                        type: 'map',
                        map: 'china',
                        emphasis: {
                            label: false
                        },
                        itemStyle: {