dx-element-ui/packages/charts/src/echart.js

import echarts from 'echarts';
import { objectMerge } from '@/components/thrid/em-element-ui/src/tools/utils'

export function formatLegendData(params) {
    let result = '',
        number = 4,
        name = params.name.toString(),
        str = name.replace(/^\s+|\s+$/g, ''),
        len = str.length;

    number = len > number ? Math.ceil(len / 2) : number;
    for (let i = 0; i < len; i++) {
        if (i > 0 && i < len && (i % number) == 0) {
            result += '\n';
        }
        result += str.charAt(i);
    }
    //str.replace(/(?=(?:.{4})+$)/g, '\n');

    return result;
}

export function debounce(func, wait, immediate) {
    let timeout, args, context, timestamp, result

    const later = function () {
        // 据上一次触发时间间隔
        const last = +new Date() - timestamp

        // 上次被包装函数被调用时间间隔last小于设定时间间隔wait
        if (last < wait && last > 0) {
            timeout = setTimeout(later, wait - last)
        } else {
            timeout = null
            // 如果设定为immediate===true，因为开始边界已经调用过了此处无需调用
            if (!immediate) {
                result = func.apply(context, args)
                if (!timeout) context = args = null
            }
        }
    }

    return function (...args) {
        context = this
        timestamp = +new Date()
        const callNow = immediate && !timeout
        // 如果延时不存在，重新设定延时
        if (!timeout) timeout = setTimeout(later, wait)
        if (callNow) {
            result = func.apply(context, args)
            context = args = null
        }

        return result
    }
}

//控制浏览器宽度变化
export function chartsInitBAutoResize(obj) {
    if (obj.autoResize) {
        obj.__resizeHanlder = debounce(() => {
            if (obj.chart) {
                obj.chart.resize()
            }
        }, 100)
        window.addEventListener('resize', obj.__resizeHanlder)
    }

    // 监听侧边栏的变化
    if (document.getElementsByClassName('sidebar-container').length > 0) {
        const sidebarElm = document.getElementsByClassName('sidebar-container')[0]
        sidebarElm.addEventListener('transitionend', obj.__resizeHanlder)
    }
}

export function chartsDestroyData(obj) {
    if (!obj.chart) {
        return
    }
    if (obj.autoResize) {
        window.removeEventListener('resize', obj.__resizeHanlder)
    }

    // 监听侧边栏的变化
    if (document.getElementsByClassName('sidebar-container').length > 0) {
        const sidebarElm = document.getElementsByClassName('sidebar-container')[0]
        sidebarElm.removeEventListener('transitionend', obj.__resizeHanlder)
    }

    obj.chart.dispose()
    obj.chart = null
}

/*
*
* type: 1: color数组，2: objColor数组
* index对象的序号，循环获取值
*
* */
export function getColorValue(type, index) {
    let number = 15,
        objColor = [{
            normal: ['#39A1FF', '#5AB1FF'],
            emphasis: ['#5AB1FF', '#39A1FF']
        }, {
            normal: ['#5CDBD3', '#61EBE2'],
            emphasis: ['#61EBE2', '#5CDBD3']
        }, {
            normal: ['#4ECB73', '#51CB92'],
            emphasis: ['#51CB92', '#4ECB73']
        }, {
            normal: ['#FBD437', '#C1C417'],
            emphasis: ['#C1C417', '#FBD437']
        }],
        color = ['#5B8FF9', '#F6BD16', '#E86452', '#41CC7C', '#F2627B', '#2db9e3', '#90e3aa', '#fd8c6c', '#f75881', '#d6479e', '#de78c7', '#e0aaf0', '#8b7ff2', '#6f5ee4', '#85afff'];

    if (type == 1) {
        if (typeof (index) == 'number') {
            return color[index % number];
        } else {
            return color;
        }
    } else {
        return objColor;
    }
}

