折线图样式总览echarts 折线配置项内容和展示

折线图样式总览

      
option = {
    //backgroundColor: '#080b30',//整个幕布背景色
    title: { //echarts主标题样式
        text: '折线图样式总览',
        textStyle: {
            align: 'center',
            color: '#888888',
            fontSize: 20,
            fontWeight: 600
        },
        top: '5%',
        left: 'center',
    },
    tooltip: {//鼠标滑过交叉点的提示样式，默认是黑色半透明状态
        trigger: 'axis',
        axisPointer: {
            label: {//X轴坐标文字样式
                show: true,
                backgroundColor: '#fff',
                color: '#556677',
                borderColor: 'rgba(0,0,0,0)',
                shadowColor: 'rgba(0,0,0,0)',
                shadowOffsetY: 0
            },
            lineStyle: {
                width: 0
            }
        },
        backgroundColor: '#fff',
        textStyle: {
            color: '#5c6c7c'
        },
        padding: [10, 10],
        extraCssText: 'box-shadow: 1px 0 2px 0 rgba(163,163,163,0.5)'
    },
    legend: {//右上角线类型标记
        data: ['日均收入', '全国点均'],
        top: "15",
        right: "15",
        icon: 'circle',//图标点样式
        itemWidth: 6,
        itemGap: 20,
        // data: charts.names,
        textStyle: {
            fontSize: 12,
            color: '#151619'
        },
    },
    //
    grid: {
        top: '10%',
        left: '4%',
        right: '4%',
        bottom: '4%',
        containLabel: true
    },
    //横坐标设置
    xAxis: {
        type: 'category',
        boundaryGap: false,//坐标轴两边留白
        axisLabel: { //坐标轴刻度标签的相关设置。
            interval: 0,//设置为 1，表示『隔一个标签显示一个标签』
            //	margin:15,
            textStyle: {
                color: '#1B253A',
                fontStyle: 'normal',
                fontFamily: '微软雅黑',
                fontSize: 12,
            },
            //rotate:50,
        },
        axisTick: {//坐标轴刻度相关设置。
            show: false,
        },
        axisLine: {//坐标轴轴线相关设置
            lineStyle: {
                color: '#D9D9D9',
                // opacity:0.2
            }
        },
        splitLine: { //坐标轴在 grid 区域中的分隔线。
            show: false,
            lineStyle: {
                color: '#E5E9ED',
                // 	opacity:0.1
            }
        },
        data: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']
    },
    //纵坐标设置
    yAxis: {
        name: '单位：万千瓦时',//Y轴坐标名称 or 单位
        splitLine: {
            lineStyle: {//grid 区域内横坐标的线样式 此时为虚线
                type: "dashed",
                color: "#D9D9D9"
            }
        },

    },
    series: [{
                    name: '日均收入',
                    type: 'line',
                    smooth: true,
                    itemStyle: {
                        normal: {
                            color: '#F88940',
                            //交叉点的阴影样式
                            shadowBlur: 3,
                            shadowColor: 'rgba(3,3,3,0.5)',
                            shadowOffsetY: 8,
                            lineStyle: {
                                color: "#F88940",
                                //以下为线的阴影样式
                                shadowBlur: 3,
                                shadowColor: 'rgba(3,3,3,0.5)',
                                shadowOffsetY: 8,
                                width: 1
                            },
                            areaStyle: {//曲线图覆盖的地方为渐变色
                                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
                                    offset: 0,
                                    color: 'rgba(248,137,64,0)'
                                }, {
                                    offset: 1,
                                    color: 'rgba(248,137,64,0.35)'
                                }]),
                            },
        
                            
                        }
                    },
                    symbol: 'circle',//数据交叉点样式
                    symbolSize: 5,//数据交叉点尺寸
                    data: ['171','281','322','432','337','285','175']
                },
                {
                    name: '全国点均',
                    type: 'line',
                    smooth: true,
                    itemStyle: {
                        normal: {
                            color: '#6B97FE',
                            lineStyle: {
                                color: "rgba(107,151,254)",
                                width: 1
                            },
                            areaStyle: {
                                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
                                    offset: 0,
                                    color: 'rgba(107,151,254,0)'
                                }, {
                                    offset: 1,
                                    color: 'rgba(107,151,254,0.35)'
                                }]),
                            }
                        }
                    },
                    data: [50,100,375,650,210,160,75]
                }]
};