数据可视化第四章实训

最新推荐文章于 2024-05-29 11:55:17 发布

Xiaozou_Q

最新推荐文章于 2024-05-29 11:55:17 发布

阅读量335

点赞数 4

文章标签：信息可视化

本文链接：https://blog.csdn.net/Xiaozou_Q/article/details/137056250

版权

数据表格如下

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: 3134352.75,
          name: 'SCORE'
        }]
        }]
};
 myChar.setOption(option)
 </script>
 </body>
 </html>