echarts 3d饼状图_echarts 封装，饼状，树状图。「笔记」

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

饼状图：

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

//饼状图模拟数据   function pieTab_on() {     //饼状图 table 标题      var age_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('饼状_one共计' + fd_age_total + '人');                // 年龄名数组               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