echarts配置详解

官方配置项文档

配置

color颜色

color:['pink','blue','white','black','green']   //颜色盘，循环

grid网格配置

直角坐标系内绘图网格，单个 grid 内最多可以放置上下两个 X 轴，左右两个 Y 轴。可以在网格上绘制折线图，柱状图，散点图（气泡图）

borderColor:'#ccc'        //坐标系边框颜色

backgroundColor:'transparent'  //网格背景颜色，默认为透明

containLabel:true    //是否显示刻度标签
//false 决定的是由坐标轴形成的矩形的尺寸和位置
//true  决定的是包括了坐标轴标签在内的所有内容所形成的矩形的位置

left:10% //left,right,top,bottom ,grid 组件离容器左右上下的距离

show:true     //是否显示直角坐标系边框

legend图例组件

 data:[]    //图例的数据数组。数组项通常为一个字符串，每一项代表一个系列                         //的name,如果 data 没有被指定，会自动从当前系列中获取。

textStyle:{
   color:'#fff',
   fontStyle,fontWeight,fontFamily,fontSize //设置字体风格，粗细，系列，大小
   backgroundColor:'#xxx',  //文字块背景色
   
}

 itemGap:5,      //图例每项之间的间隔

itemWidth,itemHeight   //图例标记的图形宽度,高度 

series系列

决定显示哪种类型的图表
line折线图

{
   type:line,      //折线图
   name:'xxx',    //系列名称，用于tooltip的显示，legend 的图例筛选，在 setOption 更新数据和配置项时用于指定对应的系列
   stack:'xxx',   //数据堆叠，同个类目轴上系列配置相同的stack值后，后一个系列的值会在前一个系列的值上相加。
   data:[],      //数据
   smooth:true,   //是否平滑的显示
   areaStyle:{
      color:'',    //填充色
   },
   symbol: 'circle'  //标记的图形'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow', 'none'  
}

bar柱状图

{
  type:bar,
  itemStyle:{
     borderRadius:15,  //圆角半径，单位px，支持传入数组分别指定 4 个圆角半径。borderRadius: [5, 5, 0, 0] //（顺时针左上，右上，右下，左下）}

}

pie饼形图

{
  type:'pie',
  radius:[0,75%],   //饼图的半径(内圈半径，外圈半径)
}

title图标标题

show:true,       //是否显示标题组件
link:'',     //文本超链接

tooltip提示框

trigger:'axis' ,  //触发方式
//'item'
//数据项图形触发，主要在散点图，饼图等无类目轴的图表中使用。
//'axis'
//坐标轴触发，主要在柱状图，折线图等会使用类目轴的图表中使用。
//'none'
//什么都不触发。
 axisPointer:{       //坐标轴指示器配置项
    type:'line',      //'line' 直线指示器,'shadow' 阴影指示器,'none' 无指示器,'cross' 十字准星指示器。
     axis:'x',    //指定坐标轴，(auto)默认取类目轴或者时间轴
 }

toolbox工具箱组件

xAxis(X轴)、yAxis(y轴)

 axisLabel :{
     show:true,        //是否显示刻度标签
     fontSize:16,       //标签字体大小
     (更多见官方文档)
 }

axisline:{
       show:true,         //是否显示坐标轴轴线
       (更多见官方文档)
}

boundaryGap : true   //坐标轴两边留白策略

boundaryGap:true       //坐标轴两边留白策略,刻度只是作为分隔线
//类目轴:标签和数据点都会在两个刻度之间的带(band)中间
//非类目轴:boundaryGap是一个两个值的数组，分别表示数据最小值和最大值的延伸范围，可以直接设置数值或者相对的百分比，在设置 min 和 max 后无效

inverse:false  //是否是反向坐标轴

position :'bottom'  //x 轴的位置。'top','bottom'(默认)，
                           // 第二个x 轴视第一个 x 轴的位置放在另一侧

show : true    //是否显示 x 轴。

type : 'category'  //坐标轴类型。'value' 数值轴'category'
                   //类目轴'time' 时间轴'log' 对数轴

name : 'bug缠身'  //坐标轴名称。
nameLocation : 'end'  //坐标轴名称显示位置。
nameTextStyle     //坐标轴名称的文字样式。
//所有属性{ color , fontStyle , fontWeight , fontFamily , fontSize , align , verticalAlign , lineHeight , backgroundColor , borderColor , borderWidth , borderType , borderDashOffset , borderRadius , padding , shadowColor , shadowBlur , shadowOffsetX , shadowOffsetY , width , height , textBorderColor , textBorderWidth , textBorderType , textBorderDashOffset , textShadowColor , textShadowBlur , textShadowOffsetX , textShadowOffsetY , overflow , ellipsis , lineOverflow , rich }
nameGap : 15   //坐标轴名称与轴线之间的距离。
nameRotate : 0  //坐标轴名字旋转，角度值(逆时针)

splitLine:{
   show:true,   //是否显示分割线
   lineStyle:{
     color:'#xxx',   //分割线颜色
  }
}

资料：

vue2项目中封装echarts地图

vue2项目中封装echarts地图的比较优雅的方式