dealChart.js

import Vue from 'vue'
const FONT_FAMILY = '"Microsoft YaHei","PingFang SC", "Lantinghei SC", "HanHei SC", "Helvetica Neue", "Open Sans", Arial, "Hiragino Sans GB", 微软雅黑, STHeiti, "WenQuanYi Micro Hei", SimSun, sans-serif'
const legend = {
    type: 'scroll',
    orient: "horizontal",
    x: "center",
    itemWidth: 12,
    itemHeight: 12,
    selected: {},
    data: []
}
const xAxis = {
    type: 'category',
    axisTick: {
        show: false
    },
    axisLabel: {
        textStyle: {
            color: '#888',
            fontFamily: FONT_FAMILY
        }
    },
    axisLine: {
        show: true,
        lineStyle: {
            color: '#888'
        }
    },
    axisTick: {
        show: false
    },
    data: []
}
const yAxis = {
    type: 'value',
    nameTextStyle: {
        color: '#444',
        fontSize: 13,
        fontFamily: FONT_FAMILY,
    },
    axisTick: {
        show: false
    },
    axisLabel: {
        textStyle: {
            color: '#888',
            fontFamily: FONT_FAMILY,
        }
    },
    axisLine: {
        show: true,
        lineStyle: {
            color: '#888'
        }
    },
    splitLine: {
        show: true,
        lineStyle: {
            color: '#f5f5f5'
        }
    }
}

/**
 * 格式化 echarts 结构
 * @param {object} data
 * @return {object}
 */
export function optionFormatter(data) {
    let lang = localStorage.getItem('lang') || '';
    let nodatatext = '';
    if (lang == 'en_US') {
        nodatatext = 'No Data'
    } else if (lang == 'zh_TW') {
        nodatatext = '暫無數據'
    } else {
        nodatatext = '暂无数据'
    }
    let option = {},
        emptyOption = {
            isEmpty: true,
            graphic: [{
                type: 'image',
                left: 'center',
                bottom: '51%',
                style: {
                    image: '/static/img/no_data.png',
                    width: 60,
                    height: 60,
                }
            }, {
                type: 'text',
                left: 'center',
                top: '52%',
                z: 100,
                style: {
                    fill: '#444',
                    text: nodatatext,
                    font: '16px ' + FONT_FAMILY
                }
            }],
            otherConf: data ? Object.assign({}, data.otherConf || {}) : {}
        }
    if (!data || !Object.keys(data).length) {
        return false
    } else if (!data.series) {
        return emptyOption
    } else if (!data.series.length) {
        return emptyOption
    } else if (data.series[0].data && data.series[0].data.length == 0) {
        return emptyOption
    }
    option = {
        animation: false,
        tooltip: {
            show: true,
            backgroundColor: '#fff',
            textStyle: {
                color: '#333'
            },
            extraCssText: 'box-shadow: 0px 0px 10px -4px rgba(3, 3, 3, .4)'
        },
        legend: legend,
        grid: {},
        xAxis: xAxis,
        yAxis: data.yaxis || yAxis,
        series: []
    }

    if (typeof(data.title) === 'string') {
        option.title = {
            text: data.title,
            show: false,
            textStyle: {
                color: '#444',
                fontSize: 18,
                fontFamily: FONT_FAMILY,
                fontWeight: 'normal',
            },
            left: 24,
            top: 16
        }
    }

    option.color = data.color
        // 处理series
        // 如果不清除, 页面中有多个同类型报表将叠加
    option.legend.data = []
    option.xAxis.data = []
    data.series.forEach((item, index) => {
        if (data.notSale) {
            // if(index === 1 && item.name === '销售额') {
            //   item.yAxisIndex = 1
            // }
            index === 0 && option.legend.data.push(item.name)
        } else {
            if (item.name) {
                option.legend.data.push({ name: item.name })
            }
        }
    })
    if (data.xaxis) {
        option.xAxis.data = data.xaxis.data
    }

    option.series = data.series

    // 整合特殊情况配置
    /**
     * isYear: 是否年报表
     * hasYaxisName: 是否显示 y 轴名称
     * seriesText: 单位
     * isIndependent: 是否单独的排行榜
     * selectedLen: legend 选中长度
     * hideDataZoom: 是否隐藏缩放轴
     * chartKey: 特殊报表处理字段
     * grid: 网格配置
     * kpiType: 指标值
     * normalXAxisLabel: 是否正常显示 x 轴 label
     * yAxisName: y 轴名称(计量单位)
     * _color: option color
     * ...
     */
    option.otherConf = Object.assign({}, data.otherConf)
    return option.otherConf.ignoreStringify ? option : JSON.parse(JSON.stringify(option));
}