百度Echarts图表之散点图效果-web建站教程在线编辑器

源代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>ECharts 实例</title>
	<script src="/js/jquery-1.9.0.min.js"></script>
    
    <script src="/js/echarts.min.js"></script>
</head>
<body>
    <div id="main" style="width: 100%;height:450px;"></div>
    <script type="text/javascript">
        option = {
          tooltip: {
            trigger: 'axis',
            textStyle: {
              color: '#fff'
            },
            axisPointer: {
              type: 'shadow',
              borderColor: 'rgba(124,128,244, .5)',
            },
            position: 'inside',
            formatter: (params) => {
              return `${params[0].axisValueLabel}-${params[0].seriesName}：${params[0].data[2]} <br /> ${params[1].axisValueLabel}-${params[1].seriesName}：${params[1].data[2]}`
            }
          },
          grid: {
            show: true,
            top: 30,
            left: '8%',
            right: '3%',
            bottom: 40,
            borderColor: "#fff"
          },
          xAxis: {
            type: 'category',
            boundaryGap: true,
            data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
            axisPointer: {
              type: 'shadow'
            },
            axisLine: {
              lineStyle: {
                color: '#215AFF'
              }
            },
            splitLine: {
              show: true,
              lineStyle: {
                color: ['#103095'],
                width: 1,
                type: 'dashed'
              }
            }
          },
          yAxis: {
            type: 'category',
            splitLine: {
              show: true,
              lineStyle: {
                color: ['#103095'],
                width: 1,
                type: 'dashed'
              }
            },
            nameTextStyle: {
              color: '#fff'
            },
            axisLine: {
              lineStyle: {
                color: "#215AFF"
              }
            },
            data: ['北京', '上海', '广州', '深圳', '杭州', '天津'],
            scale: true
          },
          series: [{
              name: '数据2',
              //  先X,后y
              data: [
                [0, 0, 22],
                [1, 1, 73],
                [2, 2, 83],
                [3, 3, 65],
                [4, 2, 89],
                [5, 4, 166],
                [6, 5, 244],
                [7, 5, 121],
                [8, 1, 232],
                [9, 3, 267],
                [10, 5, 289],
                [11, 2, 266],
              ],
              type: 'scatter',
              symbolSize: function(data) {
                return Math.sqrt(data[2])*3;
              },
              emphasis: {
                label: {
                  show: false,
                  formatter: function(param) {
                    return param.data[2];
                  },
                  position: 'top'
                }
              },
              itemStyle: {
                shadowBlur: 15,
                shadowColor: 'rgba(0,0,0, 0.5)',
                shadowOffsetY: 5,
                color: '#ff9f7f',
              }
            },
            {
              name: '数据1',
              data: [
                [0, 2, 222],
                [1, 3, 223],
                [2, 4, 223],
                [3, 2, 155],
                [4, 5, 125],
                [5, 3, 267],
                [6, 1, 288],
                [7, 2, 213],
                [8, 3, 244],
                [9, 5, 166],
                [10, 2, 223],
                [11, 5, 188],
              ],
              type: 'scatter',
              symbolSize: function(data) {
                return Math.sqrt(data[2])*3;
              },
              emphasis: {
                label: {
                  show: false,
                  formatter: function(param) {
                    return param.data[2];
                  },
                  position: 'top'
                }
              },
              itemStyle: {
                shadowBlur: 15,
                shadowColor: 'rgba(25, 100, 150, 0.5)',
                shadowOffsetY: 5,
                color: '#8379ea',
              }
            }
          ]
        }
        var myChart = echarts.init(document.getElementById('main'));
        myChart.setOption(option);
    </script>
</body>
</html>

源代码：点击运行 》

运行结果：

源代码：