Echarts中的其他图表实训一，实训二

xidiexi

已于 2024-03-25 20:58:43 修改

阅读量455

点赞数 5

分类专栏： vs code 文章标签： echarts 前端 javascript

于 2024-03-25 18:41:34 首次发布

本文链接：https://blog.csdn.net/xidiexi/article/details/137021938

版权

vs code 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

销售经理	销售代表	客户总数	已购买客户数量	销售额	销售任务额	完成率
王斌	黄著	518	468	3,134,352.75	3,494,768.89	0.89687
王斌	刘旺坚	1,747	1,547	8,150,670.62	9,256,901.40	0.880497
王斌	李文科	848	748	4,677,846.24	5,017,934.03	0.932226
王斌	蔡铭浪	673	601	4,234,075.23	4,547,376.05	0.931103
刘倩	胡斌彬	2,359	2,059	9,903,786.32	11,351,234.98	0.872485
刘倩	廖舒婷	479	429	2,657,902.04	2,975,019.23	0.893407
刘倩	胥玉英	1,162	1,012	5,128,837.07	4,836,006.07	1.060552
刘倩	邵雪梅	597	561	3,954,075.17	4,338,816.05	0.911326
袁波	刘俊权	472	422	2,290,201.87	2,384,432.89	0.960481
袁波	古旭高	1,338	1,188	6,193,413.66	6,725,379.34	0.920902
袁波	段博艳	430	367	1,695,026.60	1,889,511.10	0.897072
袁波	王萍	1,382	1,232	6,736,514.25	6,153,310.88	1.094779

实训一：

绘制散点图，这里只需要标明已购买客户数量和销售额就可以，所以我们选择使用基本散点图

<!DOCTYPE html>
<html>
 
<head>
    <meta charset="utf-8">
    <!--引入ECharts脚本-->
    <script src="js/echarts.js"></script>
</head>
 
<body>
    <!---为ECharts准备一个具备大小（宽高）的DOM-->
    <div id="main" style="width: 600px; height: 400px"></div>
    <script type="text/javascript">
        //基于准备好的DOM，初始化ECharts图表
        var myChart = echarts.init(document.getElementById("main"));
        var option = {
            title: {
                text: '已购买客户数量与销售额关系散点图'
            },
            xAxis: {
                name: '已购买客户数量'
            },
            yAxis: {
                name: '销售额'
            },
            series: [{
                type: 'scatter',
                data: [
                            [468,313435275 ],
                            [1547,815067062 ],
                            [748,467784624 ],
                            [601,423407523 ],
                            [2059,990378632],
                            [429,265790204],
                            [1012, 512883707 ],
                            [561, 395407517 ],
                            [422, 229020187 ],
                            [1188, 619341366 ],
                            [367, 169502660 ],
                            [1232, 673651425 ]

                    // 在这里继续添加数据点，格式为 [已购买客户数量, 销售额]
                ]
            }]
        };
        myChart.setOption(option); 
    </script>
</body>
 
</html>

实训二：

题目所要求的是销售任务完成情况，我们可以理解为其任务完成率，我们可以求出其任务完成率，然后绘制一个仪表盘，但是如果我们使其所有数据都在一个仪表盘中呈现会出现数据看不清的情况，所以可以添加按钮，使其对应每一个销售的完成率

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Sales Representatives Completion Rate</title>
    <script src="https://cdn.staticfile.org/echarts/4.7.0/echarts.min.js"></script>
    <!-- <style>
       background.Image:[image\u=1023686785,106752613&fm=173&app=25&f=JPEG.jpg]
"background.style":{
"content":"''",
"pointer-events":"none",
"position":"absolute",//图片位置
"width":"100%",

"height":"100%",
"z-index":"99999",

"background-position":"center",

"background.repeat":"no-repeat",

"background-size":"60%,60%",//图片大小

"opacity":0.2//透明度
}

background.useFront:true,

