Echarts Secondary Packaging - Line Chart, Column Chart and Pie Chart in One

Visual charts commonly used in common projects, such as line charts, column charts, and pie charts, can be very tiring if you need to reconfigure the chart parameters once at a time. Here is my development practice of combining three tables.

Complete Requirements
  • Line chart, column chart and pie chart in one;
  • Chart data is separated from style by focusing only on the ResponseData parameter.
  • Default parameter items can be configured to modify the style according to their own project needs;
  • Perfect matching with back-end rendering, also front-end operation;
  • Migrating native painless surgery requires only $.extend(obj,addObj)

function

  • Can generate line, column, pie charts;
  • Charts can be adapted to window changes;
  • You can add methods to the constructor prototype chain, giving instances such as show,hide, and so on.

Future Flag s

If you want to rewrite it with function programming, you just haven't had time lately. There's only one way to think about it. Start with a Flag and don't upset Sky.

Code structure

####
var one = document.getElementById("one");
####
var oneResponseData = {
       dom:one,
      //Control the title.
      title:'Income situation analysis',
      //Control how many lines and columns are displayed
      legendData:['Travel Agency','Hotel','view(area)spot'],
      //Height of control lines and columns.
      seriesData:[[30, 332, 201, 434, 190,],[434, 190,30, 332, 201],[134, 120,30, 132, 401]],
      //X-axis date data
      xData :['10 10 January', '10 12 January', '10 13 January', '10 14 January', '10 15 January'],
  }
####
var oneMsg = {
     
      //Set line or column color
      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:'Company(people)',
      type:'line',
  }
####Constructor
var echartInstance
echartInstance.prototype.redom
echartInstance.init =function(msg){
  new echartInstance(msg);
}
####Pass-through, instantiate the chart;
oneEcharts = echartInstance.init(msg,oneResponse)

Case Display

Paste out all the code below

    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 correspond to the corresponding data object, only need to modify title,legendData,seriersData,xData
    //Others don't need to be turned off.
    var oneResponseData = {
         dom:one,
        //Control the title.
        title:'Income situation analysis',
        //Control how many lines and columns are displayed
        legendData:['Travel Agency','Hotel','view(area)spot'],
        //Height of control lines and columns.
        seriesData:[[30, 332, 201, 434, 190,],[434, 190,30, 332, 201],[134, 120,30, 132, 401]],
        //X-axis date data
        xData :['10 10 January', '10 12 January', '10 13 January', '10 14 January', '10 15 January'],
    }
    var twoResponseData = {
          dom:two,
        title:'Ring ratio of tourism revenue',
        legendData:[],
        xData :['2016/5', '2017/6', '207/8',],
        seriesData:[[170, 232, 401,]],
    }
    var threeResponseData = {
        dom:three,
        title:'Travel revenue year-on-year',
        legendData:['Travel Agency','Hotel'],
        xData :['2016/5', '2017/6', '207/8',],
        seriesData:[[170, 232, 401,]],
    }
    var fourResponseData ={
         dom:four,
         title:'Percentage of Travel Revenue',
         legendData:['Travel Agency','Hotel'],
         seriesData:[
            {value:310, name:'Travel Agency'},
            {value:335, name:'Hotel'},
            {value:235, name:'Scenic spot'},
        ],
        xData :'',
    }
//Default parameters for Echart charts
     var oneMsg = {
       
        //Set line or column color
        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:'Company(people)',
        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:'Company(people)',
        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:'Company(people)',
        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 constructor
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+'people'
                    }
                },
                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: 'Previous years',
                    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
    }
###Initialize 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);

Tags: Programming

Posted on Tue, 09 Jun 2020 12:32:45 -0400 by jalbey