echars图库

记录小菜用过的echars配置

•

echars帖子将记录小菜在工作用所用到的echars配置，避免在日后工作中反复配置。

1.在线演示地址

http://walidream.com/example/js/echarts/

在开始之前，小菜分享自己用echars的经验，就是将echars组件化，echars图表配置其实就是将options参数配置好，最后调用this.chart.setOption(this.option)，但是每次配置同类型的options就会很烦，而且文件会很大，所以小菜将echars配置抽出来了。

2.配置文件

echarts.conf.js

export default {
    linearMarkArea:{
        tooltip: {
            trigger: "axis",
            axisPointer: {
                type: "cross"
            }
        },
        grid: {
            left: 35,
            top: 30,
            bottom: 20
        },
        xAxis: {
            type: "category",
            axisLine: {
                show: true,
                lineStyle: {
                    "color": "#D9D9D9"
                }
            },
            boundaryGap: false,
            data: null
        },
        yAxis: {
            type: "value",
            axisLine: {
                show: true,
                lineStyle: {
                    color: "#D9D9D9"
                }
            },
            axisLabel: {
                formatter: "{value} "
            },
            axisPointer: {
                "snap": true
            },
            axisTick: {
                show: false,
            },
            axisLabel: {
                show: true,
            },
            splitLine: {
                show: false,
            },
            splitArea: {
                show: false,
            }
        },					
        series: [
            {
                name: "房价",
                type: "line",
                label:{
                    color:'#FF9800'
                },
                itemStyle:{
                    color:'#FF9800'  
                },
                smooth: true,
                data: null
            },
            {
                name:'',
                type:'line',
                markLine: {
                    name:'房价平均线',
                    lineStyle: {
                        type: 'dotted',
                        color: '#FF9800'
                    },
                    label: {
                        position: 'end',
                        formatter:'平均值'
                    },
                    data: null 
                }
            }
        ]
    },
    hBar:{
        textStyle: {
            fontSize: 12,
            color: '#D9D9D9'
        },
        grid: {
            left: 35,
            top: 10,
            bottom: 65
        },
        xAxis: {
            show: true,
            type: 'category',
            axisLine: {
                show:true,
                lineStyle: {
                    color: '#D9D9D9'
                }
            },
            nameRotate:15,
            data: null,
            axisTick: {
                show: false,
                color:'red'
            },
            axisLabel: {
                show: true,
                interval:0,//横轴信息全部显示
                rotate:30,//-30度角倾斜显示
            },
            splitLine: {
                show: false,
            },
            splitArea: {
                show: false,
            }
        },
        yAxis: {
            show: true,
            type: 'value',
            axisLine: {
                show: true,
                lineStyle: {
                    color: '#D9D9D9'
                }
            },
            axisTick: {
                show: false,
            },
            axisLabel: {
                show: false,
            },
            splitLine: {
                show: false,
            },
            splitArea: {
                show: false,
            },
        },
        series : [
            {
                type:'bar',
                barWidth: 10,
                data: null,
                itemStyle: {
                    color: '#FF9800'
                },
            },

        ]
    },
    vBar:{
	    textStyle: {
            fontSize: 12,
            color: '#D9D9D9'
        },
        grid: {
            left: 35,
            top: 10,
            bottom: 10
        },
        xAxis: {
            show: true,
            type: 'value',
            axisLine: {
                show:true,
                lineStyle: {
                    color: '#D9D9D9'
                }
            },
            axisTick: {
                show: false,
            },
            axisLabel: {
                show: false,
            },
            splitLine: {
                show: false,
            },
            splitArea: {
                show: false,
            }
        },
        yAxis: {
            show: true,
            type: 'category',
            axisLine: {
                show: true,
                lineStyle: {
                    color: '#D9D9D9'
                }
            },
            axisTick: {
                show: false,
            },
            axisLabel: {
                show: true,
            },
            splitLine: {
                show: false,
            },
            splitArea: {
                show: false,
            },
            data: null // y轴数据
        },
        series: [
            {
                data: null, // seriesData
                type: 'bar',
                barWidth: 10,
                itemStyle: {
                    color: '#FF9800'
                },
                label: {
                    show: true,
                    color: '#FF9800',
                    position: 'right',
                    formatter: (v) => {
                        return `${v.value}`
                    },
                }
            }
        ]
    }
}

3.处理数据并返回options

util/echarts.js

import echartsConfig from '@/config/echars.conf.js'
import { arrayFormat } from 'Util/util'

export class Echars{
    constructor(options = {}){
        this.options = options
    }

