Skip to content

M
mini-wms
Commit 686016df by ningjihai
Options

首页

parent c5ac9fed
正在显示 包含 347 行增加 和 1 行删除
ruoyi-admin-vue/package.json
......@@ -28,7 +28,7 @@
"axios": "0.28.1",
"clipboard": "2.0.8",
"core-js": "3.37.1",
"echarts": "5.4.0",
"echarts": "^5.4.0",
"element-ui": "2.15.14",
"file-saver": "2.0.5",
"fuse.js": "6.4.3",
......
ruoyi-admin-vue/src/assets/styles/index.scss
......@@ -228,3 +228,4 @@ aside {
margin-bottom: 10px;
}
}
ruoyi-admin-vue/src/components/kucunchart.vue 0 → 100644
<template>
<div class="chart-container-content">
<div ref="chart" :style="{ width: '100%', height: '100%' }"></div>
</div>
</template>
<script>
// 方式1：全局引入时不需要这行
// 方式2：按需引入时需要
import * as echarts from 'echarts'
// import 'echarts-liquidfill'
export default {
name: 'EchartsDemo',
props: {
width: {
type: String,
default: '100%'
},
height: {
type: String,
default: '400px'
},
option: {
type: Object,
default: () => ({})
},
chartList: {
type: Array,
default: () => []
}
},
data() {
return {
chart: null
}
},
watch: {
chartList: {
handler(newVal) {
console.log('newVal',newVal)
if (newVal) {
this.initChart()
}
},
deep: true
},
width() {
this.$nextTick(() => {
this.chart && this.chart.resize()
})
},
height() {
this.$nextTick(() => {
this.chart && this.chart.resize()
})
}
},
mounted() {
//
},
beforeDestroy() {
if (this.chart) {
this.chart.dispose()
this.chart = null
}
},
methods: {
initChart() {
// 如果全局引入了，可以使用 this.$echarts
// 如果按需引入了，使用 import 的 echarts
const echartsInstance = this.$echarts || echarts
this.chart = echartsInstance.init(this.$refs.chart)
this.chart.setOption({
tooltip: {
trigger: 'item',
formatter: "{b}: {c}"
},
legend: {
orient: 'horizontal',
x: 'right',
icon: 'circle',
itemWidth: 14,
itemHeight: 14,
align: 'left',
data:this.chartList.map(item => item.name),
textStyle: {
color: 'rgba(51, 51, 51, 1)',
fontSize: 14
}
},
series: [
{
name:'',
type:'pie',
hoverAnimation: false,
legendHoverLink:false,
radius: ['32%', '40%'],
color:
[
'rgba(24, 144, 255, 0.28)',
'rgba(74, 125, 255, 0.28)',
'rgba(37, 205, 134, 0.28)',
'rgba(0, 180, 42, 0.28)',
'rgba(255, 125, 0, 0.28)',
'rgba(254, 194, 58, 0.28)',
'rgba(251, 86, 87, 0.28)',
'rgba(255, 87, 34, 0.28)',
'rgba(184, 50, 194, 0.28)',
'rgba(102, 94, 255, 0.28)'
],
label: {
normal: {
position: 'inner'
}
},
labelLine: {
normal: {
show: false
},
},
tooltip: {
show:false,
},
data:this.chartList.map(item => ({
value:item.value,
name:''
}))
// [
// {value:435, name:''},
// {value:679, name:''},
// {value:848, name:''},
// {value:348, name:''},
// {value:679, name:''},
// {value:848, name:''},
// {value:348, name:''}
// ]
},
{
name:'',
type:'pie',
radius: ['42%', '60%'],
color: [
'rgba(24, 144, 255, 1)',
'rgba(74, 125, 255, 1)',
'rgba(37, 205, 134, 1)',
'rgba(0, 180, 42, 1)',
'rgba(255, 125, 0, 1)',
'rgba(254, 194, 58, 1)',
'rgba(251, 86, 87, 1)',
'rgba(255, 87, 34, 1)',
'rgba(184, 50, 194, 1)',
'rgba(102, 94, 255, 1)'
],
label: {
normal: {
formatter: '{b}:{c}'
},
},
data:this.chartList.map(item => ({
value:item.value,
name:item.name
}))
}
]
})
}
}
}
</script>
<style scoped>
.chart-container-content {
width: 100%;
height: 100%;
}
</style>
\ No newline at end of file
ruoyi-admin-vue/src/components/rukuRankChart.vue 0 → 100644
<template>
<div class="chart-container-content">
<div ref="chart" :style="{ width: '100%', height: '100%' }"></div>
</div>
</template>
<script>
// 方式1：全局引入时不需要这行
// 方式2：按需引入时需要
import * as echarts from 'echarts'
// import 'echarts-liquidfill'
export default {
name: 'EchartsDemo',
props: {
width: {
type: String,
default: '100%'
},
height: {
type: String,
default: '400px'
},
option: {
type: Object,
default: () => ({})
},
barColor: {
type: String,
default: 'rgba(22, 92, 255, 1)'
},
chartList: {
type: Array,
default: () => []
}
},
data() {
return {
chart: null
}
},
watch: {
chartList: {
handler(newVal) {
console.log('newVal',newVal)
if (newVal) {
this.initChart()
}
},
deep: true
},
width() {
this.$nextTick(() => {
this.chart && this.chart.resize()
})
},
height() {
this.$nextTick(() => {
this.chart && this.chart.resize()
})
}
},
mounted() {
// this.initChart()
},
beforeDestroy() {
if (this.chart) {
this.chart.dispose()
this.chart = null
}
},
methods: {
initChart() {
// 如果全局引入了，可以使用 this.$echarts
// 如果按需引入了，使用 import 的 echarts
const echartsInstance = this.$echarts || echarts
this.chart = echartsInstance.init(this.$refs.chart)
this.chart.setOption({
tooltip: {
trigger: 'axis',
show: false,
axisPointer: { // 坐标轴指示器，坐标轴触发有效
type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
},
},
legend: {
show: false,
selectedMode: false,
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: [{
splitLine: {
show: true
},
type: 'value',
show: true,
axisTick: {
show: true
},
}],
yAxis: [{
splitLine: {
show: false
},
axisLine: { //y轴
show: false
},
type: 'category',
axisTick: {
show: false
},
data: this.chartList.map(item => item.name),
axisLabel: {
}
}],
series: [{
name: '标准化',
type: 'bar',
barWidth: 16, // 柱子宽度
label: {
show: true,
position: 'right', // 位置
color: 'rgba(102, 102, 102, 1)',
fontSize: 14,
fontWeight: 'bold', // 加粗
distance: 5 // 距离
}, // 柱子上方的数值
itemStyle: {
// barBorderRadius: [0, 20, 20, 0], // 圆角（左上、右上、右下、左下）
color: this.barColor
},
data: this.chartList.map(item => item.value)
}, ]
})
}
}
}
</script>
<style scoped>
.chart-container-content {
width: 100%;
height: 100%;
}
</style>
\ No newline at end of file
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论