echarts参数详细介绍

最新推荐文章于 2024-07-30 10:56:44 发布

Zning_

最新推荐文章于 2024-07-30 10:56:44 发布

阅读量1k

点赞数

文章标签： echarts javascript 前端

具体参考官网 https://echarts.apache.org/en/option.html#title

title：标题

title: {
        text: 'test',
        x: 'center',
        backgroundColor: 'rgb(8, 10, 90,.4)',//标题背景颜色，默认'rgba(0,0,0,0)'透明
        textStyle: {    // 标题样式
          color: '#fff',    //字体颜色
          fontSize: 15,    //字体大小
          fontWeight: 700,    //字体粗细
        },
      },

grid配置项：图标离容器的距离

show:是否显示直角坐标系网格-----------值:true?false
left:图表离容器左侧的距离-----------------值:number?百分比
top:图表离容器顶部的距离-----------------值:number?百分比
right:图表离容器右侧的距离---------------值:number?百分比
bottom:图表离容器底部的距离------------值:number?百分比
backgroundColor:网格背景色-------------值:rgba或#000000
borderColor:网格的边框颜色--------------值:rgba或#000000
borderWidth:网格的边框线宽-------------值:number


grid: {
        left: '5%',
        right: '5%',
        bottom: '5%',
        top: '15%',
        containLabel: true,
      },

tootip：提示

show 显示与否（默认true）
trigger 触发类型（默认item）
axisPointer 坐标轴指示器配置项
showContent 是否显示提示框浮层（默认true）
alwaysShowContent 是否永远显示提示框（默认false,在移出可触发提示框区域后 一定时间 后隐藏）
triggerOn （提示框触发的条件）
showDelay （显示延迟，默认0）
hideDelay （隐藏延迟，默认100ms）
enterable （鼠标是否可进入提示框浮层中,默认false）
renderMode （浮层的渲染模式）
confine （是否将 tooltip 框限制在图表的区域内,移动端自适应）
transitionDuration （提示框浮层的移动动画过渡时间）
position （提示框浮层的位置）
formatter （提示框浮层内容格式器，支持字符串模板和回调函数两种形式。）
backgroundColor （提示框浮层的背景颜色）
borderColor （提示框浮层的边框颜色）
borderWidth （提示框浮层的边框宽）
padding （提示框浮层内边距）
textStyle （提示框浮层的文本样式）
extraCssText （额外附加到浮层的 css 样式）

 tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'shadow'
        },
		//如果是柱状图，柱子有折叠的时候，鼠标悬停，值展示一个柱子的数值
        formatter: function (params) {
          // console.log(params)
          let title = params[0].name;
          if (title.length > 30) {
            title = title.substring(0, 15) + '<br/>' + title.substring(15, 30) + '<br/>' + title.substring(30);
          } else if (title.length > 15) {
            title = title.substring(0, 15) + '<br/>' + title.substring(15);
          }
          let name = title + ' : ' + params[0].value;
          return name;
        },
      },

