16、vue引入echarts，划中国地图

• Z时代
• 2024-01-10
• 分类：综合

vue引入echarts

npm install echarts --save

main.js引入

import echarts from 'echarts'

Vue.prototype.$echarts = echarts

划中国地图

引入中国地图数据

import 'echarts/map/js/china.js'

<template>
    <div>
        <div ></div>
    </div>
</template>
<script>
export default {
    data() {
        return {
           mydata: []
        }
    },
    mounted() {
        this.drawLine()
      },
    methods:{
               drawLine() {
          this.mydata = [  
                { name: '北京', value: '100' }, { name: '天津', value: this.randomData() },  
                { name: '上海', value: this.randomData() }, { name: '重庆', value: this.randomData() },  
                { name: '河北', value: this.randomData() }, { name: '河南', value: this.randomData() },  
                { name: '云南', value: this.randomData() }, { name: '辽宁', value: this.randomData() }  
                // {name: '黑龙江',value: this.randomData() },{name: '湖南',value: this.randomData() },  
                // {name: '安徽',value: this.randomData() },{name: '山东',value: this.randomData() },  
                // {name: '新疆',value: this.randomData() },{name: '江苏',value: this.randomData() },  
                // {name: '浙江',value: this.randomData() },{name: '江西',value: this.randomData() },  
                // {name: '湖北',value: this.randomData() },{name: '广西',value: this.randomData() },  
                // {name: '甘肃',value: this.randomData() },{name: '山西',value: this.randomData() },  
                // {name: '内蒙古',value: this.randomData() },{name: '陕西',value: this.randomData() },  
                // {name: '吉林',value: this.randomData() },{name: '福建',value: this.randomData() },  
                // {name: '贵州',value: this.randomData() },{name: '广东',value: this.randomData() },  
                // {name: '青海',value: this.randomData() },{name: '西藏',value: this.randomData() },  
                // {name: '四川',value: this.randomData() },{name: '宁夏',value: this.randomData() },  
                // {name: '海南',value: this.randomData() },{name: '台湾',value: this.randomData() },  
                // {name: '香港',value: this.randomData() },{name: '澳门',value: this.randomData() }  
            ]
        // 基于准备好的dom，初始化echarts实例
        let myChart = this.$echarts.init(document.getElementById('myChart'))
        // 绘制图表
        myChart.setOption({
            backgroundColor: '#F7F7F7',
            title: {
                text: '中国地图',
                subtext: '中国地图'
                // sublink: 'http://zh.wikipedia.org/wiki/%E9%A6%99%E6%B8%AF%E8%A1%8C%E6%94%BF%E5%8D%80%E5%8A%83#cite_note-12'
            },
            tooltip: {
                trigger: 'item',
                formatter: '{b}<br/>{c} '
            },
            // toolbox: {
            //     show: true,
            //     orient: 'vertical',
            //     left: 'right',
            //     top: 'center'
            //     // feature: {
            //     //     dataView: {readOnly: false},
            //     //     restore: {},
            //     //     saveAsImage: {}
            //     // }
            // },
            visualMap: {
                max: 500,
                min: 0,
                text: ['高', '低'],
                realtime: false,
                calculable: false,
                itemHeight: '200',
                inverse: true, // 翻转
                orient: 'horizontal',
                inRange: {
                    color: ['#DDDDDD', '#026FDD']
                }
            },
            series: [
                {
                    name: '损失统计',
                    type: 'map',
                    mapType: 'china', // 自定义扩展图表类型
                    itemStyle: {
                        normal: { label: { show: true } },
                        emphasis: { label: { show: true } }
                    },
                    data: this.mydata
                }
            ]
        })
    },
    randomData() {  
     return Math.round(Math.random() * 500);  
    } 
    },
}
</script>

以上是 16、vue引入echarts，划中国地图 的全部内容， 来源链接： utcz.com/z/378936.html