vue3中echarts绘制地图

1 散点图

百度地图echarts官网

vue-charts绘制散点图雷达图

<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>