码迷,mamicode.com
首页 > 其他好文 > 详细

ECharts 经常会修改到的一些样式配置

时间:2017-09-02 13:00:10      阅读:182      评论:0      收藏:0      [点我收藏+]

标签:fonts   相关   iam   宽度   icon   ext   padding   col   类型   

1.坐标轴:

axisLine:{              //坐标轴轴线相关设置。
  show:true,        //是否显示坐标轴轴线。
  lineStyle:{
    width:10           //坐标轴线线宽。 
    color:#333        //颜色。
    color:{
      colorStops:[{
        offset:0,color:‘red‘,     //渐变的颜色
        offset:1,color:‘bule‘
      }],
    shadowColor:‘red‘     //阴影的颜色
    shadowBlur:10     //阴影的宽度
    }
  }       
}
 
axisLabel:{          //坐标轴刻度标签的相关设置(坐标字体)
    show:true       //是否显示
    rotate:45       //旋转的角度从 -90 度到 90 度。
    margin:25       //刻度标签与轴线之间的距离。
    color:#ffff       //字体颜色.
    fontStyle:normal  italic  oblique //文字的风格。
    fontWeight:20   //文字的粗细。
    fontSize:18    //文字的大小。
    shadowColor:18  //文字块的背景阴影长度。
}
 
 

2.标题

"title": {
  "text": ‘全国机电产品出口总值‘,    //标题
   subtext: ‘机电产品‘,         //副标题
  "top": ‘85%‘,
  "left": ‘28%‘,
  "textStyle": {            //标题的文字样式
    "fontSize": 16,
    "color": "#444",
    "text-align": "center",
    "margin-top":"20px"
  }
},
 
 

3.数据类型显示(图例)

legend:{

  x: ‘right‘,
  icon:‘pin‘,                 //形状 (‘circle‘‘rect‘‘roundRect‘‘triangle‘‘diamond‘‘pin‘‘arrow‘
  data: [‘6月份‘,‘7月份‘],
  fontSize:18 
  left:20%    //位置设置可以(center ,  right)
  padding      //它们之间的距离

}

 

 
 
 

 

ECharts 经常会修改到的一些样式配置

标签:fonts   相关   iam   宽度   icon   ext   padding   col   类型   

原文地址:http://www.cnblogs.com/huhanhaha/p/7466208.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!