vue使用echarts饼图,echarts饼图显示数值

　　摘要：本文主要介绍了用vue显示echart饼图图例百分比的方法，并通过实例代码进行了详细介绍，具有一定的参考价值。感兴趣的朋友可以参考一下。

　　本文主要介绍vue使用e chart显示饼状图数据的百分比，分享给大家，具体如下：

　　翻译

　　实现源代码

　　选项={

　　标题：{

　　文本：“用户在网站上访问的源”，

　　潜台词：“纯属虚构”，

　　x:“中心”

　　},

　　工具提示：{

　　触发器：“项目”，

　　格式化程序：“{a} br/{b} : {c} ({d}%)”

　　},

　　图例：{

　　Orient: vertical ，//布局方法，默认为水平布局，可选： horizontal vertical

　　//水平放置位置，默认为左侧，可选：中心 左侧 右侧 {数字} (x坐标，单位px)

　　x:左，

　　//垂直放置位置，默认为整张图片的顶部，可选：顶部 底部 中心 {数字} (Y坐标，单位px)

　　y:底部，

　　//覆盖图例显示样式

　　格式化程序：函数(名称){

　　//获取图例显示内容

　　let data=option.series[0]。数据；

　　设total=0；

　　设tar value=0；

　　for(设i=0，l=data.lengthI l；i ) {

　　总计=数据[i]。价值；

　　if (data[i].name==name) {

　　tarValue=data[i]。价值；

　　}

　　}

　　设p=(tarValue/total * 100)。toFixed(2)；

　　返回名称 p %

　　},

　　数据：[直接访问，邮件营销，附属广告，视频广告，搜索引擎]

　　},

　　系列：[

　　{

　　名称：“访问源”，

　　类型：“饼图”，

　　半径：“55%”，

　　中心：[50% ， 60%]，

　　数据：[

　　{value:335，name:直接访问 }，

　　{value:310，name:邮件营销 }，

　　{value:234，name:联盟广告 }，

　　{value:135，name:视频广告 }，

　　{value:1548，name:“搜索引擎”}

　　],

　　项目样式：{

　　重点：{

　　暗影模糊：10，

　　shadowOffsetX: 0，

　　阴影颜色： rgba(0，0，0，0.5)

　　}

　　}

　　}

　　]

　　};

　　关于vue如何实现echart饼状图图例百分比显示的这篇文章到此为止。有关vue饼图百分比显示的更多信息，请搜索我们以前的文章或继续浏览下面的相关文章。希望大家以后能多多支持我们！

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。