echarts参数配置示例——legend图例属性设置 & tooltip之formatter自定义显示内容

echarts参数配置示例——legend图例属性设置 & tooltip之formatter自定义显示内容

1、legend图例属性设置

//Echarts数据可视化legend图例属性设置 legend={ 
    show:true, //是否显示 zlevel:0, //所属图形的Canvas分层，zlevel 大的 Canvas 会放在 zlevel 小的 Canvas 的上面 z:2, //所属组件的z分层，z值小的图形会被z值大的图形覆盖 left:"center", //组件离容器左侧的距离,'left', 'center', 'right','20%' top:"top", //组件离容器上侧的距离,'top', 'middle', 'bottom','20%' right:"auto", //组件离容器右侧的距离,'20%' bottom:"auto", //组件离容器下侧的距离,'20%' width:"auto", //图例宽度 height:"auto", //图例高度 orient:"horizontal", //图例排列方向 align:"auto", //图例标记和文本的对齐,left,right padding:5, //图例内边距，单位px 5 [5, 10] [5,10,5,10] itemGap:10, //图例每项之间的间隔 itemWidth:25, //图例标记的图形宽度 itemHeight:14, //图例标记的图形高度 formatter:function (name) { 
    //用来格式化图例文本，支持字符串模板和回调函数两种形式。模板变量为图例名称 {name} return 'Legend ' + name; }, formatter: function(name){ 
    　　　　return name.length>12?name.substr(0,12)+"...":name; 　　}, //legend文字超出宽度显示省略号 selectedMode:"single", //图例选择的模式,true开启,false关闭,single单选,multiple多选 inactiveColor:"#ccc", //图例关闭时的颜色 textStyle:mytextStyle, //文本样式 data:['类别1', '类别2', '类别3'], //series中根据名称区分 backgroundColor:"transparent", //标题背景色 borderColor:"#ccc", //边框颜色 borderWidth:0, //边框线宽 shadowColor:"red", //阴影颜色 shadowOffsetX:0, //阴影水平方向上的偏移距离 shadowOffsetY:0, //阴影垂直方向上的偏移距离 shadowBlur:10, //阴影的模糊大小 }; 

2、示例

 let barData = [{ 
   name:'name1',age:'18',sex:'0'}]; var barOption = { 
    title: { 
    text: 'echarts图标title', }, legend: { 
    show: false, // 是否显示图例 }, grid: { 
    x: "3.5%", ；//左侧 y轴内容距离边框的距离（类似padding-left） }, color: ["#35D2FF"], // 条形颜色 tooltip: { 
    // 鼠标经过 tip提示 trigger: "item", // 当trigger为’item’时只会显示该点的数据，为’axis’时显示该列下所有坐标轴所对应的数据。 默认为 'item' backgroundColor: "rgba(43,43,43,1)", borderRadius: 4, borderWidth: 1, padding: 10, // hideDelay:100, // 延迟消失 extraCssText: // tip样式 "width:199px!important;height:114px;background:rgba(255,255,255,0.94);box-shadow:0px 10px 35px 0px rgba(9,26,66,0.2);border:none;border-radius:20px;display:flex;flex-direction: column;justify-content: space-between;padding:0;margin:0", formatter: function(params) { 
    // tip显示的具体内容 let name = name, age = age, sex = sex; return ` <div><em> ${ 
     name}</em> </div> <div><em>${ 
     num}岁</em> </div> <div>性别<em>${ 
     sex}</em></div> `; }, textStyle: { 
    color: "rgba(0,0,0,0.45)", }, }, dataset: { 
    dimensions: ["dept_name", "num", "percentage", "dept"], source: [...barData], // 绑定数据源 }, xAxis: { 
    // x轴 type: "category", axisLine: { 
    lineStyle: { 
    // x轴 线条颜色 color: "#F3F3F3", }, }, axisLabel: { 
    textStyle: { 
    // x轴 lable样式 color: "#3B4042", fontSize: 14, fontWeight: 400, }, rotate: 300, // 旋转角度 interval: 0, // 间隔 }, offset: 5, // 偏移 （标题距离x轴的距离） }, grid:{ 
    y2:100 }, yAxis: { 
    min: 0, // max: 100, minInterval: 1, axisLine: { 
    lineStyle: { 
    color: "#FFF", // y轴颜色 }, }, axisLabel: { 
    textStyle: { 
    color: "#3B4042", // y轴 刻度 }, }, splitLine: { 
    // 辅助线 show: true, lineStyle: { 
    color: "#F3F3F3", width: 1, }, }, }, series: [ { 
    type: "bar", barMaxWidth: 10, // 最大宽度 itemStyle: { 
    normal: { 
    barBorderRadius: [15] }, }, }, ], }; myBarChart.setOption(barOption, true); 

版权声明：

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若内容造成侵权、违法违规、事实不符，请将相关资料发送至xkadmin@xkablog.com进行投诉反馈，一经查实，立即处理！

转载请注明出处，原文链接：https://www.xkablog.com/rfx/10866.html