使用Echarts时用到的所有参数属性说明

使用Echarts时用到的所有参数属性说明

1、Echarts - title 属性

title:{
	x:"left",    // 'left' | 'right' | 'center' | '100px'
	y:"4%",     // 'top' | 'bottom' | 'center' | '100px'
    // 标题
    show: true, //是否显示
    text: "标题内容",
    textStyle: {
      color: "#fff", // 主标题文字的颜色。
      fontStyle: "normal", // 主标题文字字体的风格。 'normal'  'italic'  'oblique'
      fontWeight: "normal", // 主标题文字字体的粗细。 'normal' 'bold'  'bolder'  'lighter' 500|600
      fontFamily: "sans-serif", // 主标题文字的字体系列。
      fontSize: 18, // 字体大小
      lineHeight: "30", // 行高
      // width ... , // 文字块的宽度
      // height ... , // 文字块的高度
      textBorderColor: "transparent", // 文字本身的描边颜色。
      textBorderWidth: 0, // 文字本身的描边宽度。
      textShadowColor: "transparent", // 文字本身的阴影颜色。
      textShadowBlur: 0, // 文字本身的阴影长度。
      textShadowOffsetX: 0, // 文字本身的阴影 X 偏移。
      textShadowOffsetY: 0, //  文字本身的阴影 Y 偏移。
    },
    subtext: "bb", // 副标题文本
    subtextStyle: {
      color: "red",
      fontSize: "16",
    },   //副标题样式
    textAlign: "auto", //水平对齐'auto'、'left'、'right'、'center'
    textVerticalAlign: "auto", // 垂直对齐  'auto'、'top'、'bottom'、'middle'
    triggerEvent: false, // 是否触发事件
    padding: 5, // 标题内边距  5/[5,2,4,7]
    itemGap: 10, //主副标题之间的间距
    left: 10, // 距离 left top right bottom
    x: "center",  // 水平安放位置，默认为左对齐，可选为：'center' ¦ 'left' ¦ 'right' ¦ {number}（x坐标，单位px）
    y: "4%",      // 垂直安放位置，默认为全图顶端，可选为：// 'top' ¦ 'bottom' ¦ 'center'¦ {number}（y坐标，单位px）
    backgroundColor: "pink", // 标题背景色
    borderColor: "#ccc", // 标题的边框颜色
    borderWidth: 5, // 标题的边框线宽。
    borderRadius: 2, // 圆角半径
    shadowBlur: 10, //图形阴影的模糊大小
    shadowColor: "rgba(0, 0, 0, 0.5)", // 阴影颜色
    shadowOffsetX: 5, // 阴影水平方向上的偏移距离。
    shadowOffsetY: 5, //阴影垂直方向上的偏移距离。
}

2、Echarts - tooltip

