echarts.js做饼图的使用_echarts 饼图 js

作者：花生_TL007 | 2024-02-23 01:09:15

踩

echarts 饼图 js

1.前台（具体配置参考网上）
https://www.cnblogs.com/benmumu/p/8316652.html

   <body>
   <div id="productState"  class="echarts-left" name="产品运营状态"></div>
   </body>
   function eCharts(id, echartData, seriesName) {
    // 基于准备好的dom，初始化echarts实例
    var eChart = echarts.init(document.getElementById(id));
    var eChartName = $('#' + id).attr("name");//这个是公用方法，所以id根据不同的值取不同属性
    // 指定图表的配置项和数据
    option = {
        title: {
            text: eChartName, // 标题
            subtext: '', // 副标题
            x: 'center'
        },
        tooltip: { //这个是鼠标放置在图上时显示的内容
            trigger: 'item',
            formatter: '{b} ({d}%)', // {a}（系列名称），{b}（数据项名称），{c}（数值）,
										// {d}（百分比） 百分比会根据数值自动算出
            backgroundColor: 'rgba(255,255,255,0.8)', // 通过设置rgba调节背景颜色与透明度
            textStyle: {
                color: 'rgba(77,77,77,1)',
            }
        },
        color: ['#FC7011', '#FFC89B', '#FFAD6B', '#FF8933'],//饼图支持的四种色系
        legend: { //这个是图例，就是在图旁边显示不同颜色代表的东西
		data: ["总数", "已解决", "未解决"],//这里是传入的数组，或者通过formatter自定义返回格式
		formatter:function (name){ //跟data只能写一个
			for(var i =0;;i<echartData.length;i++){
				if(name==echartData[i].name){
				return name +'('+echartData[i].value+')'
				}
			}
		}
		icon: "circle",   //  这个字段控制形状  类型包括 circle，rect ，roundRect，triangle，				diamond，pin，arrow，none
itemWidth: 10,  // 设置宽度
itemHeight: 10, // 设置高度
itemGap: 40 // 设置间距
},
  series: [{
            name: seriesName,
            type: 'pie', //选定echarts要展示的图形类型，这里是饼图，还可以是柱状等
            radius: '60%',//饼图大小
            center: ['50%', '60%'],
            data: echartData, //此处传json数组， eg:[
                        {type: 'max', name: '最大值'},
                        {type: 'min', name: '最小值'}
                    ]
            itemStyle: {
                emphasis: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
             },
            label: {
                	normal:{
                		show:true,
                        formatter: '{b}({c})({d}%) \n ',//此处n调整的表示空行，一个n能够使得文字处于横线上方	
                         padding:[0,-70]/调整文字和横线横向的距离远近，一个padding一个空行n就能使得文字在横线上方，如果块比较小，可以避免文字里的太近
                	}
                	
            },
             lableLine:{//调整折线前后的长短
            	normal:{
            		length:20,
            		lenghth2:30
            	}
            }
        }]
    };

    // 使用刚指定的配置项和数据显示图表。
    eChart.setOption(option);
     // 下钻事件，能下钻的通过系列名称来判断下钻
    function clickFunc(param) {
            if (param.seriesName === '产品状态') {
            $('#productState').attr("name", "产品类型分类-" + param.name+"("+param.value+")"); 
            orgToProductType(param.data.code, param.data.name);
            }
    }
	   // 绑定下钻事件，echarts数据系列已经开启了点击事件，只是需要自己绑定而已
    eChart.on("click", clickFunc);	
    }												
		//请求后台数据之后，调用echarts()方法展示
		 Ext.Ajax.request({
        method: 'POST',
        url: todoPath+"homePageData/productGroupPie.ctrl",
        success: function (data) {

            // 转化完之后是数组
            var list = JSON.parse(data.responseText);
            if(list.length>0){
         	   eCharts('autoTaskResult',list,'产品组')
        }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94

2.后台风筝json数组

	List<Object[]> list = hp.listProductIdsForStatus(status, unit,date);
 		Map<String,String> map = null;
		List<Map<String,String>> maplist = new ArrayList<Map<String,String>>();
		for (Object[] objects : list) {
			map = new HashMap<String,String>();
			map.put("name", String.valueOf(objects[0]));
			map.put("value", String.valueOf(objects[1]));
			maplist.add(map);
		}
		AJAXUtil.success(response, JSONUtil.toJson(maplist));
1
2
3
4
5
6
7
8
9
10

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/花生_TL007/article/detail/132592