调接口渲染echarts+加定值横线求平均值+柱体中显示数据+鼠标悬浮柱体自定义数据显示格式+x轴文字倾斜

在这里插入图片描述

1、创建div

      <div id="anaysisEcharts" style="width: 100%; height: 95%"></div>

2、引入echarts和封装好的接口

import echarts from 'echarts'
import { totalAnaysis } from '@/api/billOrder'

3、在mounted中新增两个方法,一个用来初始化echarts,一个用来获取数据

this.initEaharts()
    this.initData()

4、在mothods中获取数据和绘制图表

initData() {
      totalAnaysis().then(res => {
        // console.log(res,'统计分析图表数据');
        let xData = [],
          yData = []
        res.data.forEach(item => {
          xData.push(item.name)
          yData.push(item.count)
        })
        //调用 this.initEahart,传值进去
        this.initEaharts(xData, yData)
      })
    },

在这里插入图片描述

在这里插入图片描述

initEaharts(xData = [], yData = []) {
      // 绘制图表
      this.echart = echarts.init(document.getElementById('anaysisEcharts'))
      this.echart.setOption({
        backgroundColor: '#fff',
        tooltip: { trigger: 'item' ,
       ***

## //鼠标悬浮柱体自定义数据显示格式,先打印params看下数据格式,里面有我们需要的数据,如上图所示

***
        formatter:function(params){
          // console.log(params);
          let name = params.name;
          let count = params.data;
          return '名称:'+name+'<br>'+'xx数量:'+count
        }
        },
        xAxis: {
          axisTick: { show: true },
          axisLine: { show: true },
          axisLabel: {
            textStyle: {
              color: '#9B9B9B',
              fontSize: 14
            },
            ***

## //       x轴文字倾斜,在 axisLabel中设置rotate的值

***
            rotate: 40
          },
          data: xData
        },
        grid: {
          left: '5%',
          right: '5%',
          top: '10%',
          bottom: '2%',
          containLabel: true
        },
        yAxis: {
          // name: 'title',
          axisTick: { show: true }, //y轴刻度线
          axisLine: { show: true }, //y轴竖线
          splitLine: { lineStyle: { type: 'solid' } } //y轴内容区横线
        
        },
        dataZoom: [{ type: 'inside' }],
        // toolbox: { right: 32, feature: { magicType: { type: ['bar', 'line'] } } },
        series: [
          {
            // name: '时间',
            type: 'bar',
            barMaxWidth: 60,
            itemStyle: { color: '#FF2D2D' },
            ***## 定值横线以及求平均值以及定值横线取消tooltip提示***
            markLine: {
              symbol: ['none', 'arrow'], //['none']表示是一条横线;['arrow', 'none']表示线的左边是箭头,右边没右箭头;['none','arrow']表示线的左边没有箭头,右边有箭头
              label: {
                position: 'end' //将警示值放在哪个位置,三个值“start”,"middle","end" 开始 中点 结束
              },
              data: [
                {
                  tooltip:{show:false},
                  type:'average',
                  silent: true, //鼠标悬停事件 true没有,false有
                  lineStyle: {
                    //警戒线的样式 ,虚实 颜色
                    type: 'dotted', //样式  ‘solid’和'dotted'
                    color: '#FF2D2D',
                    width: 1 //宽度
                  },
                  // yAxis: 20 // 警戒线的标注值,可以有多个yAxis,多条警示线 或者采用 {type : 'average', name: '平均值'},type值有 max min average,分为最大,最小,平均值
                }
              ]
            },
            label: {
            ***

## //在柱体中显示数据,在series中设置label为true,如果要在最顶端显示,再加个position: 'top' 在最顶端显示
## 注意这里用到的 formatter是为了过滤数据为0则不显示,不然label为true的时候,数据为0 的也会显示,如上图所示
***
              show: true,
              formatter: function(params) {
                if (params.value > 0) {
                  return params.value
                } else {
                  return ' '
                }
              }
            }, 
            data: yData
          }
        ]
      })
      this.echart.on('magictypechanged', params => {
        this.echart.setOption({ xAxis: { boundaryGap: true } })
      })
    }
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值