tooltip ={                                  //提示框组件
    trigger: 'item',                        //触发类型,'item'数据项图形触发，主要在散点图，饼图等无类目轴的图表中使用。 'axis'坐标轴触发，主要在柱状图，折线图等会使用类目轴的图表中使用。
    triggerOn:"mousemove",                  //提示框触发的条件,'mousemove'鼠标移动时触发。'click'鼠标点击时触发。'mousemove|click'同时鼠标移动和点击时触发。'none'不在 'mousemove' 或 'click' 时触发
    showContent:true,                       //是否显示提示框浮层
    alwaysShowContent:true,                 //是否永远显示提示框内容
    showDelay:0,                            //浮层显示的延迟，单位为 ms
    hideDelay:100,                          //浮层隐藏的延迟，单位为 ms
    enterable:false,                        //鼠标是否可进入提示框浮层中
    confine:false,                          //是否将 tooltip 框限制在图表的区域内
    transitionDuration:0.4,                 //提示框浮层的移动动画过渡时间，单位是 s,设置为 0 的时候会紧跟着鼠标移动
    position:['50%', '50%'],                //提示框浮层的位置，默认不设置时位置会跟随鼠标的位置,[10, 10],回掉函数，inside鼠标所在图形的内部中心位置，top、left、bottom、right鼠标所在图形上侧，左侧，下侧，右侧，
    formatter:"{b0}: {c0}<br />{b1}: {c1}", //提示框浮层内容格式器，支持字符串模板和回调函数两种形式,模板变量有 {a}, {b}，{c}，{d}，{e}，分别表示系列名，数据名，数据值等
    backgroundColor:"transparent",          //标题背景色
    borderColor:"#ccc",                     //边框颜色
    borderWidth:0,                          //边框线宽
    padding:5,                              //图例内边距，单位px  5  [5, 10]  [5,10,5,10]
    textStyle:mytextStyle,                  //文本样式
    axisPointer: {                          // 鼠标放在
      type: 'cross', //默认为line，line直线，cross十字准星，shadow阴影
      crossStyle: {
              color: '#fff'
      },
      lineStyle: {    //鼠标放上去的样式
        color: {
          type: "linear",
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [
            {
              offset: 0,
              color: "rgba(255,255,255,0)", // 0% 处的颜色
            },
            {
              offset: 0.5,
              color: "rgba(255,255,255,1)", // 100% 处的颜色
            },
            {
              offset: 1,
              color: "rgba(255,255,255,0)", // 100% 处的颜色
            },
          ],
          global: false, // 缺省为 false
        },
      },
    },
    formatter: function (value) {
      for (var i = 0; i < value.length; i++) {
        return (
          value[i].seriesName +
          "<br/>" +
          value[i].name +
          unit +
          "：" +
          value[i].value +
          "%"
        );
      }
    },
};

3、Echarts - legend

        legend: {
          show: true, //是否显示
          type: "plain", // 图例的类型 'plain':普通图例  'scroll':可滚动翻页的图例
          zlevel: 1, // 所有图形的 zlevel 值。
          icon: "circle",类型包括 circle，rect,line，roundRect，triangle，diamond，pin，arrow，none
          top: "5%", // bottom:"20%" // 组件离容器的距离
          right: "5%", //left:"10%"  // // 组件离容器的距离
          width: "auto", // 图例组件的宽度
          height: "auto", // 图例组件的高度 height: 150,
          orient: "horizontal", // 图例列表的布局朝向。 'horizontal'  'vertical'
          align: "auto", // 图例标记和文本的对齐
          padding: 5, // 图例内边距
          itemWidth: 6, // 图例标记的图形宽度。
          itemGap: 20, // 图例每项之间的间隔。
          itemHeight: 14, //  图例标记的图形高度。
          symbolKeepAspect: true, // 如果图标（可能来自系列的 symbol 或用户自定义的 legend.data.icon）是 path:// 的形式，是否在缩放时保持该图形的长宽比。
          formatter: function (name) {
            return '{a|text}{a|   }{b|' +  name + '}'
          },
          selectedMode: true, // 图例选择的模式，
          inactiveColor: "#ccc", // 图例关闭时的颜色。
          textStyle: {
            color: "#556677", // 文字的颜色。
            fontStyle: "normal", // 文字字体的风格。
            fontWeight: "normal", // 文字字体的粗细。 'normal' 'bold'  'bolder' 'lighter'  100 | 200 | 300 | 400...
            fontFamily: "sans-serif", // 文字的字体系列。
            fontSize: 12, // 文字的字体大小。
            lineHeight: 20, // 行高。
            backgroundColor: "transparent", // 文字块背景色。
            borderColor: "transparent", // 文字块边框颜色。
            borderWidth: 0, // 文字块边框宽度。
            borderRadius: 0, // 文字块的圆角。
            padding: 0, // 文字块的内边距
            shadowColor: "transparent", // 文字块的背景阴影颜色
            shadowBlur: 0, // 文字块的背景阴影长度。
            shadowOffsetX: 0, // 文字块的背景阴影 X 偏移。
            shadowOffsetY: 0, // 文字块的背景阴影 Y 偏移。
            // width: 50, // 文字块的宽度。 默认
            // height: 40, // 文字块的高度 默认
            textBorderColor: "transparent", // 文字本身的描边颜色。
            textBorderWidth: 0, // 文字本身的描边宽度。
            textShadowColor: "transparent", // 文字本身的阴影颜色。
            textShadowBlur: 0, // 文字本身的阴影长度。
            textShadowOffsetX: 0, // 文字本身的阴影 X 偏移。
            textShadowOffsetY: 0, // 文字本身的阴影 Y 偏移。
            rich: {
            a: {
              color: "red",
              lineHeight: 10,
            },
             b: {
              color: "#fff",
              lineHeight: 10,
            },
          }, // 自定富文本样式
          },
        },

