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");
});
}

 

echarts中关于自定义legend图例文字的更多相关文章

  1. echarts legend 图例文字闪烁显示

    最近同事小夏遇到一个需求:客户要求echarts图表上指定的图例文字闪烁显示. 先放一张图: 客户要求:待处理字样要闪动显示. 小夏一番百度之后,求助于我:快来看看,怎么有客户提这种百度都百度不到答案 ...

  2. echarts中的option.legend.data has not been defined.

    1.错误描述 2.错误原因 var map = function(mapData){ require( [ 'echarts', 'echarts/chart/map' ], function (ec ...

  3. vue 使用Echarts 环形图 自定义legend formatter 富文本标签

    main.js 引入echarts // 引入echarts import Echarts from 'echarts' Vue.prototype.$echarts = Echarts   < ...

  4. echarts 中 symbol 自定义图片

    首先我使用的技术框架的VUE,当然该方法在其他框架也是适用的,这点大家注意一下~ 在官方文档里面,修改标记的图形(symbol)的方法有三种: 一:ECharts 提供的标记类型有 'circle', ...

  5. Echarts数据可视化legend图例,开发全解+完美注释

    全栈工程师开发手册 (作者:栾鹏) Echarts数据可视化开发代码注释全解 Echarts数据可视化开发参数配置全解 6大公共组件详解(点击进入): title详解. tooltip详解.toolb ...

  6. Echarts自定义折线图例,增加选中功能

    用Echarts图表开发,原本的Echarts图例不一定能满足我们的视觉要求. 下面是Echarts 折线图自定义图例,图例checked选中,相应的折线线条会随之checked,其余未选中的图例对应 ...

  7. Echarts 自定义legend图片,修改点击之后的颜色图解

    第一个问题:echarts 可以自定义图例的图标,百度上很多回答都是引用的相对路径,但是不知道为啥,我的vue项目就是引用不显示,在network里面找不到相应图片 后来我想了个法子,就是先获取到这个 ...

  8. echarts 中 柱图 、折线图、柱图层叠

    app.title = '折柱混合'; option = { tooltip: { trigger: 'axis', axisPointer: { type: 'cross', crossStyle: ...

  9. 修改echarts环形图的牵引线及文字位置

    修改echarts环形图的牵引线及文字位置,下面代码及效果不仅如此,也包含了其它的效果哦.有问题可以留言. 根据echarts官方示例修改效果: 官方示例图: 修改效果图: 直接上代码:其它不多说. ...

随机推荐

  1. 安装windows git客户端

    从git官网下载安装包,双击安装,一路默认配置,直到完成 打开git bash,运行 ssh-keygen -t rsa -C "573215750@qq.com" 回车,输入“y ...

  2. go语言示例-Timer计时器的用法

    计时器用来定时执行任务,分享一段代码: package main import "time" import "fmt" func main() { //新建计时 ...

  3. Oracle中NVARCHAR2字符集不匹配问题

    Oracle中在做字符匹配时 遇到 NVARCHAR2 类型时报错,提示 字符集不匹配. 对使用 NVARCHAR2 的地方,需要对字段进行字符转换,加上 to_char(nvarchar2 字段) ...

  4. 关于xcode6打包以及上线前企业部署测试的说明 --转自张诚教授微博

    xcode6如何打包 首先clean然后点击归档 点击打包之后保存 点选第一个以后检查相关证书签名 那么我们开发完以后,在上线前如何给别人测试 有2种方法 1.使用299美金的企业开发者账号搭建企业部 ...

  5. microsoft NLayerApp项目中的层次结构图

    microsoft NLayerApp项目中的层次结构图 回到目录 如果你想学好一样东西,一定要看高手是如何做的 如果你想学好.net,一定要看.net framworks源代码 如果你想学好分层结构 ...

  6. 2013集训.DAY1.A

    发现自己漏整理了一套,现在附上T1:primenumT2:sendroseT4:warfare除了第一题以外,其余的两题由于当时太弱什么都不会,所以用来学习....T2 SPFA T4 最大生成树

  7. 《.NET 设计规范》第 9 章:常用的设计模式

    第 9 章:常用的设计模式 9.1 聚合组件 考虑为常用的特性域提供聚合组件. 要用聚合组件来对高层的概念(物理对象)进行建模,而不是对系统级的任务进行建模. 要让聚合组件的名字与众所周知的系统实体相 ...

  8. CodeForce 517 Div 2. B Curiosity Has No Limits

    http://codeforces.com/contest/1072/problem/B B. Curiosity Has No Limits time limit per test 1 second ...

  9. sqlserver 书查询 之二

    WITH treeAS(SELECT ParentId, Organization_ID,1 AS x2level,Organization_Name,CAST(Organization_Name A ...

  10. Flask框架从入门到实战

    Flask简介: Flask是一个使用 Python 编写的轻量级 Web 应用框架,基于 WerkzeugWSGI工具箱和 Jinja2模板引擎.使用 BSD 授权. Flask也被称为 " ...