项目场景：

在展示图表的时候有的时候需要图例也展示出一些内容来，例如这样子：

描述

普通的图例一般只是这样

但我们希望展示更多的信息，于是需要使用一个东西：字符串模板：formatter

解决方案：

直接上代码

在 data() 中定义一个对象，可以设置图例的一些样式和位置

 data() {return {legendData: {orient: 'vertical',left: '40%',top: 'center',icon: 'circle', // 图例色块是方还是圆itemGap: 20,itemWidth: 8,padding: 0,selectedMode: false,triggerEvent: true,textStyle: { // 字符串模板rich: {a: {align: 'left',color: '#19273B',width: 130,padding: [0, 8, 0, 0]},b: {align: 'left',color: '#8D97A4',width: 55,padding: [0, 8, 0, 0]},c: {align: 'left',color: '#19273B'}}}}}}

具体图的代码

    //环形图initCircularChart() {var echarts = require('echarts')  // 初始化var circularChart = document.getElementById('circularChart') // 对应地使用ByClassName// 处理图例中的数据const _that = this_that.legendData.formatter = function(name) {// _that.reasonInfoList 环形图的数据let str = ''let ratelet valuefor (let i = 0; i < _that.reasonInfoList.length; i++) {if (_that.reasonInfoList[i].name === name) {rate = toThousandFilter(_that.reasonInfoList[i].rate * 100) // 这里我处理了一下百分数value = _that.reasonInfoList[i].valuestr = `{a|${name}} {b|${rate}%} {c|${value}}`return str // 因为只能返回一个值 所以将一行数据拼成一个字符串}}}var myChart = echarts.init(circularCharts, walden)// walden: 主题myChart.setOption({title: {text: '失败原因', // 图的名字left: 'left',triggerEvent: true},legend: this.legendData, // 图例直接引用series: [{type: 'pie',radius: [45, 65],center: ['20%', '50%'],hoverAnimation: false, // true 鼠标移入会放大label: { // 环形图中间部分显示所有的总数show: true,position: 'center',fontSize: '12',formatter: `{a|${failedOrderNum}}` + '\n' + `{b|${'订单总数'}}`,rich: {a: {color: '#19273B'},b: {color: '#8D97A4'}}},data: this.reasonInfoList, // 所有数据的数组stillShowZeroSum: true // 是否在数据和为0（一般情况下所有数据为0) 的时候仍显示扇区}]})}

上效果图

Echarts环形图自定义图例相关推荐

Echarts环形图--自定义图例文本和中心文字
一.设置环形图中心文字可用 titel.text 和 title.subtext 来定义中心处的文本 title:{text:subtext: } 用 graphic 原生图形元素组件每个图形元素 ...
echarts环形图的图例引导线水平加圆点
什么是引导线? 引导线就是label(文本标签)链接的线引导线分两段从拐弯的地方开始分,接近圆的是length(引导线1),接近label的是length2(引导线2) 需求一:要求水平引导线让 ...
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环形图使用 1.官网找图 Echarts官网链接 2.使用首先要进行下载,打开cmd,输入 npm install echarts --save 如果显示报错,那么使用管理员身份运行c ...
echarts环形图内实现自定义添加文字数字和缩放自适应
文章目录需求场景实现思路全部代码示例需求场景在echarts的环形图里加上文字和数字并自适应.如下图: 实现思路在series加上一层,只放文字和数字. 重点代码如下: // 就是这里! ...
echarts 环形图不同区域背景色自定义
app.title = '环形图'; option = { tooltip: { trigger: 'item', formatter: "{a} & ...

Echarts环形图自定义图例

项目场景：

描述

解决方案：

上效果图

Echarts环形图自定义图例相关推荐

最新文章

热门文章