4、Echarts - grid

grid 为直角坐标系内绘图网格，可以设置 x y x2 y2 等值。

grid:{
	x: 80,   //top:"15%" | right:"3%" | left:"2%" | bottom:"12%"
    y: 60,
    x2: 80,
    y2: 60,
    // width: {totalWidth} - x - x2,
    // height: {totalHeight} - y - y2,
    backgroundColor: ‘rgba(0,0,0,0)‘,
    borderWidth: 1,
    borderColor: '#ccc',
    containLabel: true, //防止坐标轴标签溢出
}

dataZoom: [
     {
      	type: 'slider',
       show: true,
       height: 20,//组件高度
       xAxisIndex: [0],
       bottom: 0,//右边的距离
       start: 0,
       end: 1,
       zoomLock: false,
       zoomOnMouseWheel: true, //如何触发缩放。可选值为：true：表示不按任何功能键，鼠标滚轮能触发缩放。false：表示鼠标滚轮不能触发缩放。'shift'：表示按住 shift 和鼠标滚轮能触发缩放。'ctrl'：表示按住 ctrl 和鼠标滚轮能触发缩放。'alt'：表示按住 alt 和鼠标滚轮能触发缩放。
       moveOnMouseMove: true,
       handleIcon:
         "path://M306.1,413c0,2.2-1.8,4-4,4h-59.8c-2.2,0-4-1.8-4-4V200.8c0-2.2,1.8-4,4-4h59.8c2.2,0,4,1.8,4,4V413z",
       handleSize: "110%", /滑动条的左右两个滑动条的大小
       handleColor: '#ddd',//h滑动图标的颜色
       handleStyle: {
         color: "#01AD83",
         borderColor: "#cacaca",
         borderWidth: "1",
         shadowBlur: 2,
         background: "#ddd",
         shadowColor: "#ddd",
       },
       textStyle: {
         color: "rgba(1,173,131,0.5)",
       },
       // fillerColor: "rgba(1,173,131,0.4)",
       fillerColor: new echarts.graphic.LinearGradient(1, 0, 0, 0, [{
          //给颜色设置渐变色 前面4个参数，给第一个设置1，第四个设置0 ，就是水平渐变
          //给第一个设置0，第四个设置1，就是垂直渐变
          offset: 0,
          color: '#1eb5e5'
       }, {
          offset: 1,
          color: '#5ccbb1'
       }]),
      backgroundColor: '#ddd',//两边未选中的滑动条区域的颜色
      showDataShadow: false,//是否显示数据阴影 默认auto
      showDetail: false,//即拖拽时候是否显示详细数值信息 默认true
      borderColor: "rgba(1,173,131,0.5)",
     },
     //下面这个属性是里面拖到
     {
       type: "inside",
       show: true,
       height: 15,
       start: 0,
       end: 1,
     },
   ],

5、Echarts - xAxis

