Echart相关属性值

function InitLine() {

    return {
             backgroundColor: 'rgba(128, 128, 128, 0)', //1.设置背景色,rgba设置透明度0.1
            //backgroundColor: '#080b30',
            title: {
                text: '折线图',//2.图标题
                textStyle: {  //3.标题文字的相关属性
                    align: 'center',
                    color: '#fff',
                    fontSize: 18
                },
                //标题上下左右位置
                top: '2%',
                left: 'left',
            },
          //4.坐标点鼠标悬浮提示
            tooltip: {
                show: true,
                formatter: '{c}个'//自定义显示格式
                // formatter: '{a} <br/>{b} : {c} (%)'  a:标题 b:线名 c:y值 ,不加{}的原样输出
            },
           //5.设置上下左右位置
            grid: {
                top: '15%',
                left: '10%',
                right: '5%',
                bottom: '15%',
                // containLabel: true
            },
           //设置线提示信息 
             legend: {
                data: ['文科'],
                right: "3%",
                top: "4%",
                textStyle: {
                    color: "#A1D5FF",
                    fontSize: 12
                },
                itemWidth: 12,  // 设置宽度
                itemHeight: 16, // 设置高度
                itemGap: 12 // 设置间距
            },
            xAxis: [{
                type: 'category',
                axisLine: {
                    show: true
                },
                splitArea: {
                    // show: true,
                    color: '#f00',
                    lineStyle: {
                        color: '#f00'
                    },
                },
                //6.设置x轴坐标间隔和文字颜色
                axisLabel: {
                    color: '#fff',
                    interval: 0
                },
                //7.是否显示分割线
                splitLine: {
                    show: false
                },
                boundaryGap: false,
                data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月'],

            }],

            yAxis: [{
                type: 'value',
                min: 0,
                max: 100,
               splitNumber: 10,
                //8.设置y轴的分割线和颜色
                splitLine: {    //x轴水平线
                    show: true,
                    lineStyle: {
                        color: 'rgba(255,255,255,0.1)'
                    }
                },
                axisLine: {
                    show: false,
                },
                //
                axisLabel: {
                    show: true,//显示Y轴坐标值
                    margin: 8,
                    textStyle: {
                        color: '#d1e6eb',

                    },
                },
                axisTick: {
                    show: false,
                },
            }],
            series: [{
                name: '',//线所代表名称
                type: 'line',//线的类型
                // smooth: true, //是否平滑
                showAllSymbol: true,
                // symbol: 'image://./static/images/guang-circle.png',
                symbol: 'circle',//点的形状
                symbolSize: 8,//形状大小
                lineStyle: {//线条设置属性
                    normal: {
                        color: "#6c50f3",
                        shadowColor: 'rgba(0, 0, 0, .3)',
                        shadowBlur: 0,
                        shadowOffsetY: 5,
                        shadowOffsetX: 5,
                    },
                },
                //9.坐标点上显示的文字信息
                label: {
                    show: true,
                    position: 'top',
                    textStyle: {
                        color: '#ffffff', //点上的字体颜色
                    }
                },
                //10.线条颜色设置
                itemStyle: {
                    color: "#6c50f3", //点的颜色
                   // borderColor: "#fff", //点的边框颜色
                    borderWidth: 3,
                    shadowColor: 'rgba(0, 0, 0, .3)',
                    shadowBlur: 0,
                    shadowOffsetY: 2,
                    shadowOffsetX: 2,
                },
                //11.Y轴填充面积区域
                //areaStyle: {
                //    normal: {
                //        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                //            offset: 0,
                //            color: 'rgba(108,80,243,0.3)'
                //        },
                //        {
                //            offset: 1,
                //            color: 'rgba(108,80,243,0)'
                //        }
                //        ], false),
                //        shadowColor: 'rgba(108,80,243, 0.9)',
                //        shadowBlur: 20
                //    }
                //},
                data: [12, 23, 22, 20, 25, 14, 20, 17, 18, 19, 22, 25],
            }
            ]
    };
}
posted @ 2022-08-18 18:35  码农阿亮  阅读(30)  评论(0)    收藏  举报