//页面data初始化
export function chartsInitData() {
    let options = {},
        option = {
            chart: null,
            barGap: '9%',
            barWidth: '10',
            scrollDataIndex: 0,
            legrendUnSelect: true,
            color: getColorValue(1),
            itemColorArr: getColorValue(2)
        };

    Object.assign(options, option);

    if (arguments.length > 1) {
        Object.assign(options, arguments[1]())
    }

    return options;
}

//option设置
export function chartsOptionGrid() {
    return {
        left: '10%',
        right: '10%',
        top: '8%',
        bottom: '22%'
    };
}

//init merge data
function getObjectValue(currObj, paramObj) {
    let result = Object.create(currObj ? currObj : null);

    if (currObj) {
        objectMerge(result, paramObj);

        return result;
    } else {
        return paramObj;
    }
}

function initChartsTitle(option, obj) {
    let title = obj.options.title;

    if (title) {
        option.title = getObjectValue(option.title, title);
    }
}

function initChartsColorArray(option, obj) {
    let color = obj.options.color;

    if (color) {
        option.color = getObjectValue(option.color, color);
    }
}

function initChartsToolbox(option, obj) {
    let toolbox = obj.options.toolbox;

    if (toolbox) {
        option.toolbox = getObjectValue(option.toolbox, toolbox);
    }
}

function initChartsTooltip(option, obj) {
    let tooltip = obj.options.tooltip;

    if (tooltip) {
        option.tooltip = getObjectValue(option.tooltip, tooltip);
    }
}

function initChartsGrid(option, obj) {
    let grid = obj.options.grid;

    if (grid) {
        option.grid = getObjectValue(option.grid, grid);
    } else {
        option.grid = chartsOptionGrid();
    }
}

function initChartsLegend(option, obj) {
    let legend = obj.options.legend;

    if (legend) {
        option.legend = getObjectValue(option.legend, legend);
    }
}

function initChartsLegendData(option, obj) {
    let legendData = obj.options.legendData;

    if (legendData) {
        option.legendData = getObjectValue(option.legendData, legendData);
    }
}

function initChartsxAxis(option, obj) {
    if (obj.options.xAxisDel) return false;

    let xAxis = obj.options.xAxis;

    if (xAxis) {
        option.xAxis = getObjectValue(option.xAxis, xAxis);
    }
}

function initChartsyAxis(option, obj) {
    if (obj.options.yAxisDel) return false;

    let yAxis = obj.options.yAxis;

    if (yAxis) {
        option.yAxis = getObjectValue(option.yAxis, yAxis);
    }
}

function initChartsDataZoom(option, obj) {
    if (obj.options.dataZoomDel) return false;

    let dataZoom = obj.options.dataZoom;

    if (dataZoom) {
        option.dataZoom = getObjectValue(option.dataZoom, [{
                type: 'slider',//图表下方的伸缩条
                show: false,  //是否显示
                realtime: true,  //
                start: 0,  //伸缩条开始位置（1-100），可以随时更改
                end: 100,  //伸缩条结束位置（1-100），可以随时更改
                xAxisIndex: [0],
                filterMode: 'none'
            }]);
    }
}

function initChartsAxisPointer(option, obj) {
    if (obj.options.axisPointerDel) return false;
    let axisPointer = obj.options.axisPointer
    if (axisPointer) {
        option.axisPointer = getObjectValue(option.axisPointer, axisPointer);
    }
}

function getSeriesEmphasis(obj, item, index) {
    let result = {};

    return result;
}

function getSeriesAreaStyle(item) {
    let result = {};

    if (item.areaColor && Array.isArray(item.areaColor)) {
        result = {
            normal: {
                color: new echarts.graphic.LinearGradient(
                    0, 0, 0, 1,
                    [
                        { offset: 0, color: item.areaColor[0] },
                        { offset: 0.5, color: item.areaColor[1] },
                        { offset: 1, color: item.areaColor[2] }
                    ]
                )
            }
        }
    }

    return result;
}

