Echart 散点图

参考https://www.echartsjs.com/examples/editor.html?c=bubble-gradient

自定义图表，效果如下

 

var data = [
    [
        ['2019/01/07','低落伤心',321773631,'yy','低落伤心'],
        ['2019/01/05','低落伤心',321773631,'yy','低落伤心']
    ],
    [
        ['2019/01/02','正常平和',321773631,'yy','正常平和'],
        ['2019/01/04','正常平和',321773631,'yy','正常平和'],
    ],
    [
        ['2019/01/03','开心快乐',321773631,'yy','开心快乐'],
        ['2019/01/10','开心快乐',321773631,'yy','开心快乐'],
    ]
];

var xdata = ['2019/01/01', '2019/01/02', '2019/01/03','2019/01/04'
,'2019/01/05', '2019/01/06', '2019/01/07','2019/01/08'
, '2019/01/09', '2019/01/10','2019/01/11'
];

option = {

    title: {
        text: '心情'
    },
    legend: {
        right: 10,
        data: ['低落伤心', '正常平和', '开心快乐'],
    },
    xAxis: {
        splitLine: {
            lineStyle: {
                type: 'dashed'
            }
        },
        type: 'category',
        boundaryGap: false,
        data: xdata
        
    },
    yAxis: {
        type: 'category',
        data: ['低落伤心','正常平和', '开心快乐'],
        splitLine: {
            lineStyle: {
                type: 'dashed'
            }
        },
        scale: true
    },
    series: [
        {
        name: '低落伤心',
        data: data[0],
        type: 'scatter',
        symbolSize: function (data) {
            return Math.sqrt(data[2]) / 5e2;
        },
        label: {
            emphasis: {
                show: true,
                formatter: function (param) {
                    return param.data[3];
                },
                position: 'top'
            }
        },
        itemStyle: {
            
            type: 'radial',
            x: 0.4,
            y: 0.3,
            r: 1,
            shadowBlur: 10,
            shadowColor: 'rgba(120, 36, 50, 0.5)',
            shadowOffsetY: 5,
            colorStops: [{
                offset: 0, color: '#AEA1E9' // 0% 处的颜色
            }, {
                offset: 1, color: '#AEA1E9' // 100% 处的颜色
            }],
            global: false // 缺省为 false
        }
    }, 
    {
        name: '正常平和',
        data: data[1],
        type: 'scatter',
        symbolSize: function (data) {
            return Math.sqrt(data[2]) / 5e2;
        },
        label: {
            emphasis: {
                show: true,
                formatter: function (param) {
                    return param.data[3];
                },
                position: 'top'
            }
        },
        itemStyle: {
            
            type: 'radial',
                x: 0.5,
                y: 0.5,
                r: 0.5,
                shadowBlur: 10,
                shadowColor: 'rgba(25, 100, 150, 0.5)',
                shadowOffsetY: 5,
                colorStops: [{
                    offset: 0,
                    color: '#000'
                }, {
                    offset: 1,
                    color: '#000'
                }]
            
        }
    }, 
    {
        name: '开心快乐',
        data: data[2],
        type: 'scatter',
        symbolSize: function (data) {
            return Math.sqrt(data[2]) / 5e2;
        },
        label: {
            emphasis: {
                show: true,
                formatter: function (param) {
                    return param.data[3];
                },
                position: 'top'
            }
        },
        itemStyle: {
            shadowBlur: 10,
                shadowColor: 'rgba(25, 100, 150, 0.5)',
                shadowOffsetY: 5,
                colorStops: [{
                    offset: 0,
                    color: 'rgb(129, 227, 238)'
                }, {
                    offset: 1,
                    color: 'rgb(25, 183, 207)'
                }]
        }
    }
    ]
};