tooltip: {
    show: true,                     // 是否显示提示框组件
    trigger: 'axis',                // 触发类型（'item'，数据项图形触发，主要在散点图，饼图等无类目轴的图表中使用；'axis'，坐标轴触发，主要在柱状图，折线图等会使用类目轴的图表中使用；'none'，不触发。）
    axisPointer: {
        type: 'cross',              // 指示器类型（'line' 直线指示器；'shadow' 阴影指示器；'none' 无指示器；'cross' 十字准星指示器。）
        snap: false,                // 坐标轴指示器是否自动吸附到点上。默认自动判断。
        label: {
            margin: 10,             // label 距离轴的距离
            color: '#FFF',          // 文字的颜色
            fontStyle: 'normal',    // 文字字体的风格（'normal'，无样式；'italic'，斜体；'oblique'，倾斜字体） 
            fontWeight: 'normal',   // 文字字体的粗细（'normal'，无样式；'bold'，加粗；'bolder'，加粗的基础上再加粗；'lighter'，变细；数字定义粗细也可以，取值范围100至700）
            fontSize: '20',         // 文字字体大小
            lineHeight: '50',       // 行高 
            padding = [5, 7, 5, 7], // 内边距，单位px 
            backgroundColor = 'auto',// 文本标签的背景颜色
        },
        animation: true,            // 是否开启动画
        animationDuration: 1000,    // 初始动画时长
        animationDurationUpdate: 200,// 数据更新动画的时长
    },
    showContent: true,              // 是否显示提示框浮层，默认显示
    alwaysShowContent: true,        // 是否永远显示提示框内容，默认情况下在移出可触发提示框区域后一定时间后隐藏
    triggerOn: 'mousemove|click',   // 提示框触发的条件（'mousemove'，鼠标移动时触发；'click'，鼠标点击时触发；'mousemove|click'，同时鼠标移动和点击时触发；'none'，不在 'mousemove' 或 'click' 时触发）
    confine: true,                  // 是否将 tooltip 框限制在图表的区域内
    backgroundColor: 'rgba(50,50,50,0.7)',    // 提示框浮层的背景颜色
    padding: 5,                     // 提示框浮层内边距，单位px
    textStyle: {
        color: '#FFF',              // 文字的颜色
        fontStyle: 'normal',        // 文字字体的风格（'normal'，无样式；'italic'，斜体；'oblique'，倾斜字体） 
        fontWeight: 'normal',       // 文字字体的粗细（'normal'，无样式；'bold'，加粗；'bolder'，加粗的基础上再加粗；'lighter'，变细；数字定义粗细也可以，取值范围100至700）
        fontSize: '20',             // 文字字体大小
        lineHeight: '50',           // 行高 
    },
    formatter: function (params) {
        var result = ''
        var dotHtml = '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:30px;height:30px;background-color:#F1E67F"></span>'    // 定义第一个数据前的圆点颜色
        var dotHtml2 = '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:30px;height:30px;background-color:#2BA8F1"></span>'    // 定义第二个数据前的圆点颜色
        result += params[0].axisValue + "</br>" + dotHtml + ' 数据名称 ' + params[0].data + "</br>" + dotHtml2 + ' 数据名称 ' + params[1].data;
        return result
    }
}

xAxis：x轴

//当name值字数过多的时候，截取，只显示固定的几个字
    formatter: function (val: string) {
            let valList = '';
            let n = 4;
            for (var i = 0, l = val.length; i < l / n; i++) {
              let a = val.slice((n * i), n * (i + 1));
              valList = valList + a + '\n';
            }
            if (val.length > 4) {
              return val.substring(0, 4) + "...";
              // return valList
            } else {
              return val;
            }
          },

