各Page的日销量ECharts Gallery

20:11:45图表已生成
代码
const set1 = [
    ['日期', '商品详情页标题1', '商品详情页标题2', '商品详情页标题3', '商品详情页标题4', '商品详情页标题5', '商品详情页标题6', '商品详情页标题7', '商品详情页标题8', '商品详情页标题9', '商品详情页标题10', '商品详情页标题11', '商品详情页标题12', '商品详情页标题13', '商品详情页标题14', '商品详情页标题15', '商品详情页标题16', '商品详情页标题17', '商品详情页标题18', '商品详情页标题19', '商品详情页标题20', '商品详情页标题21', '-'],
    ['2019/10/2', 169, 171, 134, 111, 151, 180, 142, 164, 122, 151, 50, 133, 109, 197, 126, 152, 171, 72, 101, 165, 30, 152],
    ['2019/10/3', 77, 154, 35, 148, 123, 58, 129, 39, 178, 88, 46, 70, 174, 166, 90, 137, 145, 35, 132, 44, 169, 61],
    ['2019/10/4', 106, 90, 198, 95, 157, 47, 116, 167, 190, 81, 177, 161, 67, 75, 91, 113, 124, 200, 195, 48, 176, 172],
    ['2019/10/5', 172, 167, 92, 75, 119, 111, 68, 153, 32, 187, 106, 80, 67, 149, 192, 162, 74, 182, 99, 59, 164, 88],
    ['2019/10/6', 179, 57, 41, 154, 82, 49, 141, 37, 128, 64, 170, 89, 194, 143, 176, 167, 92, 141, 82, 63, 193, 165],
    ['2019/10/7', 130, 178, 37, 193, 182, 160, 90, 146, 112, 160, 180, 116, 30, 84, 85, 54, 131, 178, 144, 184, 157, 123],
    ['2019/10/8', 42, 113, 185, 63, 100, 155, 182, 79, 107, 34, 137, 194, 145, 163, 113, 117, 136, 174, 52, 108, 109, 90],
    ['2019/10/9', 79, 197, 95, 81, 184, 158, 196, 101, 113, 158, 160, 150, 159, 61, 111, 58, 47, 33, 161, 170, 169, 59],
    ['2019/10/10', 92, 73, 80, 101, 36, 103, 38, 162, 187, 142, 33, 147, 115, 149, 77, 197, 129, 170, 72, 190, 145, 139],
    ['2019/10/11', 84, 149, 180, 98, 117, 172, 56, 110, 33, 195, 65, 39, 112, 86, 161, 139, 61, 172, 89, 111, 32, 120],
    ['2019/10/12', 111, 174, 82, 196, 75, 111, 59, 63, 161, 111, 115, 184, 103, 156, 62, 195, 200, 160, 77, 161, 105, 170],
    ['2019/10/13', 177, 127, 115, 58, 91, 72, 72, 100, 61, 45, 165, 130, 146, 157, 31, 58, 41, 97, 69, 68, 170, 150],
    ['2019/10/14', 152, 78, 167, 183, 98, 47, 82, 171, 110, 128, 149, 169, 95, 39, 198, 65, 117, 155, 97, 198, 137, 157],
    ['2019/10/15', 73, 66, 62, 91, 185, 190, 56, 169, 199, 138, 57, 127, 52, 106, 170, 36, 199, 129, 76, 176, 131, 173],
    ['2019/10/16', 31, 187, 38, 71, 181, 101, 51, 46, 149, 132, 60, 182, 125, 49, 184, 99, 187, 126, 54, 185, 196, 116],
    ['2019/10/17', 40, 41, 169, 72, 196, 111, 52, 42, 183, 32, 153, 80, 126, 71, 75, 154, 30, 175, 150, 151, 62, 129],
    ['2019/10/18', 151, 78, 122, 95, 175, 32, 66, 76, 149, 193, 44, 49, 60, 171, 78, 44, 58, 136, 103, 35, 93, 141],
    ['2019/10/19', 199, 200, 179, 172, 157, 98, 72, 49, 46, 111, 163, 128, 152, 108, 59, 163, 200, 195, 35, 32, 103, 175],
    ['2019/10/20', 31, 96, 56, 141, 39, 174, 161, 153, 52, 81, 115, 142, 59, 40, 149, 46, 125, 92, 148, 47, 99, 37],
    ['2019/10/21', 90, 172, 189, 89, 100, 70, 94, 44, 197, 142, 72, 51, 69, 106, 194, 48, 176, 38, 103, 39, 49, 149],
    ['2019/10/22', 133, 44, 165, 81, 163, 91, 65, 162, 135, 56, 64, 162, 41, 98, 130, 115, 156, 75, 54, 34, 81, 188]
];

option = {
    dataset: [{
        source: set1,
    }],
    // backgroundColor: '#fff',
    dataZoom: {
        type: 'slider',
        handleSize: '80%',
        height: 16,
        bottom: 8
    },
    // legend: {
    //     left: 16,
    //     top: 8,
    //     data: set1[0].slice(1),
    //     // type:'scrol'
    // },
    grid: {
        left: 48,
        right: 24,
        top: 40,
        bottom: 64
    },
    tooltip: {
        show: true
    },
    xAxis: {
        type: 'time'
    },
    yAxis: {
        type: 'value',
        name:'日销量'
    },
    series: Array.from({
        length: 21
    }).map((key, idx) => ({
        name: set1[0][idx + 1],
        type: 'line',
        lineStyle:{
            width:1,
            opacity:0.5
        },
        symbolSize:1,
        smooth:true,
        // step: true,
        encode: {
            x: 0,
            y: idx + 1
        },
    }))


};
myChart.resize({
    width: 536,
    height: 320
});
作品使用的第三方脚本

数据管理

历史数据 0 条

代码修改记录

信息提示

保存作品