background.useDefault:false,
</style> -->
</head>
    <!-- 销售代表按钮 -->
    <button onclick="showCompletionRate(0)">黄著</button>
    <button onclick="showCompletionRate(1)">刘旺坚</button>
    <button onclick="showCompletionRate(2)">李文科</button>
    <button onclick="showCompletionRate(3)">蔡铭浪</button>
    <button onclick="showCompletionRate(4)">胡斌彬</button>
    <button onclick="showCompletionRate(5)">廖舒婷</button>
    <button onclick="showCompletionRate(6)">胥玉英</button>
    <button onclick="showCompletionRate(7)">邵雪梅</button>
    <button onclick="showCompletionRate(8)">刘俊权</button>
    <button onclick="showCompletionRate(9)">古旭高</button>
    <button onclick="showCompletionRate(10)">段博艳</button>
    <button onclick="showCompletionRate(11)">王萍</button>

    <div id="chart-container" style="width: 800px; height: 600px;"></div>

    <script>
        var salesRepresentatives = ['黄著', '刘旺坚', '李文科', '蔡铭浪', '胡斌彬', '廖舒婷', '胥玉英', '邵雪梅', '刘俊权', '古旭高', '段博艳', '王萍'];
        var completionRates = [0.896869821, 0.880496644, 0.932225536, 0.931102945, 0.872485358, 0.893406676, 1.06055224, 0.911325838, 0.960480741, 0.920901758, 0.897071523, 1.094778792];

        var chartContainer = document.getElementById('chart-container');
        var myChart = echarts.init(chartContainer);

        function showCompletionRate(index) {
            var option = {
               
                title: {
                    text: salesRepresentatives[index] + '任务完成率',
                    subtext: '2024年',
                    left: 'center'
                },
                series: [{
                    type: 'gauge',
                    startAngle: 180,
                    endAngle: 0,
                    center: ['50%', '50%'],
                    min: 0,
                    max: 120,
                    splitNumber: 12,
                    detail: {
                        show: true
                    },
                    data: [{
                        value: completionRates[index] * 100,
                        name: salesRepresentatives[index]
                    }]
                }]
    };

            myChart.setOption(option);
        }
    </script>
    </body>
    </html>

也可以不用按钮，其代码为

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Multi-dashboard</title>
    <script src="https://cdn.staticfile.org/echarts/4.7.0/echarts.min.js"></script>
</head>
<body>
    <div class="dashboard-container"></div>
    <script>
        var dashboardContainer = document.querySelector('.dashboard-container');
        
        var completionRates = [0.896869821, 0.880496644, 0.932225536, 0.931102945, 0.872485358, 0.893406676, 1.06055224, 0.911325838, 0.960480741, 0.920901758, 0.897071523, 1.094778792];
        var salesRepresentatives = ['黄著', '刘旺坚', '李文科', '蔡铭浪', '胡斌彬', '廖舒婷', '胥玉英', '邵雪梅', '刘俊权', '古旭高', '段博艳', '王萍'];

        for (var i = 0; i < salesRepresentatives.length; i++) {
            var dashboardDiv = document.createElement("div");
            dashboardDiv.id = 'dashboard' + i;
            dashboardDiv.style.width = '400px';
            dashboardDiv.style.height = '300px';
            dashboardContainer.appendChild(dashboardDiv);

            var dashboardChart = echarts.init(dashboardDiv);

            var option = {
                title: {
                    text: salesRepresentatives[i] + ' 销售任务完成情况'
                },
                tooltip: {
                    formatter: '{a} <br/>{b} : {c}%'
                },
                series: [{
                    name: '任务完成率',
                    type: 'gauge',
                    detail: {
                        formatter: '{value}%'
                    },
                    data: [{value: completionRates[i] * 100, name: '完成率'}]
                }]
            };

            dashboardChart.setOption(option);
        }
    </script>
</body>
</html>DOCTYPE html>
<html>
 
<head>
    <meta charset="utf-8">
    <!--引入ECharts脚本-->
    <script src="js/echarts.js"></script>
</head>
<body>
    <!---为ECharts准备一个具备大小（宽高）的DOM-->
    <div id="main" style="width: 600px; height: 400px"></div>
    <script type="text/javascript">
        //基于准备好的DOM，初始化ECharts图表
        var myChart = echarts.init(document.getElementById("main"));
        var completionRates = [0.896869821, 0.880496644, 0.932225536, 0.931102945, 0.872485358, 0.893406676, 1.06055224, 0.911325838, 0.960480741, 0.920901758, 0.897071523, 1.094778792];
        var salesRepresentatives = ['黄著', '刘旺坚', '李文科', '蔡铭浪', '胡斌彬', '廖舒婷', '胥玉英', '邵雪梅', '刘俊权', '古旭高', '段博艳', '王萍'];

        var option = {
            title: {
                text: '销售代表销售任务完成情况仪表盘'
            },
            tooltip: {
                formatter: '{a} <br/> {b} : {c}%'
            },
            series: []
        };

        for (var i = 0; i < salesRepresentatives.length; i++) {
            option.series.push({
                name: salesRepresentatives[i],
                type: 'gauge',
                detail: {
                    formatter: '{value}%'
                },
                data: [{value: completionRates[i] * 100, name: salesRepresentatives[i]}] // 根据实际数据计算完成率并乘以100显示在仪表盘中
            });
        }
myChart.setOption(option); 
    </script>
</body>
 
</html>

其呈现效果为