xAxis: {
    show: true,                    // 是否显示x轴
    position: 'top',               // x轴的位置  top、bottom
    type: 'category',              // 坐标轴类型 value、category、time、log
    name: '姓名',                   // 坐标轴名称
    nameRotate: 10,                // 坐标轴名字旋转，角度值
    inverse: false,                // 是否是反向坐标轴
    boundaryGap: ['20%', '20%'],   // 坐标轴两边留白策略
    splitNumber: 5,                // 坐标轴的分割段数（预估值）
    zlevel: 100,					//x轴层级（相当于定位中z-index）
    axisLine: {
        show: true,                // 是否显示坐标轴轴线
        symbol: ['none', 'arrow'], // 轴线两端箭头，两个值，none表示没有箭头，arrow表示有箭头
        symbolSize: [10, 15],      // 轴线两端箭头大小，数值一表示宽度，数值二表示高度
        lineStyle: {
            color: '#333',         // 坐标轴线线的颜色
            width: '5',            // 坐标轴线线宽
            type: 'solid',         // 坐标轴线线的类型（'solid'，实线类型；'dashed'，虚线类型；'dotted',点状类型）
        },
    },
    axisTick: {
        show: true,                // 是否显示坐标轴刻度
        inside: true,              // 坐标轴刻度是否朝内，默认朝外
        length: 5,                 // 坐标轴刻度的长度
        lineStyle: {
            color: '#FFF',         // 刻度线的颜色
            width: 10,             // 坐标轴刻度线宽
            type: 'solid',         // 坐标轴线线的类型（'solid'，实线类型；'dashed'，虚线类型；'dotted',点状类型）
        },
    },
    axisLabel: {
        show: true,                // 是否显示刻度标签
        interval: '0',             // 坐标轴刻度标签的显示间隔，在类目轴中有效.0显示所有
        inside: true,              // 刻度标签是否朝内，默认朝外
        rotate: 90,                // 刻度标签旋转的角度，在类目轴的类目标签显示不下的时候可以通过旋转防止标签之间重叠；旋转的角度从 -90 度到 90 度
        margin: 10,                // 刻度标签与轴线之间的距离
        // formatter 刻度标签的内容格式器，支持字符串模板和回调函数两种形式
        color: '#FFF',             // 刻度标签文字的颜色
        fontStyle: 'normal',       // 文字字体的风格（'normal'，无样式；'italic'，斜体；'oblique'，倾斜字体） 
        fontWeight: 'normal',      // 文字字体的粗细（'normal'，无样式；'bold'，加粗；'bolder'，加粗的基础上再加粗；'lighter'，变细；数字定义粗细也可以，取值范围100至700）
        fontSize: '20',            // 文字字体大小
        align: 'left',             // 文字水平对齐方式，默认自动（'left'，'center'，'right'）
        verticalAlign: 'left',     // 文字垂直对齐方式，默认自动（'top'，'middle'，'bottom'
        lineHeight: '50',          // 行高
        backgroundColor: 'red',    // 文字块背景色，例：'#123234', 'red', 'rgba(0,23,11,0.3)'
    },
    splitLine: {
        show: true,                // 是否显示分隔线。默认数值轴显示，类目轴不显示
        interval: '0',             // 坐标轴刻度标签的显示间隔，在类目轴中有效.0显示所有
        color: ['#ccc'],           // 分隔线颜色，可以设置成单个颜色，也可以设置成颜色数组，分隔线会按数组中颜色的顺序依次循环设置颜色
        width: 3,                  // 分隔线线宽
        type: 'solid',             // 坐标轴线线的类型（'solid'，实线类型；'dashed'，虚线类型；'dotted',点状类型）
    },
    splitArea: {
        show: true,                // 是否显示分隔区域
        interval: '0',             // 坐标轴刻度标签的显示间隔，在类目轴中有效.0显示所有
        areaStyle: {
            color: ['rgba(250,250,250,0.3)','rgba(200,200,200,0.3)'],    // 分隔区域颜色。分隔区域会按数组中颜色的顺序依次循环设置颜色。默认是一个深浅的间隔色
            opacity: 1,            // 图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形
        },
    },
    //当name值字数过多的时候，截取，只显示固定的几个字
    formatter: function (val: string) {
            let valList = '';
            let n = 4;
            for (var i = 0, l = val.length; i < l / n; i++) {
              let a = val.slice((n * i), n * (i + 1));
              valList = valList + a + '\n';
            }
            if (val.length > 4) {
              return val.substring(0, 4) + "...";
              // return valList
            } else {
              return val;
            }
          },
    data: {
        textStyle: {
            color: '#FFF',         // 文字的颜色
            fontStyle: 'normal',   // 文字字体的风格（'normal'，无样式；'italic'，斜体；'oblique'，倾斜字体） 
            fontWeight: 'normal',  // 文字字体的粗细（'normal'，无样式；'bold'，加粗；'bolder'，加粗的基础上再加粗；'lighter'，变细；数字定义粗细也可以，取值范围100至700）
            fontSize: '20',        // 文字字体大小
            align: 'left',         // 文字水平对齐方式，默认自动（'left'，'center'，'right'）
            verticalAlign: 'left', // 文字垂直对齐方式，默认自动（'top'，'middle'，'bottom'
            lineHeight: '50',      // 行高
            backgroundColor: 'red',// 文字块背景色，例：'#123234', 'red', 'rgba(0,23,11,0.3)'
        },
    },
},

