ECharts的常用图表(二）

最新推荐文章于 2024-09-02 17:34:07 发布

番外剧.

最新推荐文章于 2024-09-02 17:34:07 发布

阅读量195

点赞数 1

文章标签： echarts 前端 javascript

本文链接：https://blog.csdn.net/2302_80385233/article/details/137063856

版权

销售任务完成情况表

案例一：

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

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

案例二：

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

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