Echarts二次封装--折线图，柱型图和饼图整合为一个

作者: Ricoywang | 来源:发表于2017-12-12 09:28 被阅读0次

Echarts二次封装--折线图，柱型图和饼图整合为一个
vue+elementUi+echarts 折线图组件
echarts的学习与实战大数据首页
2019-01-18 ECharts
vue+elementUi+echarts 折线图饼图联动组件
ECharts插件使用
iOS 图表绘制
数据可视化图表ECharts
利用echarts实现python数据可视化
echarts3 在一个canvas中同时绘制折线图和柱状图

普通项目中常用的可视化图表，可能也就折线图，柱型图和饼图，如果每次都需要重新配置一遍图表参数，也会很心累，以下是我将三表合一的开发实践。

完成需求

折线图，柱型图和饼图三图合一；
图表数据与样式分离，只需要专注于ResponseData参数即可；
可配置默认参数项，根据自身项目需求修改样式；
完美搭配后端渲染，亦可前端操作；
迁移原生无痛手术，只需实现$.extend(obj,addObj)

功能

可生成折线图，柱形图，饼图；
图表可根据窗口变化自适应;
可在构造函数原型链上加添加方法，赋予实例诸如：show,hide等功能；

以后的Flag

想再用函数编程重写一遍，但最近都没时间，只有一个思路，先立一个Flag，不折腾不舒服斯基。

代码结构

####
var one = document.getElementById("one");
####
var oneResponseData = {
       dom:one,
      //控制标题。
      title:'收入情况分析',
      //控制显示多少根线，多少个柱子
      legendData:['旅行社','酒店','景(区)点'],
      //控制线和柱子的高度。
      seriesData:[[30, 332, 201, 434, 190,],[434, 190,30, 332, 201],[134, 120,30, 132, 401]],
      //X轴日期数据
      xData :['10月10日', '10月12日', '10月13日', '10月14日', '10月15日'],
  }
####
var oneMsg = {
     
      //设置线条或柱子颜色
      color:['#048f3C','#00BFFF','#1B1E7C','#E10074','#E10013','#FF6A6A','rgba(255,66,93,1)','#00FA9A','#006400','#B23AEE'],
      radius: null,
      roseType :null,
      legend:true,
      
      labelPosition:null,
      formatter: null,
      center: null,
      xname:'单位(人)',
      type:'line',
  }
####构造函数
var echartInstance
echartInstance.prototype.redom
echartInstance.init =function(msg){
  new echartInstance(msg);
}
####传参，实例化图表；
oneEcharts = echartInstance.init(msg,oneResponse)

案例展示

以下贴出全部代码

    var one = document.getElementById("one");
    var two = document.getElementById("two");
    var three = document.getElementById("three");
    var four = document.getElementById("four");
    //one ,two ,three ,four：oneResponseData，twoResponseData threeResponseData，fourResponseData对应相应的数据对象，只需要修改title,legendData,seriersData,xData
    //其他的不用关，
    var oneResponseData = {
         dom:one,
        //控制标题。
        title:'收入情况分析',
        //控制显示多少根线，多少个柱子
        legendData:['旅行社','酒店','景(区)点'],
        //控制线和柱子的高度。
        seriesData:[[30, 332, 201, 434, 190,],[434, 190,30, 332, 201],[134, 120,30, 132, 401]],
        //X轴日期数据
        xData :['10月10日', '10月12日', '10月13日', '10月14日', '10月15日'],
    }
    var twoResponseData = {
          dom:two,
        title:'旅游收入环比',
        legendData:[],
        xData :['2016/5', '2017/6', '207/8',],
        seriesData:[[170, 232, 401,]],
    }
    var threeResponseData = {
        dom:three,
        title:'旅游收入同比',
        legendData:['旅行社','酒店'],
        xData :['2016/5', '2017/6', '207/8',],
        seriesData:[[170, 232, 401,]],
    }
    var fourResponseData ={
         dom:four,
         title:'旅游收入占比',
         legendData:['旅行社','酒店'],
         seriesData:[
            {value:310, name:'旅行社'},
            {value:335, name:'酒店'},
            {value:235, name:'景点'},
        ],
        xData :'',
    }

