图表 ECharts 的应用--小记

我会带着你远行 2022-05-31 00:15 213阅读 0赞

var option = {
    	                color: arr[i].color,   // 每份数据的色值
    	                tooltip : {
    	                    trigger: 'axis',
    	                    axisPointer : {            // 坐标轴指示器，坐标轴触发有效
    	                        type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
    	                    }
    	                },
    	                grid: {
    	                    left: '3%',      //图表到左边的距离
    	                    right: '4%',   // 右边
    	                    bottom: bottom,  //……
    	                    top : '5%',
    	                    containLabel: true    //自定模式 ，如果是 false， left等设置不管用
    	                },
    	                xAxis : [
    	                    {
    	                        type : 'category',
    	                        data : arr[i].name,  // x 轴的数据
    	                        axisTick: {            // 坐标轴小标记
    						     	show: false,       // 属性show控制显示与否，默认不显示
    							 	inside : false,    // 控制小标记是否在grid里 
    							 	length :5,         // 属性length控制线长
    							 	lineStyle: {       // 属性lineStyle控制线条样式
    									color: '#333',
    								 	width: 1
    							  	}
    							},
    	                        axisLine: { // 刻度样式
    			                 	lineStyle: {
    			                     	color: '#dddede',  //线的着色
    			                     	fontSize: 12   // 刻度字体的大小
    			                 	}
                 				},
    	                        splitLine:{//网格线的样式
    				                lineStyle:{
    				                    color: ['rgba(255,255,255, 0.02)'],
    				                }
                				},
    	                        axisLabel : {  // 刻度字体的样式 
    			                  	interval: 0,
    			                  	margin:10,
    			                  	rotate:30  // 倾斜度
    			                };
    	                    }
    	                ],
    	                yAxis : [
    	                    {
    	                        type : 'value',
    	                        splitArea: {  //网格的背景
    	                        	show: true,
    	                        	areaStyle : {
    	                        		color :  ['rgba(225,225,225,0.03)','rgba(225,225,225,0.03)'] //背景有两种柱状色
    	                        	}
    	                        }
    	                    }
    	                ],
    	                series : [
    	                    {
    	                        name:arr[i].name_text,
    	                        type:bar,  // bar 柱状 ， line 线
    	                        barWidth: '10',   //柱状大小
    	                        data:arr[i].data,  // 图表的数据
    	                    }
    	                ]
    	            };

![SouthEast][]

环形图

var labelBottom = {
    			    normal : {
    			        color: data[i].color[0],
    			        label : {
    			            show : true,
    			            position : 'center',  // 文字定位在中间
    			            textStyle: {
    			                fontSize : 18
    			            }
    			        },
    			        labelLine : {
    			            show : false
    			        },
    			        shadowColor: data[i].color[0],  // 条开发亮
                        shadowBlur: 8
    			    },
    			};
    			var option = {
    				    legend: {
    				        show : false,
    				        data:[
    				            'GoogleMaps','Facebook','Youtube'
    				        ]
    				    },	    
    				    series : [		        
    				        {
    				            type : 'pie',
    				            center : ['50%', '50%'],
    				            radius : radius,
    				            x:'20%', // 
    				            data : [
    				                {name:name, value:data[i].data.value, itemStyle : labelBottom},
    				                {name:'', value:data[i].data.total,itemStyle : labelTop}
    				            ]
    				        } 
    				    ]	
    				};

![SouthEast 1][]

这里有更详细的解答

[点击打开链接][Link 1]

[SouthEast]: /images/20220531/78673ae211904f4aa949f3e81ead7c7f.png
[SouthEast 1]: /images/20220531/850dd8dfabed4a6a916d66c70965f7c0.png
[Link 1]: http://blog.csdn.net/she_lover/article/details/51448967