representaciones
Los comentarios correspondientes están todos en el código,Se actualizará sincrónicamente cuando se encuentren otras necesidades comerciales en el período posterior.
El ruoyi utilizado por el marco del proyecto.
Código de histograma
<template>
<div :class="className" :style="{height:height,width:width}" />
</template>
<script>
import * as echarts from 'echarts';
require('echarts/theme/macarons') // echarts theme
import resize from './mixins/resize'
export default {
mixins: [resize],
props: {
className: {
type: String,
default: 'chart'
},
width: {
type: String,
default: '100%'
},
height: {
type: String,
default: '300px'
}
},
data() {
return {
chart: null
}
},
mounted() {
this.$nextTick(() => {
this.initChart()
})
},
beforeDestroy() {
if (!this.chart) {
return
}
this.chart.dispose()
this.chart = null
},
methods: {
initChart() {
this.chart = echarts.init(this.$el, 'macarons')
this.chart.setOption({
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
// 右上角 图示
legend: {
x: 'right',
// 图示调整距离
padding:[20,60,0,0],
// 图示的图标形状
icon: 'circle'
},
// 图形定位调整
grid: {
left: '3%',
right: '4%',
bottom: '5%',
containLabel: true
},
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
axisLine: {
//横轴样式
lineStyle: {
color: '#869fc8',
},
},
showBackground: false,
// 网格区域背景颜色
splitArea : {show : false}
},
yAxis: {
type: 'value',
axisLine: {
// 数轴样式
lineStyle: {
color: '#869fc8',
},
},
showBackground: false,
// 网格区域背景颜色
splitArea : {show : false}
},
series: [
{
name: '使用中',
data: [120, 200, 150, 80, 70, 110, 130],
type: 'bar',
barWidth: '13%',
barGap: '70%',
showBackground: false,
itemStyle: { //柱状颜色和圆角
color: '#fdaa0a',
barBorderRadius: [10, 10, 6, 6], // （顺时针左上，右上，右下，左下）
}
},
{
name: '未使用',
data: [150, 100, 100, 100, 10, 20, 40],
type: 'bar',
// 柱状图宽度
barWidth: '13%',
barGap: '70%',
showBackground: false,
itemStyle: { //柱状颜色和圆角
color: '#16dbcc',
barBorderRadius: [10, 10, 8, 8], // （顺时针左上，右上，右下，左下）
}
}
]
})
}
}
}
</script>
Gráfico circular
<template>
<div :class="className" :style="{height:height,width:width}" />
</template>
<script>
import * as echarts from 'echarts';
require('echarts/theme/macarons') // echarts theme
import resize from './mixins/resize'
export default {
mixins: [resize],
props: {
className: {
type: String,
default: 'chart'
},
width: {
type: String,
default: '100%'
},
height: {
type: String,
default: '300px'
}
},
data() {
return {
chart: null
}
},
mounted() {
this.$nextTick(() => {
this.initChart()
})
},
beforeDestroy() {
if (!this.chart) {
return
}
this.chart.dispose()
this.chart = null
},
methods: {
// tooltip: {
// trigger: 'item',
// formatter: '{a} <br/>{b} : {c} ({d}%)'
// },
initChart() {
this.chart = echarts.init(this.$el, 'macarons')
this.chart.setOption({
color: ['#16dbcc', '#ff82ac', '#4d78ff', '#ffbb38'],
// 根据数据 设置遮罩
// visualMap: {
// show: false,
// min: 80,
// max: 600,
// inRange: {
// colorLightness: [0, 1]
// }
// },
series: [
{
name: 'Access From',
type: 'pie',
radius: '85%',
center: ['50%', '50%'],
data: [
{ value: 235, name: '社区'},
{ value: 335, name: '公园'},
{ value: 310, name: '行政村'},
{ value: 300, name: '健身广场'}
]
// 排序
// .sort(function (a, b) {
// return a.value - b.value;
// })
,
roseType: 'radius',
label: {
normal:{
show: true,
// 内部显示文字
position: 'inner',
fontSize: 15,
color: '#FFFFFF',
// 格式化数值百分比输出
formatter: '{b} \n {d}%'
}
},
labelLine: {
lineStyle: {
color: 'rgba(255, 255, 255, 0.3)'
},
smooth: 0.2,
length: 10,
length2: 20
},
// 固定颜色，配合 visualMap 实现深浅
itemStyle: {
borderWidth: 5,
borderColor: '#fff'
},
animationType: 'scale',
animationEasing: 'elasticOut',
animationDelay: function (idx) {
return Math.random() * 200;
}
}
]
})
}
}
}
</script>
redimensionar.js
import {
debounce } from '@/utils'
export default {
data() {
return {
$_sidebarElm: null,
$_resizeHandler: null
}
},
mounted() {
this.initListener()
},
activated() {
if (!this.$_resizeHandler) {
// avoid duplication init
this.initListener()
}
// when keep-alive chart activated, auto resize
this.resize()
},
beforeDestroy() {
this.destroyListener()
},
deactivated() {
this.destroyListener()
},
methods: {
// use $_ for mixins properties
// https://vuejs.org/v2/style-guide/index.html#Private-property-names-essential
$_sidebarResizeHandler(e) {
if (e.propertyName === 'width') {
this.$_resizeHandler()
}
},
initListener() {
this.$_resizeHandler = debounce(() => {
this.resize()
}, 100)
window.addEventListener('resize', this.$_resizeHandler)
this.$_sidebarElm = document.getElementsByClassName('sidebar-container')[0]
this.$_sidebarElm && this.$_sidebarElm.addEventListener('transitionend', this.$_sidebarResizeHandler)
},
destroyListener() {
window.removeEventListener('resize', this.$_resizeHandler)
this.$_resizeHandler = null
this.$_sidebarElm && this.$_sidebarElm.removeEventListener('transitionend', this.$_sidebarResizeHandler)
},
resize() {
const {
chart } = this
chart && chart.resize()
}
}
}
rebote
export function debounce(func, wait, immediate) {
let timeout, args, context, timestamp, result
const later = function() {
// 据上一次触发时间间隔
const last = +new Date() - timestamp
// 上次被包装函数被调用时间间隔 last 小于设定时间间隔 wait
if (last < wait && last > 0) {
timeout = setTimeout(later, wait - last)
} else {
timeout = null
// 如果设定为immediate===true，因为开始边界已经调用过了此处无需调用
if (!immediate) {
result = func.apply(context, args)
if (!timeout) context = args = null
}
}
}