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 `
${name}
${num}岁
性别${sex} `;
},
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);