xAxis: {
  boundaryGap: false,// 刻度离纵轴有无间隙，默认true有间距
  type: 'category', //'value' 数值轴，适用于连续数据。 'category' 类目轴，适用于离散的类目数据，为该类型时必须通过 data 设置类目数据。 'time' 时间轴，适用于连续的时序数据，与数值轴相比时间轴带有时间的格式化，在刻度计算上也有所不同，例如会根据跨度的范围来决定使用月，星期，日还是小时范围的刻度。 'log' 对数轴。适用于对数数据。
  position:'bottom',  // 'bottom' | 'top'
  name: '(ETD)',// 横轴名称
  nameLocation: "center",
  nameTextStyle:{
    fontSize:12,
    fontWeight:'bold',
    color:'#ff0033',
    //align:'left',
  },
  nameLocation:'middle',//坐标轴的位置 'start' | 'center' | 'end'
  nameGap:50,//坐标轴名称与轴线之间的距离
  nameRotate:90,//坐标轴名字旋转角度值,
  axisLabel : {//坐标轴刻度标签的相关设置。
      // clickable:true,//并给图表添加单击事件  根据返回值判断点击的是哪里
      interval: 0,
      **//注：interval 坐标轴刻度标签的显示间隔(在类目轴中有效哦)，默认会采用标签不重叠的方式显示标签（也就是默认会将部分文字显示不全）
可以设置为0强制显示所有标签，如果设置为1，表示隔一个标签显示一个标签，如果为3，表示隔3个标签显示一个标签，以此类推**
      inside:false, //  标签朝内还是朝外
      rotate: 40,// 文字倾斜度
      //-----------文字竖直显示--------------------
      formatter:function(value){
         return value.split("").join("\n");
      }
     //-----------------------------------两个字垂直显示----------------------------
     formatter:function(value)
     {
         debugger
         var ret = "";//拼接加\n返回的类目项
         var maxLength = 2;//每项显示文字个数
         var valLength = value.length;//X轴类目项的文字个数
         var rowN = Math.ceil(valLength / maxLength); //类目项需要换行的行数
         if (rowN > 1)//如果类目项的文字大于3,
         {
             for (var i = 0; i < rowN; i++) {
                 var temp = "";//每次截取的字符串
                 var start = i * maxLength;//开始截取的位置
                 var end = start + maxLength;//结束截取的位置
                 //这里也可以加一个是否是最后一行的判断，但是不加也没有影响，那就不加吧
                 temp = value.substring(start, end) + "\n";
                 ret += temp; //凭借最终的字符串
             }
             return ret;
         }
         else {
             return value;
         }
     }
//------------------------------------------------------------------------------------
      textStyle:{
      	color:'#fff,
      	fontSize:'20px',
      	align:'center'
      }
  },
  axisLine:{
    lineStyle:{
      color:'red'   //x轴颜色
    },
    symbol:['none','arrow'], //轴线两边的箭头
    symbolSize:[8, 12]  //箭头大小
  },
  data: ['2020-07-08 周三','2020-07-09 周四',].map((str) => {
      return str.replace(' ','\n')
  }),// 横轴坐标值
  // data: [{value:'1',textStyle:{
            color:'#ff0033',
        }}, '2/7', '3', '4', '5', '6', '7']//每一项也可以是具体的配置项，此时取配置项中的 `value` 为类目名
  splitLine: {
  	show: false，
  	lineStyle:{  //属性lineStyle（详见lineStyle）控制线条样式
		color:['#ccc'],
		width:1,
		type:'solid'
	}
  },  // 取消X轴的网格
  splitArea:{   //分隔区域
    show:true,
    areaStyle:{
		color:['rgba(250,250,250,0.3)','rgba(200,200,200,0.3)'],
	}
  },
  axisTick: {  // 显示隐藏刻度线
   inside:true, //刻度朝内还是朝外
   alignWithLabel: true   // 刻度线是否显示
  }
}

6、Echarts - yAxis

yAxis: {
   type: 'value',
   name: "         金额( 单位: 万元 )",
   nameRotate: 90,
   nameLocation: "middle",
   nameTextStyle: {
     color: '#ffffff',
     padding: [0, 0, 0, -10] ,//调整位置
   },
   scale: true,//自动适配y轴，不需要必须从0开始 或者选择下边这种设置最大最小值
   min: function(value) {return value.min;},
   max: function(value) {return value.max;},
   
   axisLine: {
     show: false,
     lineStyle: {
       type: 'dashed',
       color: 'rgba(135,140,147,0.8)'
     }，
     axisLabel: {
       show: true,
       textStyle: {
         color: "#fff",
         fontSize: "16",
       },
       formatter:function(value){     //设置Y轴显示的名字，超出做..隐藏
         var res = value;
         if(res.length >7){
           res = res.substring(0,6) + ".."
         }
         return res;
       }
     },
   },
   splitLine: {
     show: true,
     lineStyle: {
       type: 'dashed',   //背景线为虚线
       color: 'rgba(135,140,147,.8)' //左侧显示线
     }
   },
   axisLabel: {
     formatter: '{value}',
     color: '#fff',
     fontSize: 14
   }
 },

