echarts 饼图效果，显示其对应数值及百分比

需求：echarts 饼图效果，显示其对应数值及百分比

代码

<Chart1 :ecStyle="ecStyle" :ecOption="optionRight2"/><script>import Chart1 from "@/components/Chart";data(){return(){optionRight2:{//表头菜单显示//legend: {//left:'10%',//top:'5%',//bottom:'3%',//textStyle: {//color: '#fff'//}//},tooltip: {trigger: 'item'},series: [{name: '数量',type: 'pie',radius: ['35%', '60%'],//center: ['50%', '58%'], 图表定位avoidLabelOverlap: false,  //设置为true时，当数值为0时不重叠itemStyle: {borderRadius: 10,borderColor: '#07076a',borderWidth: 1},labelLine: {show: true,},data: [{ value: 57, name: '商户',itemStyle:{color:'#fc8452'}},{ value: 117, name: '自由职业',itemStyle:{color:'#3ba272'}},{ value: 369, name: '大学生',itemStyle:{color:'#73c0de'}},{ value: 448, name: '农民工',itemStyle:{color:'#ee6666'}},{ value: 28, name: '医生',itemStyle:{color:'#fac858'}},{ value: 135, name: '工程师',itemStyle:{color:'#91cc75'}},{ value: 335, name: '其它',itemStyle:{color:'#5470c6'}},],label:{formatter:function(data){return `${data.name} ${data.value} (${data.percent.toFixed(1)}%)`}}}]}}}
}</script>

chart1组件

//chart1组件<template><div :style="ecStyle" ref="chartRef"></div>
</template><script>
export default {name: 'Chart',props: {ecStyle: {type: Object,default: function () {return {width: '100%',height: '100%'}}},ecOption: {type: Object,default: function () {return {}}}},data() {return {chart: ''}},mounted() {this.setDrawChart()},methods: {setDrawChart() {this.chart = this.$echarts.init(this.$refs.chartRef)this.chart.clear()this.chart.setOption(this.ecOption)window.addEventListener('resize', this.chart.resize)//饼图点击的方法this.chart.on('click',function(param){//当前 name 代表饼图所定义的 nameif(param.name == ''){}  })}},watch: {/*** 观察图表变化* @date 2020/8/26 13:54* @returns {Object}**/ecOption: {handler(newVal, oldVal) {if (this.chart) {if (newVal) {this.chart.setOption(newVal, true)} else {this.chart.setOption(oldVal)}} else {this.init()}},// 对象内部属性的监听deep: true}},destroyed() {/*** 销毁监听事件* @date 2020/8/26 13:55**/window.removeEventListener('resize', this.chart.resize)}
}
</script>

效果

echarts 饼图效果，显示其对应数值及百分比相关推荐

echarts饼图直观显示数值最实用的方式
默认:echarts饼图直接显示数值(如图无需光标悬空触发) var optionOne = { title : { text ...
echarts饼图自动显示数据
在做echarts饼图的时候,默认是不显示数据,现在要直接把数据显示在上面,代码如下: series: [{name: '处理状态',type: 'pie',radius: ['50%', '70%' ...
echarts 饼图内部显示百分比，外部显示文字说明
为了实现产品的要求,饼图中既显示百分比又显示文字的说明(如下图) 查了echarts 文档,并不能通过简单的配置来实现,原因如下:在单个serie的label中,只能设置一个label,位置可以选择在 ...
解决echarts饼图label显示不全的问题
今天画饼图的时候,发现某些数据的标签自动隐藏了,怎么调整都不能完全显示,如图: 解决办法添加如下配置: labelLayout: {hideOverlap: false}, 最终效果
Echarts饼图,以及显示百分比的文字
这样就可以实现饼图点击某一部分,监听点击事件: 试了其他博友的方式都没用,这个是最简单的方式了. // 处理点击事件并且跳转到相应的百度搜索页面 eCharts.on('click', functio ...
echarts饼图文字显示在引线之上
用echarts做饼图,文字默认显示在引线的尾部,如果想让文字显示在引线的上边,加上这几个属性就可以了,引线的长度和文字的内边距根据实际需要调整即可:
echarts饼图, 中间显示总数
echarts属性真的太太多了需求也是五花八门的先记下来使用graphic属性 const datas = [{ value: 1048, name: 'Search Engine' },{ v ...
echarts适用饼图直观显示数值方式
需求:echarts饼图直接显示数值(如图无需光标悬空触发) 代码: option = {title : {/* text: '某站点用户访问来源',subtext: '纯属虚构',x:'cente ...
ECharts 饼图切换数据源bug 开始没数据显示切换或刷新后显示
1.出现问题原因一个饼图,右上方两个按钮分别为今天和本月,分别调用不同接口控制,点击则调用不同接口同时饼图绑定数据源刷新:出现此问题原因点击今日按钮有一个饼图区域形没有数据不显示,对应数据值比例都没 ...

echarts 饼图效果，显示其对应数值及百分比

代码

效果

echarts 饼图效果，显示其对应数值及百分比相关推荐

最新文章

热门文章