//Echart图表的默认参数
     var oneMsg = {
       
        //设置线条或柱子颜色
        color:['#048f3C','#00BFFF','#1B1E7C','#E10074','#E10013','#FF6A6A','rgba(255,66,93,1)','#00FA9A','#006400','#B23AEE'],
        radius: null,
        roseType :null,
        legend:true,
        
        labelPosition:null,
        formatter: null,
        center: null,
        xname:'单位(人)',
        type:'line',
    }
    var twoMsg = {
        color:['#029060','#007BCB','#56187C','#E1005E','#E85604','rgba(230,179,64,1)','#FF7F24','rgba(39,73,98,1)',,'#8B1C62','#B03060'],
        radius: null,
        roseType :null,
        legend:true,
        labelPosition:null,
        formatter: null,
        center: null,

        xname:'单位(人)',
        type:'bar',
    }
    var threeMsg = {
        
        
        color:['#CDB5CD','rgba(255,94,72,1)','#4EEE94','#B23AEE','rgba(173,137,118,1)','rgba(255,156,128,1)','rgba(0,34,40,1)','#FF7F24'],
        radius: null,
        roseType :null,
        legend:true,
        labelPosition:null,
        formatter: null,
        center: null,

        xname:'单位(人)',
        type:'bar',
    }
    var fourMsg = {
        color:['#3DB393','#FF727B','#438AFF','#00F5FF','#458B00','#9370DB','#7A67EE'],
        radius: [0, 80],
        roseType :false,
        legend:true,
        areaStyle:'',
        labelPosition:'inner',
        formatter: function(params){
            return Math.round(params.percent) === 0 ? '' : Math.round(params.percent)+"%"  ;
        },
        center: ['40%', '60%'],
        xname:'',
        type:'pie',
        
        
    }

###echarts构造函数
var echartInstance = function(msg){
        this.dom = msg.dom;
        this.chartStyle= {
            title:{
                top:'8%',
                left:'6%',
                text: msg.title,
                textStyle:{
                    fontSize:14,
                }
            },
            color:msg.color,

            grid:{
                left:'6%',
                top:'32%',
            },
            legend:{
                show:msg.legend,
                orient: msg.type === 'pie' ?'vertical':'horizontal',
                top:msg.type === 'pie' ?'48%' : '20%',
                left:msg.type === 'pie' ?'60%':'6%',
                width:'20%',
                height:'35%',
                itemGap:10,
                itemWidth:15,
                itemHeight:10,
                textStyle:{
                    color:'black',
                },
                data:msg.legendData,
            },
            xAxis: {
                type: 'category',
                splitLine: {
                    show: false
                },
                axisTick:{
                    show:false,
                },
                axisLine:{
                    show:false,
                },
                axisLabel:{
                    margin:20,
                    fontSize:22,
                },
                data: msg.xData,
            },
            yAxis: {
                type: 'value',
                // name:msg.xname,
                nameLocation:'end',
                nameTextStyle:{
                    align:'left'
                },
                boundaryGap: [0, '100%'],
                splitLine: {
                    show: false,

                },
                axisLine:{
                    show:false,
                },
                axisLabel:{
                    inside:true,
                    formatter:function(params){
                        return params+'人'
                    }
                },
                axisTick:{
                    show:false,
                },
                splitLine:{
                    show:true,
                    lineStyle:{
                        color:'white',
                        shadowOffsetY:10,
                        shadowColor:'#DCDCDC',
                    }
                },
            },
            series:[
                ]
        };
        var _self = this;
        if (Object.prototype.toString.call(msg.seriesData[0]).slice(8,-1) === "Array") {
            msg.seriesData.forEach(function(item,index){
                var itemObj = {
                        name: msg.legendData[index],
                        type: msg.type,
                        radius: msg.radius,
                        center: msg.center,
                        roseType: msg.roseType,
                        label:{
                            normal:{
                                show: false,
                                position: msg.labelPosition,
                                formatter: msg.formatter,
                            },
                            emphasis:{
                                show: false
                            }
                        },
                        itemStyle:{
                            normal:{
                                color:msg.color[index],
                                borderColor:msg.color[index],
                                borderWidth:20,
                            },
                        },
                        lineStyle:{
                            normal:{
                                color:msg.color[index]
                            },
                        },
                        barWidth:10,
                        barGap:'250%',
                        smooth:true,
                        showSymbol: false,
                        hoverAnimation: false,
                        data:item,
                    }
                _self.chartStyle.series.push(itemObj)
            })
        }else{
            _self.chartStyle.series = [{
                    name: '往年',
                    type: msg.type,
                    radius: msg.radius,
                    center: msg.center,
                    roseType: msg.roseType,
                    label:{
                        normal:{
                            show: true,
                            position: msg.labelPosition,
                            formatter: msg.formatter,
                        },
                        emphasis:{
                            show: false
                        }
                    },
                    itemStyle:{
                        normal:{
                            color:msg.areaStyle[0],
                            borderColor:'rgba(0,0,0,0)',
                            borderWidth:20,
                        },
                    },
                    barWidth:24,
                    smooth:true,
                    showSymbol: false,
                    hoverAnimation: false,
                    data:msg.seriesData,
                    lineStyle:{
                        normal:{
                            color:msg.color[0]
                        },
                    },
                },]
        }
    };

    echartInstance.prototype.redom=function(){
        var _self = this;
        _self.echart = echarts.init(_self.dom);
        var option = {
            title: this.chartStyle.title,
            color: this.chartStyle.color,
            legend: this.chartStyle.legend,
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    animation: false
                }
            },
            grid:this.chartStyle.grid,
            xAxis: this.chartStyle.xAxis,
            yAxis: this.chartStyle.yAxis,
            series: this.chartStyle.series,
        };          
        if (option && typeof option === "object") {
            _self.echart.setOption(option, true);
        }
        window.onresize = function(){
            setTimeout(_self.echart.resize(),100);
        }
    }
    echartInstance.init = function(msg,responseData){
        $.extend(msg, responseData)
        var instance = new echartInstance(msg);
        instance.redom()
        return instance
    }

