echarts使用（二）项目中饼图的使用

来源：互联网发布：amf数据分析器编辑：程序博客网时间：2024/05/18 03:32

项目中使用到到的一些饼图。

感觉echart的使用还是挺简单的，UI给设计好色彩搭配以后我们直接使用。实际在使用中都是ajax后台发送请求，返回一个json串，然后对数据进行动态填充。

表中的Json数据：

{    "state": 1,     "list": [        {            "COUNT": 14,             "AGE": "10-19岁："        },         {            "COUNT": 16211,             "AGE": "20-29岁："        },         {            "COUNT": 37304,             "AGE": "30-39岁："        },         {            "COUNT": 46692,             "AGE": "40-49岁："        },         {            "COUNT": 20057,             "AGE": "50-59岁："        },         {            "COUNT": 5044,             "AGE": "60岁及以上："        }    ]}

js代码：这个地方一开始我是动态绑定的legend，也就是根据年龄段个数动态填充，但是小组长然去掉了就没有加。

function initCarDetail(){var option = {    tooltip: {        trigger: 'item',        formatter: "{a} <br/>{b}: {c} ({d}%)"    },    //根据data的内容依次选择color: ['#0fd085','#75c616','#ebf90f','#fcd419','#e8990f','#ee8232'],    series: [        {            type:'pie',            roseType:'radius',             radius: ['40','70%'],            center: ['50%','50%'],            avoidLabelOverlap: false,                     data:[]//可以设置初始数据，设置为空，为动态绑定        }    ]};var chart = echarts.init(document.getElementById('carDetail'));$.ajax({async:true,url:DEFAULT_CONTEXT_PATH+"/console/chart/getCarDetail",data:{regionCode:regionCode},dataType:"json",type:"POST",success:function(data){var list = [];$.each(data.list,function(j,count){var obj = {};obj.value = count.COUNT;//绑定数据obj.name = count.AGE;list.push(obj);})option.series[0].data = list;chart.setOption(option);}});}

基本上信息绑定就这些核心的参数，图上的一些样式的修改，可以从文档上找到响应的属性然后绑定一下就可以。

效果图：

阅读全文

0 0