vue3中echarts绘制地图

1 散点图

百度地图echarts官网

<template>
    <div class="bmap_container">
        <v-chart :option="options" />
    </div>
</template>
<script setup>
import { onMounted,reactive } from  vue 
import  echarts/extension/bmap/bmap 
import mystyleJson from  ../assets/mystyle.js 
let options = reactive({})
onMounted(()=>{
    options.title = {
        text: 外卖销售数据大盘 ,
        subtext: 销售趋势统计 ,
        sublink: http://www.baidu.com ,
        left: center 
    }
    options.bmap={
        key: iz9QPjUAe3tXx7CNgnY1t0afdAlwcHRQ ,
        center:[104.114129,37.550339],
        zoom:5,
        roam:false,
        mapStyle:{
            styleJson:mystyleJson
        }
    }
    let testPoint = [{
        name: 海门 ,
        value:[121.15,31.89,80]
    },{
        name: 南京 ,
        value:[118.78,32.04,100]
    }]
    let testPoint2 = [{
        name: 北京 ,
        value:[116.404188,39.917565,250]
    },{
        name: 上海 ,
        value:[121.487439,31.237411,130]
    }]
    options.tooltip = {}
    options.series=[{
        name: 销售额 ,
        type: scatter ,
        coordinateSystem: bmap ,
        data:testPoint,
        encode:{
            value:2
        },
        itemStyle:{
            color: purple 
        },
        symbolSize:function(val){
            return val[2]/10
        },
        label:{
            show:false,//值为false时需将emphasis设置为true，鼠标划上会显示
            position: right ,
            formatter:function(v){
                return `${v.data.name} - ${v.data.value[2]}`
            }
        },
        emphasis:{
            label:{
                show:true
            }
        }
    },{
        name: top2 ,
        type: effectScatter ,
        coordinateSystem: bmap ,
        data:testPoint2,
        encode:{
            value:2
        },
        itemStyle:{
            color: purple 
        },
        symbolSize:function(val){
            return val[2]/10
        },
        label:{
            show:true,
            position: right ,
            formatter:function(v){
                return `${v.data.name} - ${v.data.value[2]}`
            }
        },
        hoverAnimation:true,
        rippleEffect:{//添加该属性后，水韵纹会变成线圈
            brushType: stroke 
        },
        itemStyle:{
            color: red ,
            shadowBlur:20,
            shadowColor: #333 
        }
    }]
})

</script>
<style scoped>
.bmap_container{
    width:100%;
    height:100%;
}
</style>

2 水球图

官方提供github-api地址

步骤：
1、安装依赖

npm install echarts-liquidfill -S

2、引入依赖，编写代码

<template>
    <div ref="container" class="liquidfill_container"></div>
</template>
<script setup>
import * as echarts from  echarts 
import  echarts-liquidfill 
import { onMounted,ref } from  vue 
const container = ref( liquidfill_container )
onMounted(()=>{
    const chart = echarts.init(container.value)
    chart.setOption({
        series:[{
            type: liquidFill ,
            data:[0.68,0.60],
            label:{
                fontSize:15
            },
            center:[ 50% , 50% ],
            radius: 90% 
        }]
    })
})
</script>
<style scoped>
    .liquidfill_container{
        height:100%;
        width:100%;
        font-size:12
    }
</style>

3 词云

github词云地址
步骤：
1、安装依赖

npm install echarts-wordcloud -S

2、引入依赖，编写代码

<template>
    <div class="container" ref="wordCloudContainer">111</div>
</template>
<script setup>
import * as echarts from  echarts 
import  echarts-wordcloud 
import {onMounted,ref,reactive} from  vue 
const wordCloudContainer = ref( wordCloudContainer )
const data = reactive([{
    name: 曹操 ,
    value:30
},{
    name: 袁绍 ,
    value:50
},{
    name: 孙策 ,
    value:5
},{
    name: 袁术 ,
    value:10
},{
    name: 陶谦 ,
    value:3
},{
    name: 刘备 ,
    value:1
},{
    name: 公孙瓒 ,
    value:5
},{
    name: 马腾 ,
    value:3
},{
    name: 韩遂 ,
    value:3
},{
    name: 刘表 ,
    value:7
},{
    name: 刘璋 ,
    value:4
},{
    name: 张鲁 ,
    value:3
}
])
onMounted(()=>{
    let chart = echarts.init(wordCloudContainer.value)
    chart.setOption({
        series:[{
            type: wordCloud ,
            shape: circle ,
            left:  center ,
            top:  center ,
            width:  90% ,
            height:  90% ,
            textStyle: {
                fontFamily:  sans-serif ,
                fontWeight:  bold ,
                // Color can be a callback function or a color string
                color: function () {
                    // Random color
                    return  rgb(  + [
                        Math.round(Math.random() * 160),
                        Math.round(Math.random() * 160),
                        Math.round(Math.random() * 160)
                    ].join( , ) +  ) ;
                }
            },
            emphasis: {
                focus:  self ,
                textStyle: {
                    shadowBlur: 10,
                    shadowColor:  #333 
                }
            },
            data:data
        }]
    })
})
</script>
<style scoped>
.container{
    width:100%;
    height:100%;
}
</style>