Echarts开发小技巧
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'
效果：
