echarts中关于自定义legend图例文字
echarts 关于 自定义 文字 图例
2023-09-14 08:58:48 时间
formatter有两种形式：
- 模板
- 回调函数
模板
使用字符串模板，模板变量为图例名称 {name}
formatter: 'Legend {name}'
回调函数
formatter: function (name) {
return 'Legend ' + name;
}
我们在返回时可以对name进行修改，从而返回我们需要的值，初步改动是这样：
var data = [
{value:40, name:'货币'},
{value:20, name:'股票'},
{value:40, name:'债券'}
]
formatter: function(name){
var total = 0;
var target;
for (var i = 0, l = data.length; i < l; i++) {
total += data[i].value;
if (data[i].name == name) {
target = data[i].value;
}
}
return name + ' ' + ((target/total)*100).toFixed(2) + '%';
}
想自定义图例文字样式，就要用到富文本：rich，但是在官方文档中看到的只有模板形式的富文本样式配置，由1知用模板很难实现自定义name，所以只能用回调函数形式，采用富文本的形式对name进行改造：
formatter: function(name){
var total = 0;
var target;
for (var i = 0, l = data.length; i < l; i++) {
total += data[i].value;
if (data[i].name == name) {
target = data[i].value;
}
}
var arr = [
'{a|'+((target/total)*100).toFixed(2)+'%}',
'{b|'+name+'}',
]
return arr.join('\n')
},
textStyle:{
rich:{
a:{
fontSize:20,
verticalAlign:'top',
align:'center',
padding:[0,0,28,0]
},
b:{
fontSize:14,
align:'center',
padding:[0,10,0,0],
lineHeight:25
}
}
}
工作中的案例
实例自定义图例文字样式
function getCoinList() {
var param = { coinName: "" };
$.ajaxSendData(param, "/api/user/coin/list", function(resData){
// resData.data.list = []
// resData.data.sum = 0;
// console.log(resData)
var showLength = resData.data.num; // 可显示几条
var lens = resData.data.list.length; // 所有列表
$("#cny_total").html((resData.data.sum)); // 资产
if (lens > 0) {
$(".fin_total_assets").show();
if(parseFloat(resData.data.sum) == 0){
$("#dataList").html("<div class='nodata'>您没有任何资产</div>");
$(".finance_page_coin").addClass("notContent");
$("#fin_total_graph").addClass("notImg");
$(".notcanvas").css("display", "block");
$(".fin_total_assets").hide();
}
var da = { "list": resData.data.list };
var _html = template('CoinFinanceDtoList', da);
var _html2 = template('CoinFinancepercent', da);
$("#dataList").html(_html);
$(".assets_coin").html(_html2);
// ECharts , http://echarts.baidu.com/option.html#legend.itemGap
var dom = document.getElementById("fin_total_graph");
dom.style.display = "block";
var myChart = echarts.init(dom);
var app = {};
var option = null;
var data = genData(lens);
option = {
tooltip : {
trigger: 'item',
triggerOn: "click", // 点击才显示
formatter: function(obj){
// console.log("调用" + obj.name + "币种的事件")
// hideSomethigCoin(obj.name);
for(var i = 0; i < lens; i++){
if(obj.name == data.beforeData[i].name){
return obj.name + ": " + data.beforeData[i].currentPrice + " CNY";
}
}
}
},
legend: {
type: 'plain', // 普通图例
orient: 'horizontal', // 水平
left:450, // 左距离
top: 60, // 上距离
bottom: 20, // 下距离
width:300, // 宽度
itemGap: 20, // 间隔
itemWidth: 24, // 图形宽度。
itemHeight: 24, // 图形高度。
data: data.legendData, // 数据
selected: data.selected,// true为可选
formatter: function (name) {
var target;
for(var i = 0; i < lens; i++){
if(i == showLength && parseFloat(data.seriesData[i].value * 100).toFixed(2) < parseFloat(0.01)){
target = " (<0.01"
break;
}
if(name == data.seriesData[i].name){
target = " (" + (data.seriesData[i].value * 100).toFixed(2) + ""
break;
}
}
var arr = [
'{a|' + name + target + '%)}',
]
return arr.join('\n');
},
textStyle:{
rich:{
a:{
width:90
}
}
}
},
emphasis : {
label :{
}
},
series : [
{
left:"left",
type: 'pie',
radius: ['30%', '70%'], // 中间白色圆周面积
center: ['18%', '50%'], // 左右距离
hoverAnimation:false, // 是否开启 hover 在扇区上的放大动画效果。
data: data.seriesData, // 数据
minAngle : 3, // 防止某个值过小导致扇区太小影响交互。
itemStyle: {
emphasis: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
},
color:["#4A90E2", "#2DCCA9", "#9013FE", "#FF5D5D", "#FFBE53", "#3E3F58", "#4f0202", "#ff7200"] // 数组颜色
}
],
};
function genData(count) {
var nameList = da;
var legendData = [];
var seriesData = [];
var selected = {};
var beforeData = []; //分割前的数组
var afterData = []; //分割后的数组
var otherPercent = 0; // 显示其他的总项
var otherCurrentPrice = 0; // 显示其他的总项
//循环需要处理的数组
for(var i = 0; i < showLength; i++) {
//将nameList[i]添加到子数组
beforeData.push(nameList.list[i]);
};
for(var j = lens-1; showLength <= j; j--){
afterData.unshift(nameList.list[j])
otherPercent += parseFloat(nameList.list[j].percent);
otherCurrentPrice += parseFloat(nameList.list[j].currentPrice);
}
if(otherCurrentPrice != 0){
beforeData.push({
name: "其他",
percent: otherPercent,
currentPrice: otherCurrentPrice
})
}
for (var i = 0; i < beforeData.length; i++) {
name = beforeData[i].name;
// name = beforeData[i].name + " (" + (beforeData[i].percent * 100).toFixed(5) + "%)";
value = beforeData[i].percent;
legendData.push(name);
seriesData.push({
name: name,
value: value
});
selected[name] = i < lens;
}
return {
legendData: legendData,
seriesData: seriesData,
selected: selected,
beforeData: beforeData
};
};
if (option && typeof option === "object") {
myChart.setOption(option, true);
}
}
langPkg.loadLanguage("zhuanru");
langPkg.loadLanguage("zhuanchu");
});
}
