vue+elementui+echarts饼状图内部显示百分比

 <!--饼状图--><div id="main" style="width: 400px;height: 350px;"></div>

 import echarts from 'echarts'export default {name: '',data () {return {charts: '',opinion:['执行总额','已经执行'],type: 'pie',opinionData:[{value:400, name:'执行总额'},{value:600, name:'已经执行'},],}},methods:{drawPie(id){this.charts = echarts.init(document.getElementById(id))this.charts.setOption({color: ['#A4B6C9', '#4E7095'],/*饼状图的颜色*/tooltip : {trigger: 'item',formatter: "{b}({d}%)",/*饼状图触碰之后显示的注释文字*/},legend: {left: 'center',/*标签文字排成一行*/y: 'bottom',/*在垂直方向上的底部*/data:this.opinion,},series: [{type: 'pie',   //饼状图center: ['50%', '40%'],    //显示位置name:'',type:'pie',radius:['0%','60%'],/*空心圆的占比*/itemStyle: {emphasis: {shadowBlur: 10,shadowOffsetX: 0,shadowColor: 'rgba(0, 0, 0, 0.5)'},normal: {borderWidth: 5,/*隔开的白色边界*/borderColor: '#fff',/*border*/// labelLine :{show:true}},},avoidLabelOverlap: false,label: {normal: {show:true,position:'inner',textStyle: {fontWeight: 200,fontSize: 20   //文字的字体大小},formatter: '{d}%',/*饼状图内显示百分比*/// data:['40%','60%'],},emphasis: {show: false,/*空心文字出现*/}},labelLine: {normal: {show: false}},data:this.opinionData}]})}},//调用mounted(){this.$nextTick(function() {this.drawPie('main')})},}

vue+elementui+echarts饼状图内部显示百分比相关推荐

ECharts饼状图lable显示Value所占百分比
ECharts饼状图lable显示Value所占百分比以及legend显示Value所占百分比简单的实现可以参考: export default {data() {return {}},mounte ...
实现在echart饼状图上显示百分比,数据
最近业务用到了echart,用来展示分析数据挺方便的,这里做一些小笔记. 正文: 要实现在echart饼状图上显示百分比,数据,只需要添加一些属性即可(在series里添加label标签),用法如下: ...
怎么让饼状图里面显示百分比_教你用matplotlib绘制带有负值的饼状图
matplotlib官网示例中给出了很多简单易用的饼图绘制范例,这里先在官网范例的基础上,做一个简单的总结. 利用函数ax1.pie绘制饼状图,传入的参数分别为: sizes 切片大小 explode ...
echarts饼状图中间显示数值加上名字
想实现的效果 <div id="echart" ></div> <script> function setEchartsPie(id, data ...
vue+echarts饼状图中间计算总数
饼状图中间显示总数值,效果图如下: dom结构: <div class="chart1" ref="chart1" style="width: ...
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.创建组件 ...
echarts饼状图的使用
echarts饼状图的使用地址:https://echarts.apache.org/zh/index.html 第一步: 通过 npm 获取 echarts, npm install echart ...
echarts饼状图引导线加圆点
实现echarts饼状图引导线加圆点实现思路: 1.首先我们在series里设置三个饼状图,设置共有的数据来防止页面交互显示错位问题设置minAngle 最小区域扇面角度防止多个数据为0时候引导线会 ...

vue+elementui+echarts饼状图内部显示百分比

vue+elementui+echarts饼状图内部显示百分比相关推荐

最新文章

热门文章