function getSeriesItemStyle(obj, item, index) {
    let result = {},
        type = item.type ? item.type : obj.type;

    if (item.gradual) {
        let len = obj.itemColorArr.length,
            color = obj.itemColorArr[index % len];

        result = {
            normal: {
                color: new echarts.graphic.LinearGradient(
                    0, 0, 0, 1,
                    [
                        { offset: 0, color: color.normal[0] },
                        { offset: 0.5, color: color.normal[1] },
                        { offset: 1, color: color.normal[1] }
                    ]
                )
            },
            emphasis: {
                color: new echarts.graphic.LinearGradient(
                    0, 0, 0, 1,
                    [
                        { offset: 0, color: color.emphasis[0] },
                        { offset: 0.7, color: color.emphasis[0] },
                        { offset: 1, color: color.emphasis[1] }
                    ]
                )
            }
        };
    } else {
        if (type == 'pie') {
            result = {
                normal: {
                    color: function (params) {
                        return obj.color[params.dataIndex]
                    },
                    label: {
                        show: true,
                        //position: 'inner',
                        formatter: function (a, b, c, d) {
                            return c;
                        }
                    }
                }
            };
        } else {
            result = {
                normal: {
                    color: item.color ? item.color : obj.color[index],
                    borderColor: item.borderColor ? item.borderColor : obj.color[index],
                    shadowOffsetX: item.shadowOffsetX ? item.shadowOffsetX : 0,
                    opacity: item.opacity ? item.opacity : 1,
                    lineStyle: {
                        type: item.borderType ? item.borderType : 'solid'  //'dotted'虚线 'solid'实线
                    }
                }
            };
        }
    }

    return result;
}

