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

• 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)

• 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.

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.

#### 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)

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:[ , , , ], 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);

9 June 2020, 12:32 | Views: 7064