大数据可视化作业

最新推荐文章于 2024-07-06 15:33:51 发布

bai10161206

最新推荐文章于 2024-07-06 15:33:51 发布

阅读量331

点赞数 3

文章标签：信息可视化

本文链接：https://blog.youkuaiyun.com/bai10161206/article/details/137064437

版权

文章展示了如何使用ECharts库在HTML中创建两个图表，一个是销售额与已购买客户数量的散点图，另一个是销售额与任务销售额的仪表盘，以清晰地展示销售数据和关键指标。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1销售额与已购买客户数量构成的散点图

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="js/echarts.js"></script>
</head>
<body>
    <div id="main" style="width: 600px;height: 400px;"></div>
    <script type="text/javascript">
    var myChar=echarts.init(document.getElementById("main"));
    
    var option={
        title:{
            text:'销售额与已购客户散点图',
        },
        tooltip:{
            trigger:'item',
            formatter:"{b}{c}",//文本布局
        },
        xAxis:{scale:true,name:'销售额'},
        yAxis:{scale:true,name:'已购买客户数量'},
        series:[
        {
                type:'scatter',
                symbolSize:10,
                data:[[3134352.75,468],[8150670.62,1547],[4677846.24,748],[4234075.23,601],[9903786.32,2059],[2657902.04,429],[5128837.07,1012],[3954075.17,561],[2290201.87,422],[6193413.66,1188],[1695026.6,367],[6736514.25,1232],]
            }
        ]
        };
 myChar.setOption(option)
 </script>
 </body>
 </html>

效果

2销售额与任务销售额构成的仪表盘

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="js/echarts.js"></script>
</head>
<body>
    <div id="main" style="width: 600px;height: 400px;"></div>
    <script type="text/javascript">
    var myChar=echarts.init(document.getElementById("main"));
    
    var option = {
      title:{   //标题
            text:'销售额',
            x:'center',//x在父类居中
            y:2,
        },
        tooltip: {
            formatter: '{a} <br/>{b} : {c}%'
        },
        series: [{
        min:0,//最小数据值
        max:3494768.89,//最大数据值
        type: 'gauge',
        detail: {
        formatter: '{value}'
        },
        radius:"80%",//仪表盘半径
        center:["50%","50%"],//仪表盘位置(圆心坐标)
        data: [{
          value: 1494768.89,
          name: '任务额度'
        }]
        }]
};
 myChar.setOption(option)
 </script>
 </body>
 </html>

效果