background
Recently, I made a simple project of Vue + ELE background management system. Different from the previous project, I need to realize 3 Echart data graphs and some data display in the last page of VUE background management system. The specific implementation effect is shown in the figure below:
Problem description and method summary
In fact, the concrete implementation is not complicated, but also unavoidably stepped on some pits. The summary here is as follows
Every installation
Once you’ve installed Echarts, you’ll need to do an import. Don’t forget this step, otherwise you won’t be able to do it after initialization.
import * as echarts from 'echarts';
Copy the codeObtaining Echart’s DOM was unsuccessful
Echart needs to be drawn in a box with width and height, so you need to get a DOM first. But there is a problem with retrieving the DOM
Finally, I thought about echart to obtain a DOM, but I used to put the relevant code in the CREATED stage, there is no DOM, how can obtain DOM success?
Change the code to the mounted, and checked the dom method to obtain the document. The getElementById (document. GetElementsByClassName can also be), then get to the dom. In addition, it should be noted that echart charts such as PaymentOrderChart after initialization need to be saved in data, because after data is retrieved, setOption in PaymentOrderChart needs to be executed to reset the data. The code is as follows:
Mounted () {/ / payment orders trend line chart let PaymentOrderChartDom = document. The getElementsByClassName (' payment_order_body) [0]; this.PaymentOrderChart = echarts.init(PaymentOrderChartDom); let PaymentOrderChartOption = this.PaymentOrderChartOption PaymentOrderChartOption && this.PaymentOrderChart.setOption(PaymentOrderChartOption,true); / / capture to expend amount trend line chart let PaymentAmountChartDom = document. The getElementsByClassName (' payment_amount_body) [0]; this.PaymentAmountChart = echarts.init(PaymentAmountChartDom); let PaymentAmountChartOption = this.PaymentAmountChartOption PaymentAmountChartOption && this.PaymentAmountChart.setOption(PaymentAmountChartOption,true); / / capture to expend amount distribution pie charts let PayContributeChartDom = document. The getElementsByClassName (' pay_contribute_body) [0]; this.PayContributeChart = echarts.init(PayContributeChartDom); let payContributeOption = this.payContributeOption payContributeOption && this.PayContributeChart.setOption(payContributeOption,true); let that = this setTimeout(function (){ window.onresize = function () { that.PaymentOrderChart.resize(); that.PaymentAmountChart.resize(); that.PayContributeChart.resize() } },200) },Copy the codeEcharts diagrams do not change size
When you drag and drop the browser window, the ICONS will only appear at the original rendered size, causing the diagram to be abnormally large or small
let that = this
setTimeout(function (){
window.onresize = function () {
that.PaymentOrderChart.resize();
that.PaymentAmountChart.resize();
that.PayContributeChart.resize()
}
},200)
Copy the codeAfter the query conditions change and the data is retrieved again, the diagram shows the data stack
This problem is very simple, that is, after the query condition changes, the original data storage array needs to be emptied, otherwise after pushing in, the data displayed is the original data plus the newly acquired data.
/ / to get orders payment amount trend line chart async getPaymentOrderCountAndAmount () {/ / empty before each obtain new data chart data enclosing PaymentOrderChartOption. XAxis. Data = [] this.PaymentOrderChartOption.series[0].data = [] this.PaymentAmountChartOption.xAxis.data = [] this.PaymentAmountChartOption.series[0].data = [] let {data:arr}= await getPaymentOrder(this.queryBean) arr.forEach(item=>{ this.PaymentOrderChartOption.xAxis.data.push(item.dateNo) this.PaymentOrderChartOption.series[0].data.push(item.totalCount) this.PaymentAmountChartOption.xAxis.data.push(item.dateNo) This. PaymentAmountChartOption. Series [0]. Data. Push (item. The totalAmount)}) / / payment orders trend line chart. This update PaymentOrderChart. The clear () Enclosing PaymentOrderChart. SetOption (enclosing PaymentOrderChartOption, true) / / update payment order value of trend line chart. This PaymentAmountChart. The clear () this.PaymentAmountChart.setOption(this.PaymentAmountChartOption,true) },Copy the codeObtain the pie chart of payment amount distribution, and transform the data returned from the background
Async getPayContributeAmount(){let {data:obj} = await getPayContribute(this.querybean) let arr = [] for (let key in obj){ let temp = {} temp.value = obj[key] if (key === 'totalAmount') continue if( key === 'fifty') Temp. Name ='100~ 100 'if(key === 'twoHundred') temp. Name ='100~ 100' if(key === 'twoHundred') temp. Name ='100~200 'if(key === 'twoHundred') temp. Name ='100~200' if(key === 'twoHundred' Temp. Name =' 300 ~300 'if(key === 'moreHundred') temp. Name =' moreHundred' arr. Push (temp)} This. PayContributeOption. Series [0]. The data = arr/pie chart/update payment distribution enclosing PayContributeChart. The clear () this.PayContributeChart.setOption(this.payContributeOption,true) }Copy the codeCustom Tooltip in Echart
Tooltips are tooltips for each data point displayed over the mouse, which can be set in the chart data option. For both line charts and pie charts, the formatting and display of the prompt can be defined in the return value of the formatter defined. Note that the formatter function retrieves the parameter Params that contains almost all of the data for this data point. The interesting thing is that the string returned by the Formatter in the line chart recognizes
, but the string returned by the Formatter in the pie chart does not recognize < BR >.
// PaymentOrderChart:null, PaymentOrderChartOption:{tooltip: {show:true, trigger: 'axis, the formatter: (params) = > {return ` ${params [0]. Name the length = = = 8?' date ':' time '} : ${params [0]. Name} ${params [0]. Name the length = = = 8? "' : 'when'} < br > ${params [0]. Marker} orders: ${params [0], value} a `}}, xAxis: {type: 'category', name:' time ', nameLocation:'middle', nameTextStyle:{fontSize:18,}, nameGap:30, data: []}, yAxis:{type: 'value', name:' paid order ', nameLocation: 'middle', nameTextStyle:{ fontSize:18, }, nameGap:40 }, series: [ { data: [], type: 'line' } ] },Copy the codePaycontributecart: NULL, payContributeOption:{tooltip: {trigger: 'item'}, legend: {top: paycontributecart :null, payContributeOption:{tooltip: {trigger: 'item'}, legend: {top: '25%' right: '20%' data: [' less than $50 ', '50 ~ 100 yuan', '100 ~ 200 yuan', '200 ~ 300 yuan', 'more than 300 yuan'], / / the left: 'center' Orient :'vertical', itemGap:25}, series: [{name: 'Orient ', type: 'pie', left:'-30%', radius: ['40%', '70%'], avoidLabelOverlap: true, itemStyle: { borderRadius: 10, borderColor: '#fff', borderWidth: 2 }, label: { show: false, position: 'center' }, emphasis: { label: { show: true, fontSize: '20', fontWeight: 'bold', formatter:(params)=>{ return `${params.name} ${params.percent}%` } } }, labelLine: { show: false }, data: [// format: // {value: 1048, name: 'Search Engine'},]}]}Copy the codeAll display data and ICONS on the page need to be updated as the search box selection value changes.
This item means that the page data needs to be retrieved when the selection value of the search box changes
QueryBean: {deptId: undefined, chargeTimeBegin: undefined, chargeTimeEnd: undefined,},Copy the codeIf a parameter affects retrieving data, this is just right for Watch (not for computed, because only synchronization is supported in computed), immediately arrange functions that retrieve parameters into the Watch monitor. The result is perfect
Watch: {queryBean: {handler (val, oldVal) {/ / for prepaid phone number this. GetSelectConsNoCount () / / payment information this. GetPayDataList () Enclosing getSorderDataList () enclosing getRefundDataList ()/amount/payment orders and enclosing getPaymentOrderCountAndAmount number () / / organization contribution Enclosing getOrganContributeList () / / equipment contribution ranking enclosing getEquipContributeList () / / for this. The pie chart data capture to expend amount distribution getPayContributeAmount ()}, deep:true } },Copy the codeWrite in the last
In fact, I think it is not terrible to find problems. Some of the problems I found in the project were solved by Baidu, and many others were corrected by thinking about the code principles. For example, the first example “DOM cannot be obtained”. If the DOM cannot be obtained, either the DOM does not exist, or the method of obtaining the DOM is incorrect. When you can be sure it’s written correctly, the DOM itself doesn’t exist (and NextTick can fix that, too). The life cycle of the VUE came naturally and solved the problem.
Well, thanks for watching and leave any questions in the comments section. If help you, welcome to like collection oh! Bow!