echart怎么实现多个密度图，样式好看，颜色自动分配

ECharts可以使用多个series来实现多个密度图的展示，同时可以使用visualMap配合series的color属性实现颜色自动分配。

下面是一个示例：

HTML代码：

<div id="chart" style="width: 600px;height:400px;"></div>

JavaScript代码：

// 密度数据
var data1 = [
    15.3, 16.5, 17.2, 17.5, 17.7, 17.8, 18.1, 18.2, 18.4, 18.5, 18.6, 18.7, 18.7,
    18.9, 19.0, 19.1, 19.2, 19.2, 19.3, 19.4, 19.4, 19.5, 19.6, 19.6, 19.7, 19.7,
    19.8, 19.8, 19.9, 19.9, 20.0, 20.0, 20.1, 20.1, 20.2, 20.2, 20.2, 20.3, 20.3,
    20.3, 20.4, 20.4, 20.4, 20.5, 20.5, 20.5, 20.5, 20.6, 20.6, 20.6, 20.6, 20.7,
    20.7, 20.7, 20.7, 20.7, 20.8, 20.8, 20.8, 20.8, 20.8, 20.9, 20.9, 20.9, 20.9,
    20.9, 20.9, 21.0, 21.0, 21.0, 21.0, 21.0, 21.0, 21.0, 21.1, 21.1, 21.1, 21.1,
    21.1, 21.1, 21.1, 21.1, 21.2, 21.2, 21.2, 21.2, 21.2, 21.2, 21.2, 21.2, 21.2,
    21.2, 21.2, 21.3, 21.3, 21.3, 21.3, 21.3, 21.3, 21.3, 21.3, 21.3, 21.3, 21.3
];

var data2 = [
    17.3, 17.5, 17.8, 18.1, 18.2, 18.3, 18.4, 18.5, 18.7, 18.8, 18.9, 19.0, 19.1,
    19.2, 19.3, 19.4, 19.5, 19.6, 19.7, 19.8, 19.9, 20.0, 20.1, 20.2, 20.3, 20.4,
    20.5, 20.6, 20.7, 20.8, 20.9, 21.0, 21.1, 21.2, 21.3, 21.4, 21.5, 21.6, 21.7,
    21.8, 21.9, 22.0, 22.1, 22.2, 22.3, 22.4, 22.5, 22.6, 22.7, 22.8, 22.9, 23.0,
    23.1, 23.2, 23.3, 23.4, 23.5, 23.6, 23.7, 23.8, 23.9, 24.0, 24.1, 24.2, 24.3,
    24.4, 24.5, 24.6, 24.7, 24.8, 24.9, 25.0, 25.1, 25.2, 25.3, 25.4, 25.5, 25.6,
    25.7, 25.8, 25.9, 26.0, 26.1, 26.2, 26.3, 26.4, 26.5, 26.6, 26.7, 26.8, 26.9,
    27.0, 27.1, 27.2, 27.3, 27.4, 27.5, 27.6, 27.7, 27.8, 27.9, 28.0, 28.1, 28.2,
    28.3, 28.4, 28.5, 28.6, 28.7, 28.8, 28.9, 29.0, 29.1, 29.2, 29.3, 29.4, 29.5,
    29.6, 29.7, 29.8, 29.9, 30.0, 30.1, 30.2, 30.3, 30.4, 30.5, 30.6, 30.7, 30.8,
    30.9, 31.0, 31.1, 31.2, 31.3, 31.4, 31.5, 31.6, 31.7, 31.8, 31.9, 32.0, 32.1,
    32.2, 32.3, 32.4, 32.5, 32.6, 32.7, 32.8, 32.9, 33.0, 33.1, 33.2, 33.3, 33.4,
    33.5, 33.6, 33.7, 33.8, 33.9, 34.0, 34.1, 34.2, 34.3, 34.4, 34.5, 34.6, 34.7,
    34.8, 34.9, 35.0, 35.1, 35.2, 35.3, 35.4, 35.5, 35.6, 35.7, 35.8, 35.9, 36.0,
    36.1, 36.2, 36.3, 36.4, 36.5, 36.6, 36.7, 36.8, 36.9, 37.0, 37.1, 37.2, 37.3,
    37.4, 37.5, 37.6, 37.7, 37.8, 37.9, 38.0, 38.1, 38.2, 38.3, 38.4, 38.5, 38.6,
    38.7, 38.8, 38.9, 39.0, 39.1, 39.2, 39.3, 39.4, 39.5, 39.6, 39.7, 39.8, 39.9,
    40.0
];

// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('chart'));

// 指定图表的配置项和数据
var option = {
    title: {
        text: '多个密度图'
    },
    tooltip: {
        trigger: 'axis',
        axisPointer: {
            type: 'cross'
        }
    },
    xAxis: {
        type: 'value',
        boundaryGap: false
    },
    yAxis: {
        type: 'value',
        boundaryGap: [0, '20%']
    },
    visualMap: {
        show: false,
        dimension: 0,
        pieces: [{
            value: 0,
            color: '#FFC107'
        }, {
            value: 1,
            color: '#FF5722'
        }]
    },
    series: [{
        name: '密度1',
        type: 'line',
        smooth: true,
        symbol: 'none',
        sampling: 'average',
        itemStyle: {
            color: '#FFC107'
        },
        areaStyle: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                offset: 0,
                color: '#FFFDE7'
            }, {
                offset: 1,
                color: '#FFF8E1'
            }])
        },
        data: data1
    }, {
        name: '密度2',
        type: 'line',
        smooth: true,
        symbol: 'none',
        sampling: 'average',
        itemStyle: {
            color: '#FF5722'
        },
        areaStyle: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                offset: 0,
                color: '#FFCCBC'
            }, {
                offset: 1,
                color: '#FFAB91'
            }])
        },
        data: data2
    }]
};

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

以上代码实现了两个密度图的展示，其中visualMap实现了颜色自动分配，每个密度图的颜色和样式也可以通过series的itemStyle和areaStyle属性来自定义。