preface

When I was working on the project today, I needed to make a data presentation with Echarts. The general requirements are as follows

  • The front-end searches for a time of day, requests the back-end interface, and returns data
  • Show the number of requests, the number of intercepts, and the interception rate for that day

– Echarts ICONS need to be treated specially to show percentages

  • The following renderings are based on their own random numbers to show the effect

I made this diagram because I am not very familiar with Echarts, Baidu programming for a long time. If your needs are more or less the same, use them.

Begin to implement

First of all, I realized this effect in the VUE project, which was not practiced in other projects. However, it should be ok, but the syntax of VUE in it definitely needs to be changed

  • To use Echarts, you must install it in your own project

       npm install echarts --save
Copy the code

  • Specific use in the page

    1. Prepare containers. The width and height must be set. And the container must be visible at initialization. For example, you can’t hide the element with a command like v-if v-show, otherwise an error will be reported.

       <template>
       <div class="charts" ref="charts"></div>
   </template>
   <style scoped>
     .charts {
       width: 100%;
       height: 400px;
     }
   </style>
Copy the code

    1. The introduction of ECharts

      <script> import echarts from 'echarts/lib/echarts' import 'echarts/lib/chart/line' export default { methods: {getData () {// In normal projects, this is the place to request the interface to get the data. Charts = echarts.init(this.$refs.charts) // Initialize echarts instance const timeList = [] // X-axis data const data1 = [] // Const data2 = [] const data3 = [] for (var I = 0; i < 1440; I++) // 1440 is the number of minutes per day // this is to save the X-axis display data, TimeList [I] = moment((1629302400000 + (I * 6000000)).format('MM/DD HH: MM ') // data1[I] = moment((1629302400000 + (I * 6000000)).format('MM/DD HH: MM ') = parseInt(1000 * math.random ()) data2[I] = parseInt(data1[I] * math.random () ((data2[I] / data1[I]) * 100).tofixed (2)} const op = {// 'axis', formatter: Console. log(value) let name = '${value[0]. AxisValue}<br />' for (var I = 0; i < value.length; If (value[I]. SeriesName === 'seriesName ') {name +=' ${value[I]. SeriesName} : ${value[I]. ${value[i].value}%<br />` } else { name += `${value[i].seriesName} : ${value[i].value}<br />` } } return name } // '{b0}<br/>{a0}: {c0}<br />{a1}: {c1}<br />{a2}: {c2}%' }, legend: { data: [' request times', 'often', 'interception rate]}, the grid: {top:' 8% ', left: '3%', right: '4%', bottom: '5%' containLabel: true}, xAxis: {type: 'category', data: timeList // the data displayed on the X axis}, yAxis: [// The first object sets the data displayed on the left side {type: 'value', name: }, // Set the right display data {type: 'value', name: 'interception rate ', positon: 'right', // Generally the percentage from 0 to 100 min: 0, Max: 100, axisLabel: {show: true, interval: 'auto', formatter: '{value}%' // set the right display to xx%}, show: true}], series: [{data: }, {data: data2, type: 'line', name: 'line', stack: 'request ', type: 'line', symbol: 'none', {data: data2, type: 'line', name: {data: data3, type: 'line', name: 'stack ', stack:' stack ', symbol: 'none'}, {data: data3, type: 'line', name: 'stack ', yAxisIndex: 1, symbol: 'none' // itemStyle: { // normal: { // label: { // show: true, // positon: 'top', // formatter: '{b}\n{c}%' // } // } // } } ] } this.charts.setOption(op) }, } } </script>Copy the code
  1. Full page. You can use it directly in a new page of your project
<template> <div class="charts" ref="charts"></div> </template> <script> import echarts from 'echarts/lib/echarts' import  'echarts/lib/chart/line' export default { data () { return { } }, mounted () { this.getdata() window.onresize = () => { this.charts.resize() } }, methods: { getdata () { this.charts = echarts.init(this.$refs.charts) const timeList = [] const data1 = [] const data2 = [] const  data3 = [] for (var i = 0; i < 1440; i++) { timeList[i] = moment((1629302400000 + (i * 60000))).format('MM/DD HH:mm') data1[i] = parseInt(1000 * Math.random()) data2[i] = parseInt(data1[i] * Math.random()) data3[i] = ((data2[i] / data1[i]) * 100).toFixed(2) } const  op = { tooltip: { trigger: 'axis', formatter: value => { console.log(value) let name = `${value[0].axisValue}<br />` for (var i = 0; i < value.length; I++) {if (value [I] seriesName = = = 'interception rate') {name + = ` ${value [I] seriesName} : ${value[i].value}%<br />` } else { name += `${value[i].seriesName} : ${value[i].value}<br />` } } return name } // '{b0}<br/>{a0}: {c0}<br />{a1}: {c1}<br />{a2}: {c2}%' }, legend: { data: [' request times', 'often', 'interception rate]}, the grid: {top:' 8% ', left: '3%', right: '4%', bottom: '5%' containLabel: true}, xAxis: {type: 'category', data: timeList}, yAxis: [{type: 'value', name: 'number of requests/number of interceptions'}, {type: 'value', name: 'Interception rate ', Positon: 'right', min: 0, Max: 100, axisLabel: {show: true, interval: 'auto', formatter: '{value}%'}, show: True}], series: [{data: data1, name: 'number of requests ', stack:' number of requests ', type: 'line', symbol: 'none'}, {data: data2, type: 'number of requests ', symbol:' None '}, {data: data2, type: {data: data3, type: 'line', name: 'stack ', symbol: 'none'}, {data: data3, type: 'line', name:' stack ', symbol: 'none'}, {data: data3, type: 'line', name: 'stack ', symbol: 'none'}, {data: data3, type: 'line', name:' stack ', stack: 'Intercept rate ', yAxisIndex: 1, symbol:' None '// itemStyle: {// normal: {// label: {// show: true, // positon: 'top', // formatter: '{b}\n{c}%' // } // } // } } ] } this.charts.setOption(op) } } } </script> <style scoped> .charts { width: 100%; height: 400px; } </style>Copy the code