echarts折线图柱状图的坐标轴的颜色及样式的设置

转载网址见:

http://www.cnblogs.com/my-freedom/p/6699271.html


基本用法请查看echarts官网。

一、图例legend的设置。

1.字体和颜色的设置

1
2
3
4
textStyle:{
                 fontSize:15,
                 color: '#fff'
             }

2.样式的设置

1
2
3
4
5
6
7
8
9
legend: {
            data:systemName,
            itemWidth:40,
            itemHeight:20,
            textStyle:{
                fontSize:15,
                color: '#fff'
            }
        }

  可以根据需求自己设置。

 二、工具箱toolbox的设置

三、tooltip悬浮提示框

1
2
3
4
5
6
7
8
9
10
11
{
     type:  'line' ,
     lineStyle: {
         color:  '#48b' ,
         width: 2,
         type:  'solid'
     },
    textStyle:{
       color: '#fff'
    }
}

三、x轴坐标xAxis的字体颜色大小,坐标线颜色,以及网格线的设置

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
xAxis : [
             {
                 type:  'category' ,
                 boundaryGap:  false ,
                 data: time,
                 splitLine:{show:  false }, //去除网格线
                 splitArea : {show :  true }, //保留网格区域
                 axisLine: {
                     lineStyle: {
                         type:  'solid' ,
                         color:  '#fff' , //左边线的颜色
                         width: '2' //坐标线的宽度
                     }
                 },
                 axisLabel: {
                     textStyle: {
                         color:  '#fff' , //坐标值得具体的颜色
 
                     }
                 }
             }
         ]

四、yAsix的设置相同






1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
yAxis : [
            {
                type :  'value' ,
                splitLine:{show:  false }, //去除网格线
                splitArea : {show :  true }, //保留网格区域
                axisLine: {
                    lineStyle: {
                        type:  'solid' ,
                        color: '#fff' ,
                        width: '2'
                    }
                },
                axisLabel: {
                    textStyle: {
                        color:  '#fff'
                    }
                }
            }
        ]
  • 8
    点赞
  • 28
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值