echarts散点图

最新推荐文章于 2023-03-31 13:11:26 发布

*Major*

最新推荐文章于 2023-03-31 13:11:26 发布

阅读量1k

点赞数

本文链接：https://blog.csdn.net/qq_41375318/article/details/107339134

版权

$e c h a r t s 散点图$

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>ECharts</title>
    <!-- 引入 echarts.js -->
    <script src="../../assets/js/echarts.min.js"></script>
</head>
<body>
    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="main" style="width: 900px;height:600px;"></div>
<script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));

// 指定图表的配置项和数据
var data1 = [
    [28,27,'第一个','餐饮'],
    [10,185,'第二个','餐饮'],
    [11,39,'第三个','餐饮'],
];

var data2 = [
    [1,26,'第一个','理发'],
    [20,185,'第二个','理发'],
    [3,78,'第三个','理发'],
];

var data3 = [
    [1,91,'第一个','洗浴'],
    [2,65,'第二个','洗浴'],
    [30,83,'第三个','洗浴'],
];

option = {
    backgroundColor: '#333',
    color: [
    '#dd4444', '#fec42c', '#80F1BE'
    ],
    legend: {
        y: 'top',
        data: ['餐饮', '理发', '洗浴'],
        textStyle: {
            color: '#fff',
            fontSize: 16
        }
    },
    label:{ //标签样式设置   
        normal:{
            show:true,
            formatter: function (obj) {
            var value = obj.value;
            return value[3] ;
            },
            position:'top',
            distance: 8,
        },
    },
    tooltip: {
        padding: 10,
        backgroundColor: '#222',
        borderColor: '#777',
        borderWidth: 1,
        formatter: function (obj) {
            var value = obj.value;
            return '<div style="border-bottom: 1px solid rgba(255,255,255,.3); font-size: 18px;padding-bottom: 7px;margin-bottom: 7px">'
                + value[2] + '<br>';
        }
    },
    xAxis: {
        show:true,
        type: 'value',
        max: 31,
        splitLine: {
            show: false
        },
    },
    yAxis: {
        max: 310,
        type: 'value',
        show:true,
        splitLine: {
            show: false
        },
    },
    series: [
        {
            name: '餐饮',
            type: 'scatter',
            encode: {
                x: [1],      // 表示维度 1 映射到 x 轴。
                y: 2,              // 表示维度 2 映射到 y 轴。
                tooltip: [3], // 表示维度 3 会在 tooltip 中显示。
                label: 4           // 表示 label 使用维度 4。
            },
            data: data1,
            //
        },
        {
            name: '理发',
            type: 'scatter', 
            symbol:'diamond',           
            data: data2
        },
        {
            name: '洗浴',
            type: 'scatter',
            symbol:'rect', // 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow'
            data: data3,
        }
    ]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
</script>
</body>
</html>