echart饼状图上显示百分比

效果如下：

echart 3.0写法：

option = {//提示框组件,鼠标移动上去显示的提示内容tooltip: {trigger: 'item',formatter: "{a} <br/>{b}: {c} ({d}%)"//模板变量有 {a}、{b}、{c}、{d}，分别表示系列名，数据名，数据值，百分比。},//图例legend: {//图例垂直排列orient: 'vertical',x: 'left',//data中的名字要与series-data中的列名对应，方可点击操控data:['直接访问','邮件营销','联盟广告','视频广告','搜索引擎']},series: [{name:'访问来源',type:'pie',//饼状图// radius: ['50%', '70%'],avoidLabelOverlap: false,//标签label: {normal: {show: true,position: 'inside',formatter: '{d}%',//模板变量有 {a}、{b}、{c}、{d}，分别表示系列名，数据名，数据值，百分比。{d}数据会根据value值计算百分比textStyle : {                   align : 'center',baseline : 'middle',fontFamily : '微软雅黑',fontSize : 15,fontWeight : 'bolder'}},},data:[{value:335, name:'直接访问'},{value:310, name:'邮件营销'},{value:234, name:'联盟广告'},{value:135, name:'视频广告'},{value:1548, name:'搜索引擎'}]}]
};

echart 2.0写法：

    //其余部分相同，label部分有所区别,在2.0中label是itemStyle的一项属性series: [{name:'访问来源',type:'pie', //饼状图 // radius: ['50%', '70%'],avoidLabelOverlap: false, //标签itemStyle : {normal : {label:{show : true,position : 'inner',formatter: '{d}%',distance : 0.7 //这项是标识距离中心点的距离textStyle : {                   align : 'center',baseline : 'middle',fontFamily : '微软雅黑',fontSize : 15,fontWeight : 'bolder'}},labelLine:{show : false}}},data:[{value:335, name:'直接访问'},{value:310, name:'邮件营销'},{value:234, name:'联盟广告'},{value:135, name:'视频广告'},{value:1548, name:'搜索引擎'}]}]

因为没有仔细看版本，纠结了好半天写法，果然学前端最重要的就是：认真看文档，认真看文档，认真看文档！重要的事情说三遍！！！

另外推荐2个官网网站，可以实施编辑echart，非常方便：
这是echart3.0：
http://www.echartsjs.com/gallery/editor.html?c=pie-doughnut，
这是echart2.0:
http://echarts.baidu.com/echarts2/doc/example.html

echart饼状图上显示百分比相关推荐

实现在echart饼状图上显示百分比,数据
最近业务用到了echart,用来展示分析数据挺方便的,这里做一些小笔记. 正文: 要实现在echart饼状图上显示百分比,数据,只需要添加一些属性即可(在series里添加label标签),用法如下: ...
vue+elementui+echarts饼状图内部显示百分比
<div id="main" style="width: 400px;height: 350px;"></di ...
怎么让饼状图里面显示百分比_教你用matplotlib绘制带有负值的饼状图
matplotlib官网示例中给出了很多简单易用的饼图绘制范例,这里先在官网范例的基础上,做一个简单的总结. 利用函数ax1.pie绘制饼状图,传入的参数分别为: sizes 切片大小 explode ...
ECharts饼状图lable显示Value所占百分比
ECharts饼状图lable显示Value所占百分比以及legend显示Value所占百分比简单的实现可以参考: export default {data() {return {}},mounte ...
echart饼状图、柱状图上显示百分比、数据值
柱状图: echart 3.0写法: series:[{label: {normal: {show: true,position: 'inside',formatter: '{c},({d}%)'// ...
JFreeChart框架中生成饼状图上怎样显示数据 [问题点数：40分，结帖人GreenLawn]
我用JFreeChart框架生成饼状图,但想把数据信息在饼图上显示,是在饼图内部(即圆内)显示!怎样实现啊?? 去掉lable pieplot.setLabelGenerator(null); 去掉线 ...
echart饼状图没有数据的时候显示暂无数据_Python数据结构可视化 day 5
Python 数据结构可视化 (Day5) 01年度工作总结有时候画布太大,影响到图表的展示,这个时候输入: "init_opts=opts.InitOpts(width='',heigh ...
g2plot饼状图label显示不全
new Pie(el.value, {appendPadding: 10,data,width:600,height:400,angleField: "value",colorFi ...
jquery 的柱状图，饼状图如何显示
function FormBarChart() { $('#chartBar').html(''); var data = $('#tableCourse').datagrid('getD ...
echarts饼状图中间显示数值加上名字
想实现的效果 <div id="echart" ></div> <script> function setEchartsPie(id, data ...

echart饼状图上显示百分比

echart 3.0写法：

echart 2.0写法：

echart饼状图上显示百分比相关推荐

最新文章

热门文章