Echarts环形图--自定义图例文本和中心文字

一、设置环形图中心文字

可用 titel.text 和 title.subtext 来定义中心处的文本

title:{text:subtext:
}

用 graphic 原生图形元素组件

每个图形元素本身有自己的图形基本的位置和尺寸设置

{type: 'rect',shape: {x: 10,y: 10,width: 100,height: 200}
},
{type: 'circle',shape: {cx: 20,cy: 30,r: 100}
},
{type: 'image',style: {image: 'http://xxx.xxx.xxx/a.png',x: 100,y: 200,width: 230,height: 400}
},
{type: 'text',style: {text: 'This text',x: 100,y: 200}}

以上 x.y 为绝对定位，可用 left.top 等实现相对定位

二、设置图例文本

legend.formatter 用来格式化图例文本，支持字符串模板和回调函数两种形式。

// 使用字符串模板，模板变量为图例名称 {name}
formatter: 'Legend {name}'
// 使用回调函数
formatter: function (name) {return 'Legend ' + name;
}

三、项目代码

legend: {orient: 'vertical',icon: "circle",top: `${this.top}`,right: '5%',data: ["正常","异常","故障","一键报警","离线"],formatter: function(name){let target;for(let i=0;i<list.length;i++){if(list[i].deviceStatus==name){target = list[i].proportion+'% ('+ list[i].count + ')'}}let arr = [name+"："+target]return arr}},graphic: [{　　　　　　　　　　　　　　　　//环形图中间添加文字type: 'text',　　　　　　　　　　　　//通过不同top值可以设置上下显示left: '14%',　　　　　　　　　　top: '28%',style: {　　　　　　　　　　　　　　　　text: "接入数",textAlign: 'center',fill: '#AEAEB7',　　　　　　　　//文字的颜色width: 30,height: 30,fontSize: 13,color: "#AEAEB7",fontFamily: "Microsoft YaHei"}}, {type: 'text',left: '14%',top: '37%',style: {text: `${this.total}`,textAlign: 'center',fill: '#000',width: 30,height: 30,fontSize: 15,fontWeight: 'bold'}}],

官网地址：图例组件：https://echarts.apache.org/zh/option.html#legend
图形元素组件：https://echarts.apache.org/zh/option.html#graphic

Echarts环形图--自定义图例文本和中心文字相关推荐

Echarts环形图自定义图例
项目场景: 在展示图表的时候有的时候需要图例也展示出一些内容来,例如这样子: 描述普通的图例一般只是这样但我们希望展示更多的信息,于是需要使用一个东西:字符串模板:formatter 解决方案: ...
echarts环形图的图例引导线水平加圆点
什么是引导线? 引导线就是label(文本标签)链接的线引导线分两段从拐弯的地方开始分,接近圆的是length(引导线1),接近label的是length2(引导线2) 需求一:要求水平引导线让 ...
Echarts环形图使用和设置（内外大小、颜色、指示线、圆圈中心字展示）
Echarts环形图使用 1.官网找图 Echarts官网链接 2.使用首先要进行下载,打开cmd,输入 npm install echarts --save 如果显示报错,那么使用管理员身份运行c ...
echarts环形图内部圆，外部圆形以及阴影设置
环形图修改图例自定义icon 完整代码图 Chart1() { // 折算价值户新增构成let chartDom = document.getElementById('main');let myCh ...
修改echarts环形图的牵引线及文字位置
修改echarts环形图的牵引线及文字位置,下面代码及效果不仅如此,也包含了其它的效果哦.有问题可以留言. 根据echarts官方示例修改效果: 官方示例图: 修改效果图: 直接上代码:其它不多说. ...
echarts 环形图占比_环形图_仪表盘
Echarts 常用各类图表模板配置注意: 这里主要就是基于各类图表,更多的使用 Echarts 的各类配置项: 以下代码都可以复制到 Echarts 官网,直接预览: 图标模板目录 Echarts ...
R语言ggplot2可视化为复杂图自定义图例、手动构造图例（legend）实战
R语言ggplot2可视化为复杂图自定义图例.手动构造图例(legend)实战目录 R语言ggplot2可视化为复杂图自定义.手动构造图例(legend)实战
echarts环形图内实现自定义添加文字数字和缩放自适应
文章目录需求场景实现思路全部代码示例需求场景在echarts的环形图里加上文字和数字并自适应.如下图: 实现思路在series加上一层,只放文字和数字. 重点代码如下: // 就是这里! ...
echarts 环形图不同区域背景色自定义
app.title = '环形图'; option = { tooltip: { trigger: 'item', formatter: "{a} & ...

Echarts环形图--自定义图例文本和中心文字

一、设置环形图中心文字

二、设置图例文本

三、项目代码

Echarts环形图--自定义图例文本和中心文字相关推荐

最新文章

热门文章