    //获取canvas options参数
    getCancasOptions(summary){
        const summaryType = summary.summaryType
        switch(summaryType){
            case 'linear':{ 
                let xAxisData = _.map(summary.summaryDetail,'xAxis');
                let seriesData = _.map(summary.summaryDetail,'value');
                let seriesMarkAreaData = arrayFormat(summary.currentData,'xAxis');
                return this.linearMarkArea({xAxisData, seriesData, seriesMarkAreaData});
                break;
            }
            case 'hbar':{
                let xAxisData = _.map(summary.summaryDetail,'xAxis');
                let seriesData = _.map(summary.summaryDetail,'value');
                return this.hBar({xAxisData, seriesData});
                break;
            }
            case 'vbar':{
                let xAxisData = _.map(summary.summaryDetail,'xAxis');
                let seriesData = _.map(summary.summaryDetail,'value');
                return this.vBar({xAxisData, seriesData});
                break;
            }
            default: break;
        }
    }

    //折线图 有阴影区间
    linearMarkArea({xAxisData,seriesData,seriesMarkAreaData}){
        //深度拷贝
        let linearMarkAreaConf = _.cloneDeep(echartsConfig.linearMarkArea)
        linearMarkAreaConf['xAxis']['data'] = xAxisData
        linearMarkAreaConf['series'][0]['data'] = seriesData
        if(seriesMarkAreaData){
            linearMarkAreaConf['series'][1]['markLine']['label']['formatter'] = seriesMarkAreaData[0]['name']
            linearMarkAreaConf['series'][1]['markLine']['data'] = [[
                {coord:[seriesMarkAreaData[0]['xAxis'],seriesMarkAreaData[0]['yAxis']]},
                {coord:[seriesMarkAreaData[1]['xAxis'],seriesMarkAreaData[1]['yAxis']]}
            ]]
        }       
        //深度继承对象属性
  
        if(Object.keys(this.options).length > 0) linearMarkAreaConf = _.assignIn(linearMarkAreaConf,this.options)
        return linearMarkAreaConf;
    }

    //垂直柱状图
    vBar({yAxisData,seriesData}){
        //深度拷贝vBar配置
        let vBarConf = _.cloneDeep(echartsConfig.vBar)       
        vBarConf['yAxis']['data'] = yAxisData
        vBarConf['series'][0]['data'] = seriesData
        //深度继承对象属性
        if(Object.keys(this.options).length > 0) vBarConf = _.assignIn(this.options,vBarConf)

        return vBarConf;        
    }

    //水平柱状图
    hBar({xAxisData,seriesData}){
        let hBarConf = _.cloneDeep(echartsConfig.hBar)
        hBarConf['xAxis']['data'] = xAxisData
        hBarConf['series'][0]['data'] = seriesData
        if(Object.keys(this.options).length > 0) hBarConf = _.assignIn(this.options,hBarConf)
        
        return hBarConf;
    }

    getSumHBar(hBarObj){
        let heigth = 220;
        if(hBarObj.summaryType == 'hbar'){
            heigth = hBarObj.summaryDetail.length * 15 * 2
        }
        return heigth;
    }

    getArraySumHBar(arr){
        let heigth = 220;
        if(arr.length != 0){
            heigth = arr.length * 15 * 2
        }
        return heigth;
    }
}

4.vue组件

components/EchartsCreater.vue

<template>
    <div class="echarts-wrap" :id="echartsId"></div>
</template>

<script>
import echarts from 'echarts'
import { getGuid }  from 'Util/util'

export default {
    name: 'EchartsCreater',
    props: {
        option: {
            type: Object,
            default: function () {
                return {}
            }
        },
        clickHandler: Function,
    },
    mounted () {
        this.init()  
    },
    data () {
        return {
            echartsId: getGuid(),
            chart: null,
        }
    },
    methods: {
        init() {
            let dom = document.getElementById(this.echartsId)
            if (!dom) return;

            this.chart = echarts.init(dom)

            this.chart.setOption(this.option)

            this.chart.on('click', (params) => {
                this.$emit('clickHandler', params, this.chart)
            })
        }
    },
    watch: {
        option(newVal) {
            this.chart.setOption(newVal)
            this.chart.resize()
        }
    }
}
</script>

<style lang="scss" scoped  module="EchartsCreater">
.echarts-wrap {
    width: 100%;
    height: 100%;
}
</style>

5.工具方法

util/util

export function getGuid() {
    return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
        const r = Math.random() * 16 | 0;
        const v = c == 'x' ? r : (r & 0x3 | 0x8);
        return v.toString();
    }).toUpperCase();
}

export const arrayFormat = (arr,key) =>{
    if(arr.length == 0 ) return [];
    let brr = arr.map(val =>{
        val[key] = val[key].toString();
        return val;
    })
    return brr;
}