1. 程式人生 > >echarts折線圖Demo

echarts折線圖Demo

option = {
    backgroundColor: 'black',
    tooltip: {
        trigger: 'axis'
    },
    color: ['#f69846', '#00ffb4', '#44aff0', '#f6d54a', '#45dbf7',
        '#ad46f3', '#f845f1', '#ff4343', '#ffa800', '#39E7FB', '#FAC901',
    ],
    legend: {
        icon: "circle", //  這個欄位控制形狀  型別包括 circle,rect ,roundRect,triangle,diamond,pin,arrow,none
        textStyle: {
            color: 'white',
            fontSize: 18
        },
        data: ['郵件營銷', '聯盟廣告', '視訊廣告', '直接訪問', '搜尋引擎']
    },
    grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
    },
    toolbox: { //視覺化工具箱
        x: 'center',
        y: '25',
        feature: {
            dataView: { //資料檢視
                show: true
            },
            restore: { //重置
                show: true
            },
            dataZoom: { //資料縮放檢視
                show: true
            },
            saveAsImage: { //儲存圖片
                show: true
            },
            magicType: { //動態型別切換
                type: ['bar', 'line']
            }
        },
        iconStyle: {
            normal: {
                color: 'white', //設定圖示顏色
                textStyle: {
                    color: 'white',
                    fontSize: 1000
                },
            },
            emphasis: { //字型顏色及位置
                color: 'white',
                textPosition: 'bottom'
            }
        }
    },
    xAxis: {
        type: 'category',
        boundaryGap: false,
        data: ['週一', '週二', '週三', '週四', '週五', '週六', '週日'],
        axisTick: {
            show: false//刪除超出正座標線段
        },
        axisLine: {
            lineStyle: {
                color: 'white',
            }
        },
        axisLabel: {
            show: true,
            textStyle: {
                color: 'white',
                fontSize: 18
            }
        },
    },
    yAxis: {
        type: 'value',
        axisTick: {
            show: false//刪除超出正座標線段
        },
        axisLine: {
            lineStyle: {
                color: 'white',
            }
        },
        axisLabel: {
            textStyle: {
                color: 'white',
                fontSize: 18
            }
        },
        splitLine: { //座標軸以外的橫線顏色
            lineStyle: {
                type:'dashed',//虛線
                color: 'white'
            }
        }
    },
    series: [{
            name: '郵件營銷',
            type: 'line',
            stack: '總量',
            data: [120, 132, 101, 134, 90, 230, 210]
        },
        {
            name: '聯盟廣告',
            type: 'line',
            stack: '總量',
            data: [220, 182, 191, 234, 290, 330, 310]
        },
        {
            name: '視訊廣告',
            type: 'line',
            stack: '總量',
            data: [150, 232, 201, 154, 190, 330, 410]
        },
        {
            name: '直接訪問',
            type: 'line',
            stack: '總量',
            data: [320, 332, 301, 334, 390, 330, 320]
        },
        {
            name: '搜尋引擎',
            type: 'line',
            stack: '總量',
            data: [820, 932, 901, 934, 1290, 1330, 1320]
        }
    ]
};
option = {
    backgroundColor: 'white',
    tooltip: {
        trigger: 'axis'
    },
    color: ['#f69846', '#00ffb4', '#44aff0', '#f6d54a', '#45dbf7',
        '#ad46f3', '#f845f1', '#ff4343', '#ffa800', '#39E7FB', '#FAC901',
    ],
    legend: {
        icon: "circle", //  這個欄位控制形狀  型別包括 circle,rect ,roundRect,triangle,diamond,pin,arrow,none
        textStyle: {
            color: 'black',
            fontSize: 18
        },
        data: ['郵件營銷', '聯盟廣告', '視訊廣告', '直接訪問', '搜尋引擎']
    },
    grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
    },
    toolbox: { //視覺化工具箱
        color: 'white',
        x: 'center',
        y: '25',
        feature: {
            dataView: { //資料檢視
                show: true
            },
            restore: { //重置
                show: true
            },
            dataZoom: { //資料縮放檢視
                show: true
            },
            saveAsImage: { //儲存圖片
                show: true
            },
            magicType: { //動態型別切換
                type: ['bar', 'line']
            }
        },
        iconStyle: {
            normal: {
                color: 'white', //設定圖示顏色
            },
            emphasis: { //字型顏色及位置
                color: 'black',
                textPosition: 'bottom'
            }
        }
    },
    xAxis: {
        type: 'category',
        axisTick: {
            show: false//刪除超出正座標線段
        },
        boundaryGap: false,
        data: ['週一', '週二', '週三', '週四', '週五', '週六', '週日'],
        axisLine: {
            lineStyle: {
                color: 'black',
            }
        },
        axisLabel: {
            show: true,
            textStyle: {
                color: 'black',
                fontSize: 18
            }
        },
    },
    yAxis: {
        type: 'value',
        axisTick: {
            show: false//刪除超出正座標線段
        },
        axisLine: {
            lineStyle: {
                color: 'black',
            }
        },
        axisLabel: {
            textStyle: {
                color: 'black',
                fontSize: 18
            }
        },
        splitLine: { //座標軸以外的橫線顏色
            lineStyle: {
                type:'dashed',//虛線
                color: 'black'
            }
        }
    },
    series: [{
            name: '郵件營銷',
            type: 'line',
            stack: '總量',
            data: [120, 132, 101, 134, 90, 230, 210]
        },
        {
            name: '聯盟廣告',
            type: 'line',
            stack: '總量',
            data: [220, 182, 191, 234, 290, 330, 310]
        },
        {
            name: '視訊廣告',
            type: 'line',
            stack: '總量',
            data: [150, 232, 201, 154, 190, 330, 410]
        },
        {
            name: '直接訪問',
            type: 'line',
            stack: '總量',
            data: [320, 332, 301, 334, 390, 330, 320]
        },
        {
            name: '搜尋引擎',
            type: 'line',
            stack: '總量',
            data: [820, 932, 901, 934, 1290, 1330, 1320]
        }
    ]
};