echarts 图标样式修改(线、折点,渐变、悬浮)

最近两天使用echarts做项目,只是简单的修改一下样式,没有深入研究API,具体下过请看下面的实例图片

下面是样式代码,具体见代码注释

options = {
    xAxis: {

        axisLine: {show: true,//x轴的线
           lineStyle:{
               color:['#062161'],
           }
        },

        // 控制网格线是否显示
        splitLine: {
            show: true,
            lineStyle: {
                // 使用深浅的间隔色
                color: ['#062161']
            }
        },
        //除去x轴刻度
        axisTick: {
            show: false
        },
        axisLabel: {//控制x轴文本
            show: true,
            textStyle: {
                color: '#fff'
            }
        },
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun','Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun','Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],

    },
    yAxis: {
        axisLabel:{show:false},//y轴文字
        axisLine: {show: false},//y轴线是否显示

        // 控制网格线是否显示
        splitLine: {
            show: true,
            lineStyle: {//网格颜色

                color: ['#062161']
            }
        },
        // 去除y轴上的刻度线
        axisTick: {
            show: false
        }
    },
    grid:{//配置网格距离canvase外层盒子距离
        x:5,
        y:2,
        x2:5,
        y2:20,
    },
    backgroundColor:'#0c1d48',//背景颜色
    tooltip : {//鼠标移入折点显示悬浮框
        trigger: 'item',
        formatter: function(val){
            var relVal ="";
            relVal += '时间'+' '+'日期'+"<br/>";
            relVal +="出勤人数"+" "+"数量"+"<br/>";
            return relVal;
        },
        backgroundColor:"#0689e4",
        padding:[5,10],
    },
    series: [{
        data: [820, 932, 901, 934, 1290, 1330, 1320,820, 932, 901, 934, 1290, 1330, 1320,820, 932, 901, 934, 1290, 1330, 1320],
        type: 'line',
        areaStyle: {normal: {//设置线下面部分颜色渐变
            color: new echarts.graphic.LinearGradient(
                0, 0, 0, 1,
                [
                    {offset: 0, color: '#3e4abb'},
                    {offset: 0.5, color: '#222f77'},
                    {offset: 1, color: '#182250'}
                ]
            )
        }},
        smooth: true,
        symbol: 'circle',     //设定为实心点
        symbolSize: 7,   //设定实心点的大小
        itemStyle:{
            normal:{
                color:'#595de4',//折点颜色
                lineStyle:{
                    color:'#595de4',//折线颜色
                    width:'3'
                }
            }
        }
    }]
};

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值