function getSeriesData(obj) {
    let result = [],
        series = obj.chartData.series;

    series.forEach((item, index) => {
        let serData = Object.assign({}, item),
            type = item.type ? item.type : obj.type;

        //series必须的值
        serData.type = type;
        serData.name = item.name || 'null';
        serData.data = item.data;
        serData.label = item.label || { show: false }
        serData.itemStyle = item.itemStyle || getSeriesItemStyle(obj, item, index);
        serData.emphasis = item.emphasis || getSeriesEmphasis(obj, item, index);
        serData.animationEasing = item.animationEasing || 'cubicInOut';

        if (item.yAxisIndex) {
            serData.yAxisIndex = item.yAxisIndex;
        }

        if (item.stack) {
            serData.stack = item.stack;
        }

        if (item.markLine) {
            serData.markLine = item.markLine;
        }

        switch (type) {
            case 'bar':
                serData.animationDuration = 800;
                serData.barGap = item.barGap || obj.barGap;
                serData.barWidth = item.barWidth || obj.barWidth;
                serData.showBackground = item.showBackground || false
                serData.backgroundStyle = item.backgroundStyle || {
                    color: '#5D7092',
                    opacity: 0.1
                }
                break;
            case 'line':
                serData.symbol = item.symbol || 'none'
                serData.showSymbol = item.showSymbol || false
                serData.symbolSize = item.symbolSize || 4
                serData.lineStyle = {}
                serData.animation = false;
                serData.animationDuration = 1500;
                serData.areaStyle = item.areaStyle || getSeriesAreaStyle(item);
                serData.lineStyle.width = (item.lineStyle && item.lineStyle.width) || 2
                break;
            case 'pie':
                serData.smooth = item.smooth || true;
                serData.radius = item.radius || 40;
                serData.center = item.center || ['30%', '50%'];
                serData.animationDuration = 800;
                serData.label = item.label || {
                    normal: {
                        formatter: function (params) {
                            return params.percent + '%';
                        }
                    }
                };
                serData.labelLine = item.labelLine || {
                    normal: {
                        smooth: 0.4,
                        length: 2,
                        length2: 20,
                    }
                };
        }

        result.push(serData)
        // 立体效果
        if (item.stereoscopic) {
            result.push(...stereoscopicCharts(serData))
        }
        // 是否显示阴影背景
        if (item.ishadow) {
            result.push(...shadowCharts(serData))
        }
    });

    return result;
}
// 立体效果
function stereoscopicCharts(item) {
    const data = []
    const minList = []
    const barMaxWidth = Math.round(item.barWidth * 2 / 3)

    item.data.forEach(num => {
        minList.push(1)
    })

    data.push({
        data: minList,
        symbol: 'diamond',
        type: 'pictorialBar',
        symbolOffset: [0, '-50%'],
        symbolSize: [item.barWidth, Math.round(item.barWidth / 2)],
        barMaxWidth: barMaxWidth
    })
    data.push({
        data: item.data,
        symbol: 'diamond',
        symbolPosition: 'end',
        type: 'pictorialBar',
        symbolOffset: [0, '-50%'],
        symbolSize: [item.barWidth, Math.round(item.barWidth / 2) - 2],
        barMaxWidth: barMaxWidth,
        zlevel: 2
    })

    return data
}
// 是否显示阴影背景
function shadowCharts(item) {
    const data = []
    const maxData = Math.max(...item.data)
    const maxList = []
    const minList = []
    const barMaxWidth = Math.round(item.barWidth * 2 / 3)

    item.data.forEach(num => {
        minList.push(1)
        maxList.push(maxData)
    })

    data.push({
        data: maxList,
        type: 'bar',
        barGap: '-100%',
        barWidth: item.barWidth,
        barMaxWidth: 'auto',
        zlevel: -1
    })
    data.push({
        data: minList,
        symbol: 'diamond',
        type: 'pictorialBar',
        symbolOffset: [0, '-50%'],
        symbolSize: [item.barWidth, Math.round(item.barWidth / 2)],
        barMaxWidth: barMaxWidth,
        zlevel: -2
    })

    data.push({
        data: maxList,
        symbol: 'diamond',
        symbolPosition: 'end',
        type: 'pictorialBar',
        symbolOffset: [0, '-50%'],
        symbolSize: [item.barWidth, Math.round(item.barWidth / 2) - 2],
        barMaxWidth: barMaxWidth,
        zlevel: -1
    })

    return data
}

function initChartsSeries(option, obj) {
    if (obj.chartData.series) {
        option.series = getSeriesData(obj);
    }
}

export function mergeChartsOptions(obj) {
    let options = {};

    initChartsTitle(options, obj);//初始化title
    initChartsColorArray(options, obj);//初始化title
    initChartsToolbox(options, obj);//初始化toolbox
    initChartsTooltip(options, obj);//初始化tooltip
    initChartsGrid(options, obj);//初始化图上下左右的空白
    initChartsAxisPointer(options, obj); //初始化坐标轴指示器
    initChartsLegend(options, obj);//实例初始化
    initChartsLegendData(options, obj);//实例初始化
    initChartsxAxis(options, obj);//x坐标轴
    initChartsyAxis(options, obj);//y坐标轴
    initChartsDataZoom(options, obj);//坐标轴
    initChartsSeries(options, obj);//数值初始化

    return options;
}

export function legendSelecthanged(obj, option) {
    if (!option.legendData) return;
    obj.chart.on('legendselectchanged', function (params) {
        let num = 0,
            name = params.name;

        option.series[num].data.forEach((item, index) => {
            let value = 0;
            option.legendData[index].forEach(legend => {
                if (name == legend.subjectName) {
                    value = Number(legend.fee);
                }
            });
            if (params.selected[name]) {
                option.series[num].data[index] = item + value;
            } else {
                option.series[num].data[index] = item - value;
            }
        });

        obj.chart.setOption(option);
    });
}

export function drawCharts(obj) {
    let option = mergeChartsOptions(obj);

    obj.chart.setOption(option);

    legendSelecthanged(obj, option);//图例选择改变事件
}