散点图大小随值变化颜色分段echarts scatter配置项内容和展示

散点图大小随值变化颜色分段

      
var itemStyle = {
    normal: {
        opacity: 0.8,
        shadowBlur: 10,
        shadowOffsetX: 0,
        shadowOffsetY: 0,
        shadowColor: 'rgba(0, 0, 0, 0.5)'
    }
};

option = {
    backgroundColor: '#404a59',
    color: [
        '#dd4444'
    ],
    legend: {
        y: 'top',
        data: ['圆', '方' , '三角', '菱形'],
        textStyle: {
            color: '#fff',
            fontSize: 16
        }
    },
    grid: {
        x: '10%',
        x2: 150,
        y: '18%',
        y2: '10%'
    },
    xAxis: {
        type: 'value',
        name: '容量',
        splitLine: {
            show: false
        },
        axisLine: {
            lineStyle: {
                color: '#eee'
            }
        },
    },
    yAxis: {
        type: 'value',
        name: '数值',
        axisLine: {
            lineStyle: {
                color: '#eee'
            }
        },
        splitLine: {
            show: false
        }
    },
    visualMap: [
        {
            left: 'right',
            bottom: '10%',
            dimension: 2,
            splitNumber:4,
            categories:[3.0,2.5,2.0,1.5],
            color: ['#FFFFFF','#EEBCBB','#DC7573','#C23531'],
            textStyle: {
                color: '#fff'
            },
            outOfRange: {
                color: ['#444', '#444', '#444', '#444']
            },
            controller: {
                outOfRange: {
                    color: ['#444', '#444', '#444', '#444']
                }
            }
        },
        {
            show:true,
            left: 'right',
            top: '10%',
            dimension: 1,
            min: 0,
            max: 250,
            itemWidth: 30,
            itemHeight: 120,
            calculable: true,
            precision: 0.1,
            text: ['圆形大小：数值'],
            textGap: 30,
            textStyle: {
                color: '#fff'
            },
            inRange: {
                symbolSize: [10, 80]
            },
            outOfRange: {
                symbolSize: [10, 80],
                color: ['rgba(255,255,255,.2)']
            },
            controller: {
                inRange: {
                    color: ['#c23531']
                },
                outOfRange: {
                    color: ['#444']
                }
            }
        }
    ],
    series: [
        {
            name: '圆',
            type: 'scatter',
            symbol:'circle',
            itemStyle: itemStyle,
            data: [
                ['30',30,1.5],
                ['50',180,2.0]
            ]
        },
        {
            name: '方',
            type: 'scatter',
            symbol:'rect',
            itemStyle: itemStyle,
            data: [
                ['30',150,1.5],
                ['60',100,2.0]
            ]
        },
        {
            name: '三角',
            type: 'scatter',
            symbol:'triangle',
            itemStyle: itemStyle,
            data: [
                ['50',20,1.5],
                ['60',150,2.5]
            ]
        },
        {
            name: '菱形',
            type: 'scatter',
            symbol:'diamond',
            itemStyle: itemStyle,
            data: [
                ['60',110,2.5],
                ['80',170,3.0]
            ]
        },
    ]
};