vue echarts饼状图百分比展示

设置label的formatter。

label: {show: true,formatter: '{b} : {d}%'
},

已封装好，可直接复制使用。

<template><!-- 饼状图 --><div ref="echart" :class="className" :style="{height:height,width:width}" />
</template><script>import * as echarts from 'echarts';export default {props: {className: {type: String,default: 'chart'},width: {type: String,default: '500px'},height: {type: String,default: '300px'},chartData: {type: Array,required: true},},data() {return {chart: null,}},watch: {chartData: {deep: true,handler(val) {this.setOptions(val)}}},mounted() {this.$nextTick(() => {this.initChart()})},beforeDestroy() {if (!this.chart) {return}this.chart.dispose()this.chart = null},methods: {initChart() {this.chart = echarts.init(this.$refs.echart);this.setOptions(this.chartData)},setOptions(data) {this.chart.setOption({tooltip: {trigger: 'item',formatter: '{b} : {d}%'},legend: {orient: 'vertical',left: 'right',top: 'bottom'},series: [{type: 'pie',radius: '50%',data: data,itemStyle: {normal: {label: {show: true,formatter: '{b} : {d}%'},}},emphasis: {itemStyle: {shadowBlur: 10,shadowOffsetX: 0,shadowColor: 'rgba(0, 0, 0, 0.5)'},}}]})}}}
</script>

vue echarts饼状图百分比展示相关推荐

vue+echarts饼状图中间计算总数
饼状图中间显示总数值,效果图如下: dom结构: <div class="chart1" ref="chart1" style="width: ...
饼状图百分比算法--最大余额法
前段时间测试提了一个bug,我打开一开,好家伙!原来是echarts饼状图数据展示百分比有一个与legend百分比的展示不一样.拿起手机一算果然,饼状图加在一起刚好100%,而legend加在一起是9 ...
ECharts饼状图lable显示Value所占百分比
ECharts饼状图lable显示Value所占百分比以及legend显示Value所占百分比简单的实现可以参考: export default {data() {return {}},mounte ...
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饼状图设置label的交互效果，饼状图鼠标浮上图形才显示label和视觉引导线
echarts饼状图默认label和视觉引导线效果: 这个效果没有没有形成与用户的交互,此时添加如下设置: label: {show: false,position: 'outside'},empha ...
vue+elementui+echarts饼状图内部显示百分比
<div id="main" style="width: 400px;height: 350px;"></di ...
echarts 饼状图 label 既在内部显示数值（百分比），又显示外部指示线
需求项目开发中,产品经理绘制的原型图中,需要前端实现一个饼状图,且既在饼图内部中显示百分比,又显示外部指示线及数值,效果如下图所示: 查了下 Echarts 官网文档,需要配置 series ...

vue echarts饼状图百分比展示

vue echarts饼状图百分比展示相关推荐

最新文章

热门文章