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

最近两天使用echarts做项目,只是简单的修改一下样式,没有深入研究API,具体下过请看下面的实例图片echarts 图标样式修改(线、折点,渐变、悬浮)_第1张图片

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

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 += '时间'+' '+'日期'+"
"
; relVal +="出勤人数"+" "+"数量"+"
"
; 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' } } } }] };

你可能感兴趣的:(echarts)