ECharts 散点图常用配置

代码如下：
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <title>散点图</title>
    <meta name="renderer" content="webkit|ie-comp|ie-stand">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
    <script src="js/jquery-3.3.1.min.js"></script>
    <script src="js/echarts.js"></script>
</head>

<body>
    <!-- 准备一个具备大小（宽高）的 DOM -->
    <div id="sd" style="width: 80%;height:600px;margin: 0  10%"></div>
</body>
<script>
// 图标响应式大小
$(document).ready(function() {
    $(window).resize(function() {
        var _width = $("#sd").width();
        myCharte.resize(_width);
        console.log(_width);
    });

});
// 注册
var myCharte = echarts.init(document.getElementById('sd'));
var plantCap = [{
    name: '一线',
    value: '154'
}, {
    name: '二线',
    value: '115'
}, {
    name: '三线',
    value: '113'
}, {
    name: '四线',
    value: '95'
}, {
    name: '六线',
    value: '92'
}, {
    name: '五线',
    value: '87'
}, {
    name: '七线',
    value: '87'
}, {
    name: '八线',
    value: '60'
}];

var datalist = [{
    offset: [56, 48],
    symbolSize: 154,
    opacity: .95,
    color: 'rgba(104,184,55, 1)'
},  {
    offset: [20, 43],
    symbolSize: 115,
    opacity: .84,
    color: 'rgba(104,184,55, 0.95)'
}, {
    offset: [83, 35],
    symbolSize: 113,
    opacity: .8,
    color: 'rgba(104,184,55, 0.95)'
}, {
    offset: [36, 30],
    symbolSize: 95,
    opacity: .75,
    color: 'rgba(104,184,55, 0.90)'
}, {
    offset: [64, 20],
    symbolSize: 92,
    opacity: .7,
    color: 'rgba(104,184,55, 0.90)'
}, {
    offset: [35, 45],
    symbolSize: 87,
    opacity: .68,
    color: 'rgba(104,184,55, 0.85)'
}, {
    offset: [80, 52],
    symbolSize: 60,
    opacity: .7,
    color: 'rgba(104,184,55, 0.80)'
},{
    offset: [40, 65],
    symbolSize: 60,
    opacity: .88,
    color: 'rgba(104,184,55, 0.95)'
}];
var datas = [];
for (var i = 0; i < plantCap.length; i++) {
    var item = plantCap[i];
    var itemToStyle = datalist[i];
    datas.push({
        name: item.value + '\n' + item.name,
        value: itemToStyle.offset,
        symbolSize: itemToStyle.symbolSize,
        symbol: 'circle',
        //ECharts 提供的标记类型包括 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow', 'none'
        label: {
            normal: {
                textStyle: {
                    fontSize: 14,
                    color:'#fff'
                }
            }
        },
        // itemStyle: {
        //     normal: {
        //         color: itemToStyle.color,
        //         opacity: itemToStyle.opacity
        //     }
        // },
    })
}
option = {
    grid: {
        show: false,
        top: 10,
        bottom: 10
    },
    xAxis: [{
        gridIndex: 0,
        type: 'value',
        show: false,
        min: 0,
        max: 100,
        nameLocation: 'middle',
        nameGap: 5,
    }],
    yAxis: [{
        gridIndex: 0,
        min: 0,
        show: false,
        max: 100,
        nameLocation: 'middle',
        nameGap: 30
    }],
    series: [{
        type: 'scatter',
        symbol: 'circle',
        symbolSize: 120,
        label: {
            normal: {
                show: true,
                formatter: '{b}',
                color: '#fff',
                textStyle: {
                    fontSize: '20'
                }
            },
        },
        itemStyle: {
            normal: {
                borderWidth: '4',
                borderType: 'solid',
                borderColor: '#fff',
                color: '#68b837',
                shadowColor: '#68b837',
                shadowBlur: 10
            }
        },
        data: datas
    }]
};

// 使用刚指定的配置项和数据显示图表。
myCharte.setOption(option);
</script>

</html>
ECharts 散点图常用配置

猜你喜欢