yAxis：y轴

yAxis: {
    show: true,                 // 是否显示 y 轴
    position: 'top',            // y 轴的位置（'top'，'bottom'） 
    type: 'category',           // 坐标轴类型
    nameLocation: 'end',        // 坐标轴名称显示位置
    nameGap: 15,                // 坐标轴名称与轴线之间的距离
    nameRotate: 10,             // 坐标轴名字旋转，角度值
    inverse: false,             // 是否是反向坐标轴
    nameTextStyle: {
        color: '#333',          // 坐标轴名称的颜色
        fontStyle: 'normal',    // 文字字体的风格（'normal'，无样式；'italic'，斜体；'oblique'，倾斜字体） 
        fontWeight: 'normal',   // 文字字体的粗细（'normal'，无样式；'bold'，加粗；'bolder'，加粗的基础上再加粗；'lighter'，变细；数字定义粗细也可以，取值范围100至700）
        fontSize: '20',         // 文字字体大小
        align: 'left',          // 文字水平对齐方式，默认自动（'left'，'center'，'right'）
        verticalAlign: 'left',  // 文字垂直对齐方式，默认自动（'top'，'middle'，'bottom'
        lineHeight: '50',       // 行高
        backgroundColor: 'red', // 文字块背景色，例：'#123234', 'red', 'rgba(0,23,11,0.3)'
    },
    axisLine: {
        show: true,             // 是否显示坐标轴轴线
        symbol: ['none', 'arrow'],   // 轴线两端箭头，两个值，none表示没有箭头，arrow表示有箭头
        symbolSize: [10, 15],   // 轴线两端箭头大小，数值一表示宽度，数值二表示高度
        lineStyle: {
            color: '#333',      // 坐标轴线线的颜色
            width: '5',         // 坐标轴线线宽
            type: 'solid',      // 坐标轴线线的类型（'solid'，实线类型；'dashed'，虚线类型；'dotted',点状类型）
        },
    },
    axisTick: {
        show: true,             // 是否显示坐标轴刻度
        inside: true,           // 坐标轴刻度是否朝内，默认朝外
        length: 5,              // 坐标轴刻度的长度
        lineStyle: {
            color: '#FFF',      // 刻度线的颜色
            width: 10,          // 坐标轴刻度线宽
            type: 'solid',      // 坐标轴线线的类型（'solid'，实线类型；'dashed'，虚线类型；'dotted',点状类型）
        },
    },
    axisLabel: {
        show: true,                 // 是否显示刻度标签
        interval: '0',              // 坐标轴刻度标签的显示间隔，在类目轴中有效.0显示所有
        inside: true,               // 刻度标签是否朝内，默认朝外
        rotate: 90,                 // 刻度标签旋转的角度，在类目轴的类目标签显示不下的时候可以通过旋转防止标签之间重叠；旋转的角度从 -90 度到 90 度
        margin: 10,                 // 刻度标签与轴线之间的距离
        // formatter 刻度标签的内容格式器，支持字符串模板和回调函数两种形式
        color: '#FFF',              // 刻度标签文字的颜色
        fontStyle: 'normal',        // 文字字体的风格（'normal'，无样式；'italic'，斜体；'oblique'，倾斜字体） 
        fontWeight: 'normal',       // 文字字体的粗细（'normal'，无样式；'bold'，加粗；'bolder'，加粗的基础上再加粗；'lighter'，变细；数字定义粗细也可以，取值范围100至700）
        fontSize: '20',             // 文字字体大小
        align: 'left',              // 文字水平对齐方式，默认自动（'left'，'center'，'right'）
        verticalAlign: 'left',      // 文字垂直对齐方式，默认自动（'top'，'middle'，'bottom'
        lineHeight: '50',           // 行高
        backgroundColor: 'red',     // 文字块背景色，例：'#123234', 'red', 'rgba(0,23,11,0.3)'
    },
    splitLine: {
        show: true,                 // 是否显示分隔线。默认数值轴显示，类目轴不显示
        interval: '0',              // 坐标轴刻度标签的显示间隔，在类目轴中有效.0显示所有
        color: ['#ccc'],            // 分隔线颜色，可以设置成单个颜色，也可以设置成颜色数组，分隔线会按数组中颜色的顺序依次循环设置颜色
        width: 3,                   // 分隔线线宽
        type: 'solid',              // 坐标轴线线的类型（'solid'，实线类型；'dashed'，虚线类型；'dotted',点状类型）
    },
    splitArea: {
        show: true,                 // 是否显示分隔区域
        interval: '0',              // 坐标轴刻度标签的显示间隔，在类目轴中有效.0显示所有
        areaStyle: {
            color: ['rgba(250,250,250,0.3)','rgba(200,200,200,0.3)'],    // 分隔区域颜色。分隔区域会按数组中颜色的顺序依次循环设置颜色。默认是一个深浅的间隔色
            opacity: 1,             // 图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形
        },
    },
    data: {
        textStyle: {
            color: '#FFF',          // 文字的颜色
            fontStyle: 'normal',    // 文字字体的风格（'normal'，无样式；'italic'，斜体；'oblique'，倾斜字体） 
            fontWeight: 'normal',   // 文字字体的粗细（'normal'，无样式；'bold'，加粗；'bolder'，加粗的基础上再加粗；'lighter'，变细；数字定义粗细也可以，取值范围100至700）
            fontSize: '20',         // 文字字体大小
            align: 'left',          // 文字水平对齐方式，默认自动（'left'，'center'，'right'）
            verticalAlign: 'left',  // 文字垂直对齐方式，默认自动（'top'，'middle'，'bottom'
            lineHeight: '50',       // 行高 ）
            backgroundColor: 'red', // 文字块背景色，例：'#123234', 'red', 'rgba(0,23,11,0.3)'
        },
    },
}

