vue项目使用echarts展示数据之左数值，右百分比显示

前端的一条咸菜鱼
1,004 阅读1分钟
前言

今天在做项目的时候，需要用echarts做一个数据展示，大概需求如下

  • 前端搜索某一天时间，请求后端接口，返回数据
  • 展示这一天数据的请求次数，拦截次数，和拦截率 — 因为要展示百分比所以要对echarts图标做特殊处理
  • 如下效果图是根据自己写的随机数展示效果

自己做出这个图因为对echarts不是很熟练，百度编程了很久。如果你的需求差不多一样，可以借鉴使用。

开始实现

首先我这个效果是在vue项目实现的，其他项目没有实践。不过应该也可以，但是里面vue的语法肯定需要更换

  • 要使用echarts，肯定是要在自己的项目安装他

       npm install echarts --save

  • 在页面中具体使用

    1.准备容器，必须设置宽高。而且在初始化的时候这个容器必须是要显示的，比如说不能用 v-if v-show等命令隐藏这个元素，否则会报错。

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

    1. 引入 ECharts

         <script>
      import echarts from 'echarts/lib/echarts'
      import 'echarts/lib/chart/line'
      export default {
        methods: {
           getdata () {
             // 正常在做项目的时候，这个地方应该是请求接口拿到数据，这个地方为了方便，使用了自己生成的数据
             this.charts = echarts.init(this.$refs.charts) // 初始化echarts实例
             const timeList = [] //X轴数据
             const data1 = [] // 请求次数数据
             const data2 = [] // 拦截次数数据
             const data3 = [] // 拦截率数据
             for (var i = 0; i < 1440; i++) // 1440是一天分钟数量
             // 这是保存X轴显示的数据，因为我的需求是一天每隔一分钟的数据
               timeList[i] = moment((1629302400000 + (i * 60000))).format('MM/DD HH:mm')
               // 这里随机生成的1000以内的数字
               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: { 鼠标移动到echarts时显示控制
                 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 === '拦截率') { 
                       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: ['请求次数', '拦截次数', '拦截率']
               },
               grid: {
                 top: '8%',
                 left: '3%',
                 right: '4%',
                 bottom: '5%',
                 containLabel: true
               },
               xAxis: {
                 type: 'category',
                 data: timeList // X轴显示的数据
               },
               yAxis: [
               // 第一个对象设置左边显示的数据
                 {
                   type: 'value',
                   name: '请求次数/拦截次数'
                 },
                 // 设置右边显示数据
                 {
                   type: 'value',
                   name: '拦截率',
                   positon: 'right',
                   // 一般情况下百分比从0到100
                   min: 0,
                   max: 100,
                   axisLabel: {
                     show: true,
                     interval: 'auto',
                     formatter: '{value}%' //设置右边显示为xx%
                   },
                   show: true
                 }
               ],
               series: [
                 {
                   data: data1,
                   name: '请求次数',
                   stack: '请求次数',
                   type: 'line',
                   symbol: 'none' // 取消折线图圆点
                 },
                 {
                   data: data2,
                   type: 'line',
                   name: '拦截次数',
                   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>
  1. 完整页面。 可以直接在自己项目一个新页面使用
   <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 === '拦截率') {
                  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: ['请求次数', '拦截次数', '拦截率']
          },
          grid: {
            top: '8%',
            left: '3%',
            right: '4%',
            bottom: '5%',
            containLabel: true
          },
          xAxis: {
            type: 'category',
            data: timeList
          },
          yAxis: [
            {
              type: 'value',
              name: '请求次数/拦截次数'
            },
            {
              type: 'value',
              name: '拦截率',
              positon: 'right',
              min: 0,
              max: 100,
              axisLabel: {
                show: true,
                interval: 'auto',
                formatter: '{value}%'
              },
              show: true
            }
          ],
          series: [
            {
              data: data1,
              name: '请求次数',
              stack: '请求次数',
              type: 'line',
              symbol: 'none'
            },
            {
              data: data2,
              type: 'line',
              name: '拦截次数',
              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>

<style scoped>
.charts {
  width: 100%;
  height: 400px;
}
</style>
avatar
文章
阅读
粉丝