###初始化实例
    var oneEchart = echartInstance.init(oneMsg,oneResponseData);
    var twoEchart = echartInstance.init(twoMsg,twoResponseData);
    var threeEchart = echartInstance.init(threeMsg,threeResponseData);
    var fourEchart = echartInstance.init(fourMsg,fourResponseData);

Echarts二次封装--折线图，柱型图和饼图整合为一个
普通项目中常用的可视化图表，可能也就折线图，柱型图和饼图，如果每次都需要重新配置一遍图表参数，也会很心累，以下是我...
vue+elementUi+echarts 折线图组件
echarts官网效果 ? 此图并非折线图饼图联动折线图饼图联动组件飞机票 ?饼图点击事件再饼图组件中饼图组...
echarts的学习与实战大数据首页
关于echarts项目用到挺多，柱状图，折线图，进度图，指针图和饼图echarts的配置项比较多，用起来比较繁琐和...
2019-01-18 ECharts
今天接触了ECharts，ECharts 提供了常规的折线图、柱状图、散点图、饼图、K线图，用于统计的盒形图，用于...
vue+elementUi+echarts 折线图饼图联动组件
echarts官网效果图折线图饼图联动组件 LinePieChart.vue 父组件使用
ECharts插件使用
柱状图，折线图，饼图初始化echarts实例 1.准备一个div容器，为Echarts准备一个具备大小（宽高）的...
iOS 图表绘制
1,柱型图绘制 2,饼图效果如下
数据可视化图表ECharts
介绍： ECharts提供了折线图、柱状图、散点图、饼图、K线图，以及地图、热力图、关系图等多种图表API，并支持...
利用echarts实现python数据可视化
折线图条形图面积图饼状图地理信息可视化词云图不同图型叠加
echarts3 在一个canvas中同时绘制折线图和柱状图
echarts3 在一个canvas中同时绘制折线图和柱状图 series 是一个数组，可以同时包含各种图型的数据...