四时宝库

最近，公司项目需要做本年统计数据展示，首先就想到了echarts，在实际项目使用中，对代码进行封装，利于快速开发，针对不同数据展示。上手即用，满足常规统计展示。高级炫酷展示，本文不做讲解。

饼状图：

饼状图，带有统计和针对不同模块选择，模拟数据，部分代码展示。文章底部附完整代码。

//饼状图模拟数据
   	function pieTab_on() {
   	 	 	//饼状图 table 标题
     	 	var age_tr = '<tr><td>年龄</td><td>数量</td><td>占比</td></tr>';  // 商户年龄表标题
       		var datas =[{"value":57,"name":"60后"},{"value":134,"name":"70后"},{"value":99,"name":"80后"},{"value":14,"name":"90后"},{"value":0,"name":"00后"},{"value":10,"name":"其他"}];
                let ownerAgeData = datas;
                // console.log("ownerAgeData", ownerAgeData);
                pieTableFn(datas, ".tableon", age_tr);
				var fd_age_total = 0;  //总人数变量
                $.each(datas,function () {
                    fd_age_total += this.value;
                });
                $(".tableon").append('<tr><td colspan="3" class="total_txt">饼状_one共计' + fd_age_total + '人</td></tr>');
                // 年龄名数组
               let ownerAgeName = array_column(datas, "name");
               // 赋值类 fd_age
               pieChart('fd_age', '饼状_one', ownerAgeName, ownerAgeData, '45%', ['50%', '74%']);
	}

树状图：

模拟数据，部分代码展示。文章底部附完整代码。

function pieTab_two() {
     		   var datas = [{"value":1,"name":"一年以内"},{"value":15,"name":"1-3年"},{"value":16,"name":"3-5年"},{"value":33,"name":"5-10年"},{"value":48,"name":"10年以上"}];
                // console.log("datas",datas);
                yearsFn(datas, ".czh_years_table");
                // 获取年限阶段名
                let operatorYearsName = array_column(datas, "name");
                // 获取年限数
                let operatorYearsNum = array_column(datas, "value");
                barChart('czh_year', 'pieTab_two', x_grid, axisData(operatorYearsName), {}, ['#bb85f5'], '35%', operatorYearsNum);
    }

横纵图：

模拟数据，部分代码展示。文章底部附完整代码。

function echarts_two(new_year) {
     		  //模拟接口请求数据
        		let total = 0;
                let violationsData = [];   // 两个数组合并为一个对象数组时用
                // 获取Y轴月份
                let   TypeviolationsName = ["一次就好", "笑纳", "用力活着", "浪子闲话", "大秦赋", "大江大河2", "金晨", "李一桐", "肖战", "邓伦"];
                // 获取X轴值
                let  TypeviolationsNum = [500, 500, 500, 500, 500, 500,1000, 1000, 1000,1000];
                // 渲染统计
                if(TypeviolationsName || TypeviolationsNum) {
                	//颜色可更改
                    barChart('shop_type_content', 'echarts_on不带table表格', y_grid, {}, axisData(TypeviolationsName), ['#dd585B'], '60%', TypeviolationsNum);
                }
    }

本文依据项目所封装代码，如有喜欢，请点赞支持，谢谢。

代码地址：https://github.com/Skingsking/echarts_demo