7、Echarts - bar

bar:{
	barMinHeight: 0, // 最小高度改为0
    // barWidth: null,        // 默认自适应
    colorBy: "series", //按照系列分配调色盘中的颜色，同一系列中的所有数据都是用相同的颜色；【从调色盘 option.color 中取色的策略】
    barGap: '30%', // 柱间距离，默认为柱形宽度的30%，可设固定值
    barCategoryGap: '20%', // 类目间柱形距离，默认为类目间距的20%，可设固定值,需要注意的是，如果设置了barWidth 该属性将不起作用
    label: {
                show: true, // 柱子顶部的数值
                position: "top",
                fontSize: 12,
                color: "#fff",
                offset: [0, -10],
                fontWeight: 'bolder'	，
                formatter: function (params) {
                  let num = params.value;
                  if (num > 1024) {
                    return (num / 1024).toFixed(2) + "GB";
                  } else if (num < 1024 && num > 0) {
                    return num.toFixed(2) + "MB";
                  } else {
                    return "";
                  }
                },
              },
    itemStyle: {
        normal: {
            // color: '各异',
            color: function (params) {
                return colors[params.dataIndex];
             }, //可以设置每个柱子的颜色
            barBorderColor: '#fff', // 柱条边线
            barBorderRadius: 0, // 柱条边线圆角，单位px，默认为0
            barBorderWidth: 1, // 柱条边线线宽，单位px，默认为1
            label: {  //z柱状图上显示数字
                show: false
                position: 'top'，// 默认自适应，水平布局为'top'，垂直布局为'right'，可选为'inside'|'left'|'right'|'top'|'bottom|insideTop'
                textStyle: {
                    color: "#01E6FF",
                  },      // 默认使用全局文本样式，详见TEXTSTYLE
                // formatter: function (p) {
                //   return p.value > 0 ? p.value : "";
                //},
                formatter: function (params) {
                  let num = params.value;
                  if (num > 1024) {
                    return (num / 1024).toFixed(2) + "GB";
                  } else if (num < 1024 && num > 0) {
                    return num.toFixed(2) + "MB";
                  } else {
                    return "";
                  }
                },
            }
        },
        emphasis: {   // 鼠标移入的样式
            // color: '各异',
            barBorderColor: 'rgba(0,0,0,0)', // 柱条边线
            barBorderRadius: 0, // 柱条边线圆角，单位px，默认为0
            barBorderWidth: 1, // 柱条边线线宽，单位px，默认为1
            label: {
                show: false
                // position: 默认自适应，水平布局为'top'，垂直布局为'right'，可选为
                //           'inside'|'left'|'right'|'top'|'bottom'
                // textStyle: null      // 默认使用全局文本样式，详见TEXTSTYLE
            }
        }
    }
}

8、Echarts - line

