echars饼状图的formatter

我们有时候需要在饼状图显示多个数据，但是默认的数据就是那几个如图：

他会显示就是data中的name，和value。

然而echarts是提供了方法，可以自定义显示的格式和数据：

  formatter: function(data) {return (data['name'] + "数量:" + data['value'] + "</br>");}

但是我们需要显示更多的数据，就需要要了解它的数据结构，以及它的data的指向问题

此时可以看到data的包含内容，也可看到data里还有一个data。了解到结构此时做法就简单了

  formatter: function(data) {return (data['name'] + "总量:" + data['value'] + "</br>" + "在用：" + data.data["usable"]);}

data的数据格式为：

data: [{value: 20,name: '1038',usable: 10,}, {value: 0,name: '1037',usable: 10,}, {value: 0,name: '1932',usable: 10,}, {value: 43,name: '1047',usable: 10,}, {value: 33,name: '1042',usable: 10,}, {value: 42,name: '1053',usable: 10,}, {value: 30,name: '1054',usable: 10,}, ],

当然了解到它的数据结构也不用完全这样写可以按照自己比较舒服的方式写，而且此方法是支持html标签的可以更改一些样式

echars饼状图的formatter相关推荐

echars 饼状图做成水球图
安装水球形状依赖 cnpm install --save echarts-liquidfill 将service type 设置成 'liquidFill' series: {type: 'liqui ...
echars水状_Echarts饼状图属性设置
标题 title: { text: '学生生源地来源分布图', subtext: '模拟数据', // x 设置水平安放位置,默认左对齐,可选值:'center' ¦ 'left' ¦ 'right' ...
echars ajax 饼状图,echarts饼状图实现方法
当前位置:我的异常网» Web前端 » echarts饼状图实现方法 echarts饼状图实现方法 www.myexceptions.net 网友分享于:2015-09-27 浏览:0次 echa ...
echart的关系图高亮_echart中饼状图的高亮显示。
1 2 3 4 5 6 7 8 9 10 #main{ 11 width:50vw;height:60vh;margin-left:2vw 12 } 13 14 15 16 17 18 19 20 / ...
mysql 统计做饼状图_PHP+mysql+Highcharts实现饼状统计图
Mysql 首先我们建一张・chart_pie・表作为统计数据. -- edit http://www.lai18.com -- 表的结构 `chart_pie` -- CREATE TABLE IF ...
vue中如何画饼状图
废话不多说,直接上干货. 1.在自己的项目里面安装echarts npm install echarts --s 2.在template中为echarts准备一个容器dom <template& ...
SpringBoot+AntV实现一次前后端交互渲染多个饼状图
场景效果 SpringBoot+AntV实现饼状图中的花瓣图: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/92810169 ...
AntV中的饼状图中的花瓣图旁边的文字显示label怎样修改
场景官方花瓣图实例: http://antv.alipay.com/zh-cn/g2/3.x/demo/pie/pie-platelets.html 官方示例效果: 需要修改成的效果需要将图形旁边 ...
SpringBoot+MyBatisPlus+Echarts实现查询并显示平均时长占比饼状图
场景数据库中每个数据都有开始时间以及结束时间两个字段. 需要根据创建时间筛选出当天的四种类型的数据的平均执行时间. SpringBoot+Echarts实现请求后台数据显示饼状图: https:// ...

echars饼状图的formatter

echars饼状图的formatter相关推荐

最新文章

热门文章