Echarts开发小技巧

格式化数字，三个数字一个逗号

export function parseNumber(num) {
    try {
        let newNum = parseInt(num)
        return newNum.toLocaleString()
    } catch (error) {
        return 0
    }
}

环形图添加百分比显示

在 series 中添加如下代码表示在页面上会显示百分比

label: {
    formatter(val) {
        return `${val.name} ${parseNumber(val.value)} (${val.percent}%)`
    }
}

在 tooltip 中添加如下代码，会在鼠标悬浮上去时显示百分比,其中 val.marker 表示每个颜色小圆点

formatter(val) {
    return `${val.marker}${val.name} ${parseNumber(val.value)} (${val.percent}%)`
}

图示

设置柱状图的x轴位置倾斜

在 xAxis 中添加如下代码即可实现文字倾斜，在文字过长时使用

axisLabel: {
    rotate: 20 // 倾斜30度
}

图示

修改环形图圆环大小

在 series 中添加 radius，第一个数字表示中心圆的大小，数字越大，中心的圆越大。第二个数字表示环形图本身的大小

图示

x轴数据过长时显示滚动条

和 xAxis 平级添加如下代码即可实现滚动条

dataZoom: [
    {
        type: 'slider',
        realtime: true,
        start: 0,
        end: 40, // 数据窗口范围的结束百分比。范围是：0 ~ 100。
        height: 20, // 组件高度
        left: 5, // 左边的距离
        right: 5, // 右边的距离
        bottom: 10, // 下边的距离
        show: true, // 是否展示
        fillerColor: 'rgba(17, 100, 210, 0.42)', // 滚动条颜色
        borderColor: 'rgba(17, 100, 210, 0.12)',
        handleSize: 0, // 两边手柄尺寸
        showDetail: false, // 拖拽时是否展示滚动条两侧的文字
        zoomLock: true, // 是否只平移不缩放
        moveOnMouseMove: false // 鼠标移动能触发数据窗口平移
        // zoomOnMouseWheel: false, //鼠标移动能触发数据窗口缩放
    },
    {
        type: 'inside', // 支持内部鼠标滚动平移
        start: 0,
        end: 40,
        zoomOnMouseWheel: false, // 关闭滚轮缩放
        moveOnMouseWheel: true, // 开启滚轮平移
        moveOnMouseMove: true // 鼠标移动能触发数据窗口平移
    }
],

图示

添加局部Loading

首先封装 loading.js

import Vue from 'vue'
 
// loading框设置局部刷新，且所有请求完成后关闭loading框
let loading
let needLoadingRequestCount = 0 // 声明一个对象用于存储请求个数
function startLoading (targetdq) {
  loading = Vue.prototype.$loading({
    lock: true,
    text: '', // 显示的loading文字
    background: 'rgba(255,255,255,.4)',
    target: document.querySelector(targetdq) // 设置加载动画区域
  })
}
 
function endLoading () {
    loading.close()
}
export function showLoading (targetdq) {
  if (needLoadingRequestCount === 0) {
    startLoading(targetdq)
  }
  needLoadingRequestCount++
}
export function hideLoading () {
  if (needLoadingRequestCount <= 0) return
  needLoadingRequestCount--
  if (needLoadingRequestCount === 0) {
    endLoading()
  }
}
 
export default {
  showLoading,
  hideLoading
}

然后导出使用

import { showLoading, hideLoading } from '../../../utils/loading'

showLoading('.b-white')

setTimeout(() => {
    hideLoading()
}, 2000);

效果

设置数据的最大值，不让柱状图直接顶到头

在 xAxis 中设置 max，放置柱状图直接订到头，不好看

效果：

上图中左右对比图的实现代码

<template>
  <div class="card b-white" style="height: 950px">
    <p class="chart-title">{{ title }}</p>
    <Echarts class="chart-pane" height="95%" :dom-id="domId" :options="data" />
  </div>