line: {
	  itemStyle: {
	       normal: {
	           // color: 各异,
	           label: {
	               show: false
	               // position: 默认自适应，水平布局为'top'，垂直布局为'right'，可选为
	               //           'inside'|'left'|'right'|'top'|'bottom'
	               // textStyle: null      // 默认使用全局文本样式，详见TEXTSTYLE
	           },
	           lineStyle: {
	               width: 2,
	               type: 'solid',
	               	normal: {
	               	//线的渐变颜色
		                color: new echarts.graphic.LinearGradient(0, 0, 0, 0.7, [        
		                  {
		                    offset: 0,
		                    color: "#24D5CC",
		                  },
		                  {
		                    offset: 1,
		                    color: "#7A50F1",
		                  },
		                ]),
		                opacity: 0.75,
		              },
	               shadowColor: 'rgba(0,0,0,0)', //默认透明  阴影
	               shadowBlur: 5,
	               shadowOffsetX: 3,
	               shadowOffsetY: 3
	           }，
	           itemStyle: {
	              normal: {
	                lineStyle: {
	                  width: 3, //设置线条粗细
	                },
	              },
	            },
	          areaStyle: {   //折线图覆盖面积
                  color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                    {
                      offset: 0,
                      color: "rgba(255,80,124,0)",
                    },
                    {
                      offset: 1,
                      color: "rgba(255,80,124,0.35)",
                    },
                  ]),    //渐变色
                },
	       },
	       emphasis: {   // 鼠标移入
	           // color: 各异,
	           label: {
	               show: false
	               // position: 默认自适应，水平布局为'top'，垂直布局为'right'，可选为
	               //           'inside'|'left'|'right'|'top'|'bottom'
	               // textStyle: null      // 默认使用全局文本样式，详见TEXTSTYLE
	           }
	       }
	   },
	   //smooth : false,  //是否平滑
	   //symbol: null,         // 拐点图形类型,可以自己设置图片
	   symbolSize: 2, // 拐点图形大小
	   itemStyle: {   //拐点样式
            normal: {
              color: this.params.color[index],
              borderColor: "#fff",
              type:'dotted'  //'dotted'虚线 'solid'实线
            },
          },
	   symbolOffset: ["0", "-8"],//拐点位置
	   //symbolRotate : null,  // 拐点图形旋转控制
	   showAllSymbol: false // 标志图形默认只有主轴显示（随主轴标签间隔隐藏策略）
},

9、Echarts - pie

// 横向柱状图
series: [
          {
            type: "pie",
            radius: ["45%", "60%"],
            center: this.center,
            data: echartData,
            hoverAnimation: false,
            itemStyle: {
              normal: {
                borderColor: bgColor,
                borderWidth: 2
              }
            },
            labelLine: {
              normal: {
                length: 20,
                // length2: 100,  //外边的引导线的长度
                lineStyle: {
                  color: "#999"
                }
              }
            },
            label: {
              normal: {
              //https://echarts.apache.org/zh/option.html#grid.tooltip.formatter
              //{a},{b},{c},{d}各代表不同的值
              // formatter: "{font|{b}}\n{hr|}\n{font|{d}%}",
                formatter: params => {
                  return (
                    "{icon|●}{name|" +
                    params.name +
                    "}{value|" +
                    formatNumber(params.value) +
                    "}"
                  );
                },
                padding: [0, 0, 0, 0],
                rich: {
                  icon: {
                    fontSize: 16
                  },
                  name: {
                    fontSize: 14,
                    padding: [0, 10, 0, 4],
                    color: "#666"
                  },
                  value: {
                    fontSize: 16,
                    fontWeight: "bold",
                    color: "#666"
                  },
                  hr: {
                    height: 0,
                    borderWidth: 1,
                    width: "100%",
                    borderColor: "#999"
                  }
                }
              }
            }
          }
        ]

10、Echarts - series

// 横向柱状图
 series: [{
        name: '标准化',
        type: 'bar',
        barWidth: 12, // 柱子宽度
        label: {
            show: true,
            position: 'right', // 位置
            color: '#A7D6F4',
            fontSize: 14,
            distance: 15, // 距离
			formatter: '{c} 万公里' // 这里是数据展示的时候显示的数据
        }, // 柱子上方的数值
        itemStyle: {
            barBorderRadius: [0, 20, 20, 0], // 圆角（左上、右上、右下、左下）
            
                color: new echarts.graphic.LinearGradient(1, 0, 0, 0, [{
                    offset: 0,
                    color: '#51C5FD'
                }, {
                    offset: 1,
                    color: '#005BB1' 
                }], false), // 渐变
        },
        data: [400,380,360,340,320,300,280,260,240,220]
    }, ]

echarts 点击事件

 that.chart.off("click"); //防止重复调接口

 that.chart.on("click", function(params) {

   that.$emit("handleScoreDialog", params);

 });