renderings
The corresponding comments are all in the code,Later, other business needs will be updated synchronously
The ruoyi used by the project framework
Histogram code
<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>
pie chart
<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>
resize.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()
}
}
}
debounce
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
}
}
}