ECharts饼状图legend显示Value所占百分比

这样写好像麻烦了，此贴记录下当时自己的想法吧，简单的实现可以参考：

饼图legend显示百分比

此项目基于Vue

最近写项目碰到一个需求，需要在legend区域显示Value值所占比例，如下图所示。

在查询官方文档的时候，虽然提供了格式化图例文本的回调函数：

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

但是此函数只能对name进行格式化，无法取到value的值，所以我们可以在option外定义一个data，然后赋值给series.data，下面看代码

export var data = [{ value: 335, name: '直接访问' },{ value: 310, name: '邮件营销' }
]
//异步调用接口获取数据后，调用此方法重新为data幅值，由于对js进行了封装，外界无法直接幅值（相当于Setter方法）
export function handleArray(arr) {data = arr
}
//求data中value的总和
function arrCount(arr) {let count = 0arr.forEach(item => {count = count + item.value})return count
}
export default {tooltip: {trigger: 'item',formatter: '{b}: {c} ({d}%)'},legend: {itemGap: 8,icon: 'circle',bottom: '2%',textStyle: {color: '#fff'},//格式化图例文本formatter(name) {const count = arrCount(data)//找到data中name和文本name值相同的对象const val = data.filter(item => {return item.name === name})return name + '  ' + ((val[0].value / count).toFixed(4)) * 100 + '%'}},//设置饼状图的颜色color: ['#e61145', '#36dcb3', 'yellow', 'blue', 'indigo', 'purple'],series: [{type: 'pie',radius: ['50%', '65%'],avoidLabelOverlap: false,label: {show: false,position: 'center'},labelLine: {show: false},data: data}]
}

以上就实现了百分比的展示，接下来是在Vue中使用

在Vue中导入js文件

import * as pieChart from './chart/pieChart'

初始化图像：

    initPieChart() {//pieChart定义在data中（lineChart: null）this.pieChart = this.$echarts.init(document.getElementById('pie-chart'))this.pieChart.setOption(pieChart.default)const _this = thiswindow.addEventListener('resize', function() {_this.pieChart.resize()})}

模拟发送请求，动态更新data区数据：

  updateData() {const testData = [{ value: 3335, name: 't1' },{ value: 3310, name: 't2' },{ value: 2334, name: 't3' },{ value: 1335, name: 't4' },{ value: 15438, name: 't5' }]pieChart.handleArray(testData)pieChart.default.series[0].data = pieChart.datathis.pieChart.setOption(pieChart.default)}

到此就结束了~~

ECharts饼状图legend显示Value所占百分比相关推荐

ECharts饼状图lable显示Value所占百分比
ECharts饼状图lable显示Value所占百分比以及legend显示Value所占百分比简单的实现可以参考: export default {data() {return {}},mounte ...
vue+elementui+echarts饼状图内部显示百分比
<div id="main" style="width: 400px;height: 350px;"></di ...
echarts饼状图中间显示数值加上名字
想实现的效果 <div id="echart" ></div> <script> function setEchartsPie(id, data ...
echarts饼状图设置label的交互效果，饼状图鼠标浮上图形才显示label和视觉引导线
echarts饼状图默认label和视觉引导线效果: 这个效果没有没有形成与用户的交互,此时添加如下设置: label: {show: false,position: 'outside'},empha ...
Angular2组件与Echarts饼状图交互之饼图制作
一.前言 1.基于ng4项目 2.组件包括:根组件app和饼状图组件echart 二.饼状图开发过程 1.添加插件 echart cnpm install echarts --save 2.创建组件 ...
vue+echarts饼状图中间计算总数
饼状图中间显示总数值,效果图如下: dom结构: <div class="chart1" ref="chart1" style="width: ...
echarts饼状图的使用
echarts饼状图的使用地址:https://echarts.apache.org/zh/index.html 第一步: 通过 npm 获取 echarts, npm install echart ...
去掉Echarts饼状图的引导线
<!DOCTYPE html> <html><head><meta charset="utf-8"><title>五分钟 ...
echars ajax 饼状图,echarts饼状图实现方法
当前位置:我的异常网» Web前端 » echarts饼状图实现方法 echarts饼状图实现方法 www.myexceptions.net 网友分享于:2015-09-27 浏览:0次 echa ...
echarts饼状图引导线加圆点
实现echarts饼状图引导线加圆点实现思路: 1.首先我们在series里设置三个饼状图,设置共有的数据来防止页面交互显示错位问题设置minAngle 最小区域扇面角度防止多个数据为0时候引导线会 ...

ECharts饼状图legend显示Value所占百分比

ECharts饼状图legend显示Value所占百分比

饼图legend显示百分比

此项目基于Vue

以上就实现了百分比的展示，接下来是在Vue中使用

到此就结束了~~

ECharts饼状图legend显示Value所占百分比相关推荐

最新文章

热门文章