legend：图表旁边的文字

legend: {
        icon: 'Rect',
        orient: 'horizontal',
        itemWidth: 20,
        itemHeight: 2,
        textStyle: {
          fontSize: 12, //字体大小
          color: fontColor, //字体颜色
        },
        right: '50%', //距离右侧
      },

series：

series下的label position的属性值


inside(自适应，柱状内部中央),top（柱状外的正上方）,bottom(柱状外的正下方)，left(柱状外的左边)，right(柱状外的右边)

坐标[x,y](以柱状的顶部为原点)

insideTop(柱状内部靠顶部)，insideBottom(柱状内部靠下方)，insideRight(柱状内部靠右边)，insideLeft(柱状内部靠左边)

series: [{
      type: 'pie',
      radius: ['10%', '40%'],
      center: ['40%', '50%'],
      // 数字在柱状图中显示的位置
	 label: {
            show: true,  
            // position: 'top',
            position: [2, -13],
            color: '#ffb000',
          },
     //这个是饼状图或者环状图 指出的线
      labelLine: {
         normal: {
            show: isshowline,
            length: 10,
            length2: 55,
            lineStyle: {
               color: "#fff"
            },
         }
      },
      data: chartData,
   }]

dataZoom：区域缩放控制器

dataZoom: {
        orient: 'horizontal',      // 布局方式，默认为水平布局，可选为：
                                   // 'horizontal' ¦ 'vertical'
        // x: {number},            // 水平安放位置，默认为根据grid参数适配，可选为：
                                   // {number}（x坐标，单位px）
        // y: {number},            // 垂直安放位置，默认为根据grid参数适配，可选为：
                                   // {number}（y坐标，单位px）
        // width: {number},        // 指定宽度，横向布局时默认为根据grid参数适配
        // height: {number},       // 指定高度，纵向布局时默认为根据grid参数适配
        backgroundColor: 'rgba(0,0,0,0)',       // 背景颜色
        dataBackgroundColor: '#eee',            // 数据背景颜色
        fillerColor: 'rgba(144,197,237,0.2)',   // 填充颜色
        handleColor: 'rgba(70,130,180,0.8)'     // 手柄颜色
    },