代码结构

index.js

$(function echart_map(){
    var myChart = echarts.init(document.getElementById('chart_map'));
    $.get("json/map.json",function(weiboData){
        weiboData = weiboData.map(function (serieData){
        var px = serieData[0] / 1000;
        var py = serieData[1] / 1000;
        var res = [
            [px,py]
        ];
        for (var i = 2;i< serieData.length;i +=2){
        var dx = serieData[i] / 1000;
        var dy = serieData[i+1] / 1000;
        var x = px + dx;
        var y = py + dy;
        res.push([x,y]);
        px = x;
        py = y;
        }
    return res;
        });
        console.log(weiboData);

        option = {
            roam:true,
            legend:{
                left:'left',
                data:['强','中','弱'],
                top:'5%',
                left:'1%',
                textStyle:{
                    color:'#ccc'
                }
            },

        geo:{
            map:'china',
            label:{
                emphasis:{
                    show:false
                }
            },
            itemStyle:{
                normal:{
                    areaColor:'#323c48',
                    borderColor:'#111'
                },
                emphasis:{
                    areaColor:'#2a333d'
                }
            }
        },
        series:[{
            name:'弱',
            type:'scatter',
            coordinateSystem:'geo',
            symbolSize:1,
            large:true,
            itemStyle:{
                normal:{
                    shadowBlur:2,
                    shadowColor:'rgba(37,140,249,0.8)',
                    color:'rgba(37,140,249,0.8)'
                }
            },
            data:weiboData[0]
        },{
            name:'中',
            type:'scatter',
            coordinateSystem:'geo',
            symbolSize:1,
            large:true,
            itemStyle:{
                normal:{
                    shadowBlur:2,
                    shadowColor:'rgba(14,241,242,0.8)',
                    color:'rgba(14,241,242,0.8)'
                }
            },
            data:weiboData[1]
        },{
            name:'强',
            type:'scatter',
            coordinateSystem:'geo',
            symbolSize:1,
            large:true,
            itemStyle:{
                normal:{
                    shadowBlur:2,
                    shadowColor:'rgba(255,255,255,0.8)',
                    color:'rgba(255,255,255,0.8)'
                }
            },
            data:weiboData[2]

        }]    
        };
        myChart.setOption(option);
    
    });
});

ciyu.js

$(function echart_3() {
    var myChart = echarts.init(document.getElementById('chart_3'));

    var option ={
        series:[{
            name:'数量',
            type:'funnel',//漏斗图
            left:'10%',
            width:'80%',
            label:{
                normal:{
                formatter:'{b}:{c}'
                },
                emphasis:{
                    position:'inside',
                    formatter:'{b}:{c}'
                    }
            },
            labelLine:{
                normal:{
                    show:false
                }
            },
            itemStyle:{
            
            normal:{
                opacity:0.7
            }},
            data:[
            
            ]
        }]
        };
        loadDATA2(option);
        myChart.setOption(option);

        function loadDATA2(option){
            var names1 = [];
            var brower1 = [];
            $.ajax({
                type:'get',
                url:"json/ciyu.json",
                dataType:"json",
                success:function (result){
                    $.each(result.list2,function(index,item){
                    names1.push(item.word);
                    brower1.push({
                        value: item.acc,
                        name:item.word
                    });
                    
                    });
                myChart.setOption({
                    legend:{
                        data:names1
                    },
                    series:[{
                        data:brower1
                    }]
                });    


                },
                error:function(errorMsg){
                    alert("加载数据失败");
                }

            });
        }
});

zhanbi.js

$(function echart_1() {
    var myChart = echarts.init(document.getElementById('chart_1'));
    var option = {
        legend: {
            x: 'center',
            y: '15%',
            data: [],
            icon: 'circle',
            textStyle: {
                color: '#333333',
            }
        },
        series: [{
            name: '',
            type: 'pie',
            //起始角度，支持范围[0, 360]
            startAngle: 0,
            //饼图的半径，数组的第一项是内半径，第二项是外半径
            radius: [50, 120],
            //支持设置成百分比，设置成百分比时第一项是相对于容器宽度，第二项是相对于容器高度
            center: ['50%', '50%'],
            //是否展示成南丁格尔图，通过半径区分数据大小。可选择两种模式：
            // 'radius' 面积展现数据的百分比，半径展现数据的大小。
            // 'area' 所有扇区面积相同，仅通过半径展现数据大小
            roseType: 'area',
            //是否启用防止标签重叠策略，默认开启，圆环图这个例子中需要强制所有标签放在中心位置，
            //可以将该值设为 false。
            //avoidLabelOverlap: false,
            label: {
                normal: {
                    show: true,
                    formatter: '{c}%'
                },
                    emphasis: {
                        show: true
                    }
                },
                labelLine: {
                    normal: {
                        show: true,
                        length2: 1,
                    },
                    emphasis: {
                        show: true
                    }
                },
                data: []
            }]
            };
            loadDATA(option);
            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option);

            function loadDATA(option) {
                var names = [];
                var brower = [];
                $.ajax({
                    type: 'get',
                    url: "json/zhanbi.json",
                    dataType: "json",
                    success: function(result) {
                        $.each(result.list, function(index, item) {
                            names.push(item.types); //挨个取出类别并填入类别数组
                            brower.push({
                                value: item.bl,
                                name: item.types
                            });
                        });
                        myChart.setOption({ //加载数据图表
                                            legend: {
                    data: names
                },
                series: [{
                    data: brower
                }]
            });
        },
        error: function(errorMsg) {
            alert("加载数据失败");
        }
    });
}
});

inde.html

<!DOCTYPE html>
<html>
<head>    
    <meta charset="UTF-8">
    <title>微博情感分析图</title>
    <script src="js/echarts.min.js"></script>
    <script src="js/jquery-3.5.1.min.js"></script>
    <script src="js/china.js"></script>
    <script src="js/index.js"></script>
    <script src="js/zhanbi.js"></script>
    <script src="js/ciyu.js"></script>

    <style>
        body{
            margin: 0px;
            padding: 20px;
            background-color: #f5f5f5;
            font-family: Arial,sans-serif;
        }
        .container{
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            max-width: 1400px;
            margin: 0 auto;
            gap: 20px;
        }
        .left-panel{
            flex: 0 0 600px;
        }
        .right-panel{
            flex: 1;
            display: flex;
            flex-direction: column;
            gap: 20px;
            min-width: 600px;
        }
        .chart-container{
            background-color: white;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
            padding: 15px;
        }
        /* 地图图标样式 */
        #chart_map{
            width:100%;
            height: 610px;
        }
        /* 左上侧图标样式 */
        #chart_1{
            width: 100%;
            height: 480PX;
        }
        /* 右下图标样式 */
        #chart_3{
            width: 100%;
            height: 390PX;
        }
    </style>
</head>

<body>
<!-- 主布局容器 -->
    <div class="container">
    <!-- 左侧布局，显示地图图标 -->
        <div class="left-panel">
            <div class="chart-container">
            <!-- 全国各个地区微博使用次数的散点图，地图图表 -->
                <div id="chart_map"></div>
            </div>
        </div>

        <div class="right-panel">
            <div class="chart-container">
                <div id="chart_1"></div>
            </div>
    
            <div class="chart-container">
            <div id="chart_3"> </div>
            
            </div>       
        </div>
    </div>

   
</body>

</html>