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，放置柱状图直接订到头，不好看

效果：

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

设置在柱状图中显示数字

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

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

效果

设置图例分页

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

在 legend 中添加如下代码

type: 'scroll'

效果：