echarts 拼图和折线图的封装 及常规处理

Posted justsmile2

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了echarts 拼图和折线图的封装 及常规处理相关的知识，希望对你有一定的参考价值。

1.html

<div id="wrap"></div>

2.js

; (function ($) {
    $.fn.extend({
        echartsPie: function (obj) {
            // 默认配置
            var defaultConfig = {
                id: this.attr("id"),
                color: [‘#2ba4db‘, ‘#5172bf‘, ‘#935ebf‘, ‘#c654a2‘, ‘#54b9cd‘],
                legend: {
                    icon: "circle",
                    orient: "vertical",
                    xy: ["60%", "20%"], //控制图例位置
                    color: "#83868d"
                },
                noData: {
                    mainTitle: "无统计数据",
                    subTitle: "以下为模拟效果数据",
                    x: "center"
                },
                series: {
                    type: ‘pie‘,
                    radius: [‘50%‘, ‘70%‘], //控制内圆半径：默认为0，即实心圆.
                    center: [‘30%‘, ‘50%‘],
                    startAngle: 0
                },
                tooltip: {
                    trigger: ‘none‘,
                    showContent: false
                },
                defaultData: [{
                    value: 30,
                    name: ‘电影院‘
                }, {
                    value: 30,
                    name: ‘KTV‘
                }, {
                    value: 40,
                    name: ‘餐饮‘
                }]
            };
            var actConfig = $.extend(true, {}, defaultConfig, obj);

            // 数据处理
            if (actConfig.data.length) {
                actConfig.noData.mainTitle = "";
                actConfig.noData.subTitle = "";
            } else {
                actConfig.data = actConfig.defaultData;
            };
            var compoundObj = getData(actConfig.data);
            var proportionArr = proportion(compoundObj.vals);
            var isAllZero=allZero(compoundObj.vals);
            var legendData = [];
            $.each(compoundObj.labels, function (i, v) {
                var curObj = {};
                curObj.name = v;
                curObj.icon = actConfig.legend.icon;
                legendData.push(curObj);
            });
            var option = {
                title: {
                    text: actConfig.noData.mainTitle,
                    subtext: actConfig.noData.subTitle,
                    x: actConfig.noData.x
                },
                tooltip: {
                    trigger: actConfig.tooltip.trigger,
                    showContent: actConfig.tooltip.showContent,
                },
                color: actConfig.color,
                legend: {
                    orient: actConfig.legend.orient,
                    x: actConfig.legend.xy[0],
                    y: actConfig.legend.xy[1],
                    itemWidth: 14,
                    itemHeight: 14,
                    textStyle: {
                        fontSize: 14,
                        color: actConfig.legend.color,
                    },
                    itemGap: 30,
                    formatter: function (name) {
                        if(isAllZero){
                            return "0.00%  "+ name;
                        };
                        var str = mapArr(name, compoundObj.labels, proportionArr);
                        var spaceStr = addSpace(str, proportionArr) + "  ";
                        return "  " + mapArr(name, compoundObj.labels, proportionArr) + "%" + spaceStr + name;
                    },
                    data: legendData
                },
                calculable: false,
                series: [{
                    name: ‘‘,
                    type: actConfig.series.type,
                    // silent: true,
                    // hoverAnimation: false,
                    radius: actConfig.series.radius,
                    center: actConfig.series.center,
                    itemStyle: {
                        normal: {
                            label: {
                                show: false
                            },
                            labelLine: {
                                show: false
                            }
                        },
                        emphasis: {
                            label: {
                                show: false,
                                position: ‘inner‘,
                                formatter: "{b}({c})
{d}%"
                            }
                        }
                    },
                    data: compoundObj.objSrc
                }]
            };
            // api 调用
            var myChart = echarts.init(document.getElementById(actConfig.id));
            myChart.showLoading({
                text: "图表数据正在努力加载...",
                effect: ‘whirling‘,
                textStyle: {
                    fontSize: 20
                }
            });
            myChart.setOption(option);
            myChart.hideLoading();
            return this;
        },
        echartsLine: function (obj) {
            // 默认配置
            var defaultConfig = {
                id: this.attr("id"),
                color: ["#79be56", "#935ebf", "#c654a2"],
                type: "line",
                grid: [80, 60, 80, 60],
                noData: {
                    mainTitle: "无统计数据",
                    subTitle: "以下为模拟效果数据",
                    x: "center"
                },
                defaultData: [{
                    data: [397, 2096, 396],
                    name: "认证人次",
                    date: [‘6/12‘, ‘7/12‘, ‘8/12‘]
                }, {
                    data: [1097, 2046, 3096],
                    name: "上网人次"
                }, {
                    data: [97, 2006, 196],
                    name: "短信量"
                }]
            };
            var actConfig = $.extend(true, {}, defaultConfig, obj);

            // 数据处理
            if (actConfig.data.length) {
                actConfig.noData.mainTitle = "";
                actConfig.noData.subTitle = "";
            } else {
                actConfig.data = actConfig.defaultData;
            };
            var compoundObj = getDataLine(actConfig.data);
            var seriesConfig = [];
            $.each(actConfig.data, function (i, v) {
                var middle = {};
                middle.name = actConfig.data[i].name;
                middle.type = actConfig.type;
                middle.symbol = ‘emptyCircle‘;
                middle.legendHoverLink = false;
                middle.smooth = false;
                middle.symbolSize = 3;//拐点大小
                middle.itemStyle = {
                    normal: {
                        color: actConfig.color[i],
                    },
                    emphasis: {
                        color: actConfig.color[i],
                    }
                };
                middle.data = actConfig.data[i].data;
                seriesConfig.push(middle);
            });

            var option = {
                // title: {
                //     text: actConfig.noData.mainTitle,
                //     subtext: actConfig.noData.subTitle,
                //     x: actConfig.noData.x
                // },
                tooltip: {
                    trigger: ‘axis‘,
                    backgroundColor: "rgba(50,50,50,0)",
                    axisPointer: {
                        type: ‘none‘
                    },
                    formatter: function (params) {
                        return tooltipFormat(params);
                    }
                },
                legend: {
                    data: compoundObj.labels,
                    // padding:50,  //设置图例内间距
                    textStyle: {
                        fontSize: 14,
                        color: "#83868d",
                    },
                },
                grid: {
                    borderWidth: 0,
                    x: actConfig.grid[0], //坐标轴与容器左侧间距，字符串格式设置百分比:"6%"
                    y: actConfig.grid[1],
                    x2: actConfig.grid[2],
                    y2: actConfig.grid[3]
                },
                calculable: false,
                xAxis: [{
                    type: ‘category‘,
                    data: actConfig.data[0].date.map(function (str) {
                        return str.replace(‘ ‘, ‘
‘)
                    }),
                    splitLine: {
                        show: false  //控制网格线是否显示
                    },
                    axisPointer: {
                        type: ‘none‘
                    },
                    axisTick: {
                        show: false  //刻度线是否显示
                    },
                    splitArea: {
                        show: false, //分隔区域
                    },
                    axisLine: {
                        lineStyle: {
                            color: "#D7D7D7",
                        }
                    },
                    axisLabel: {
                        color: ‘#000‘,
                    },
                }],
                yAxis: [{
                    type: ‘value‘,
                    splitLine: {
                        show: true  //控制网格线是否显示
                    },
                    axisTick: {
                        show: false  //刻度线是否显示
                    },
                    splitArea: {
                        show: false,  //分隔区域
                    },
                    axisLine: {
                        lineStyle: {
                            color: "#D7D7D7",
                        }
                    },
                    axisLabel: {
                        color: ‘#000‘,
                    },
                }],
                series: seriesConfig
            };
            var myChart = echarts.init(document.getElementById(actConfig.id));
            myChart.showLoading({
                text: "图表数据正在努力加载...",
                effect: ‘whirling‘,
                textStyle: {
                    fontSize: 20
                }
            });
            myChart.setOption(option);
            myChart.hideLoading();
        }
    });

    //饼图
    //全零判断
    function allZero(arr){
        var m=0;
        for(var i=0,j=arr.length;i<j;i++){
            if(arr[i]==0){
                m++;
            }
        }
        return m==j;
    }
    // arr 求和
    function sumArr(arr) {
        var num = 0;
        for (var i = 0, j = arr.length; i < j; i++) {
            num = num + (arr[i] - 0);
        }
        return num;
    }

    // 获取占比
    function proportion(arr) {
        var arrBack = [];
        for (var i = 0, j = arr.length; i < j; i++) {
            var current = ((arr[i] - 0) / sumArr(arr) * 100 - 0).toFixed(2);
            arrBack.push(current);
        }
        return arrBack;
    }

    // 关联两个等长数组：通过一个数组的值获取另一个数组对应位置的值
    function mapArr(val, arr, arrTo) {
        for (var i = 0, j = arr.length; i < j; i++) {
            if (val == arr[i]) {
                return arrTo[i];
            }
        }
    }

    // 对齐效果：补空格
    function addSpace(str, arr) {
        var space = "";
        var len = 1;
        for (var m = 0, n = arr.length; m < n; m++) {
            if (arr[m].length >= len) {
                len = arr[m].length;
            }
        }
        for (var m = 0; m < len - str.length; m++) {
            space = space + "  ";
        }
        return space;
    }

    // 返回一个复合对象包含 labels、vals、映射 name > val、自身
    function getData(obj) {
        var compoundObj = {};
        compoundObj.labels = [];
        compoundObj.vals = [];
        compoundObj.objMap = {};
        compoundObj.objSrc = obj;
        $.each(obj, function (i, v) {
            compoundObj.labels.push(v.name);
            compoundObj.vals.push(v.value);
            compoundObj.objMap[v.name] = v.value;
        });
        return compoundObj;
    }

    // 折线图
    function tooltipFormat(obj) {
        var str = ‘<div style="padding-left:10px;width:200px;height:20px;font-size:14px;background-color:#54b9cd;color:#fff;">‘
            + obj[0].name
            + ‘</div>‘
            + ‘<div style="width:200px;border:1px solid #54b9cd;background-color:#fff;">‘;
        $.each(obj, function (i, v) {
            str = str
                + ‘<p>‘
                + ‘<span style="margin-left:10px;margin-right:10px;font-size:12px;color:#9299a1;">‘
                + v.seriesName
                + ‘:</span>‘
                + ‘<span style="font-size:14px;font-weight:700;color:#54b9cd;">‘
                + v.value
                + ‘</span>‘
                + ‘</p>‘;
        });
        str = str + ‘</div></div>‘;
        return str;
    }

    // 返回一个复合对象包含 dates、vals、labels
    function getDataLine(obj) {
        var compoundObj = {};
        compoundObj.labels = [];
        compoundObj.vals = [];
        compoundObj.dates = [];
        compoundObj.objSrc = obj;
        $.each(obj, function (i, v) {
            compoundObj.labels.push(v.name);
            compoundObj.vals.push(v.value);
            compoundObj.dates.push(v.date);
        });
        return compoundObj;
    }

})(jQuery);

2.1 使用

success: function (result) {                    
            var config = {
                        data: [{
                            data: result.statValue[1],
                            name: "name1",
                            date: result.statDate
                        }, {
                            data: result.statValue[0],
                            name: "name2"
                        }, {
                            data: result.statValue[2],
                            name: "name3"
                        }]
                    };
                    $("#wrap").echartsLine(config);
}

 

            success: function (data) {
                var config = {
                    data: []
                };
                $.each(data, function (i, v) {
                    var medium = {};
                    medium.name = v.name;
                    medium.value = v.avgNetTime;
                    config.data.push(medium);
                });
                $("#wrap").echartsPie(config);
            }

 

            success: function (data) {
                var config = {
                    data: [],
                    color: [‘#54b9cd‘, ‘#5172bf‘, ‘#935ebf‘, ‘#c654a2‘],
                    series: {
                        radius: "70%",
                        startAngle: 270
                    },
                    defaultData: [{
                        value: 30,
                        name: ‘name1‘
                    }, {
                        value: 30,
                        name: ‘name2‘
                    }, {
                        value: 40,
                        name: ‘name3‘
                    }]
                };
                $.each(data, function (i, v) {
                    var medium = {};
                    medium.name = v.authTypeName;
                    medium.value = v.authSuccessCount;
                    config.data.push(medium);
                });
                $("#wrap").echartsPie(config);
            }

 

 

 

 

 

 

3.参考网址

以上是关于echarts 拼图和折线图的封装 及常规处理的主要内容，如果未能解决你的问题，请参考以下文章

vue中echarts两组柱状图对比，可切换折线图、文本图并导出png

echarts折线图手机端不能放大解决

echarts折线图不堆叠设置

echarts框选+缩放折线图

pyecharts折线图进阶篇

echarts中折线比例为0怎么连接