</template>
<script>
import Echarts from '@/components/Echarts'
import { getCustomerDistributionInfo } from '@/api/report'
import { showLoading, hideLoading } from '../../../utils/loading'
export default {
  components: { Echarts },
  props: ['year'],
  data() {
    return {
      title: `客户分布情况；左${this.year}，右${this.year - 1}`,
      type: '',
      domId: Math.random(),
      data: {}
    }
  },
  watch: {
    year(val) {
      this.getData()
    }
  },
  mounted() {
    this.getData()
  },
  methods: {
    getData() {
      showLoading('.b-white')
      getCustomerDistributionInfo().then((res) => {
        hideLoading()
        console.log(res.data.rows)
        const data2022 = []
        const data2021 = []
        // 右边的图
        res.data.rows.right.forEach((item, index) => {
          data2021.push({
            name: item.name,
            type: 'bar',
            stack: 'Total' + index,
            barWidth: '15',
            label: {
              show: true,
              position: 'inside'
            },
            emphasis: {
              focus: 'series'
            },
            data: item.data
          })
        })
        // 左边的图
        res.data.rows.left.forEach((item, index) => {
          data2022.push({
            name: item.name,
            type: 'bar',
            stack: 'Total' + index,
            label: {
              show: true,
              position: 'inside',
              formatter(value) {
                if (value.data < 0) {
                  return -value.data
                }
              }
            },
            emphasis: {
              focus: 'series'
            },
            data: item.data.map((i) => i * -1)
          })
        })

        const that = this

        this.data = {
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'shadow'
            },
            formatter(val) {
              return `
                
                ${that.year}<br>
                ${val[7].marker}${val[7].seriesName}\t
                ${val[7].value < 0 ? val[7].value * -1 : val[7].value}<br>
                ${val[8].marker}${val[8].seriesName}\t
                ${val[8].value < 0 ? val[8].value * -1 : val[8].value}<br>
                ${val[9].marker}${val[9].seriesName}\t
                ${val[9].value < 0 ? val[9].value * -1 : val[9].value}<br>
                ${val[10].marker}${val[10].seriesName}\t
                ${val[10].value < 0 ? val[10].value * -1 : val[10].value}<br>
                ${val[11].marker}${val[11].seriesName}\t
                ${val[11].value < 0 ? val[11].value * -1 : val[11].value}<br>
                ${val[12].marker}${val[12].seriesName}\t
                ${val[12].value < 0 ? val[12].value * -1 : val[12].value}<br>
                ${val[13].marker}${val[13].seriesName}\t
                ${val[13].value < 0 ? val[13].value * -1 : val[13].value}<br>
                ${that.year - 1}<br>
                ${val[0].marker}${val[0].seriesName}\t
                ${val[0].value < 0 ? val[0].value * -1 : val[0].value} <br>
                ${val[1].marker}${val[1].seriesName}\t
                ${val[1].value < 0 ? val[1].value * -1 : val[1].value} <br>
                ${val[2].marker}${val[2].seriesName}\t
                ${val[2].value < 0 ? val[2].value * -1 : val[2].value}<br>
                ${val[3].marker}${val[3].seriesName}\t
                ${val[3].value < 0 ? val[3].value * -1 : val[3].value}<br>
                ${val[4].marker}${val[4].seriesName}\t
                ${val[4].value < 0 ? val[4].value * -1 : val[4].value}<br>
                ${val[5].marker}${val[5].seriesName}\t
                ${val[5].value < 0 ? val[5].value * -1 : val[5].value}<br>
                ${val[6].marker}${val[6].seriesName}\t
                ${val[6].value < 0 ? val[6].value * -1 : val[6].value}
              `
            }
          },
          legend: {},
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
          },
          xAxis: [
            {
              type: 'value',
              max: (value) => {
                console.log(value) // value是包含数值最大最小值的对象
                return value.max + 2
              },
              min: (value) => {
                console.log(value) // value是包含数值最大最小值的对象
                return (value.max + 2) * -1
              },
              axisLabel: {
                // 把x轴的负数改成正数
                formatter(value) {
                  if (value < 0) {
                    return -value
                  } else {
                    return value
                  }
                }
              }
            }
          ],
          yAxis: [
            {
              type: 'category',
              axisTick: {
                show: false
              },
              data: [
                '0-50万',
                '50-100万',
                '100-300万',
                '300-500万',
                '500万以上'
              ]
            }
          ],
          series: [...data2021, ...data2022]
        }
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.chart-title {
  font-size: 15px;
  padding: 10px;
  background: #fff;
}
.card {
  padding: 10px;
  background: white;
}
</style>

设置在柱状图中显示数字

在 series 中添加 position，表示数字的显示位置

label: {
    show: true,
        position: 'top',
            color: 'black'
}

效果

设置图例分页

当图例过多时，会拥挤到一块不好看，我们通过让图例分页，只在一行展示

在 legend 中添加如下代码

type: 'scroll'

效果：