- query传参的确可以拿到值,但是如果传过来的值是非字符串的,页面回退或者刷新,数据就会没得
解决方法:小主你忘记了页面存储 localStorage,localStorage可以在不同的页面使用。
这边借鉴了一些其他金主的教程:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-VkHyj50n-1655359579519)(https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/68170ab9f9d14b339d2dc348c5e65e39~tplv-k3u1fbpfcp-watermark.image?)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Uncjg79e-1655359579520)(https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/1ac3e0bbd0324f1f89188ab9a7cfd547~tplv-k3u1fbpfcp-watermark.image?)]
具体见这篇文章:https://juejin.cn/post/7033749571939336228 强烈安利
- echarts操蛋的配置,过分抠细节的甲方
样图与代码放在下面
2-1 柱状图(名字在左侧,只需要把x轴和y轴的数据变化下即可)
{
"en-US":{
"export":"export",
"useTimes":"useTimes"
},
"zh-CN":{
"export":"导出Excel",
"useTimes":"使用次数"
}
}
</i18n>
<template>
<!-- [1] 为 ECharts 准备一个具备大小 (宽高) 的 DOM -->
<div id="chart" ref="chart"></div>
</template>
<script>
import echarts from 'echarts/lib/echarts' // 引入基本模板
// import { COLOR_VAL } from '@/enums/baseColorVal'
import { yzSYInfo } from '@/api/decision-making.js'
export default {
data() {
return {
resultInfo: [],
dataZoom: [],
}
},
props: {
conditions: {
type: Object,
},
},
computed: {},
watch: {},
methods: {
// 获取印章总数
async yzSYInfo() {
const {
data: { code, data },
} = await yzSYInfo(this.conditions)
if (code === 0) {
let xAxis = []
let lineData = []
if (data) {
this.resultInfo = data
this.$emit('complate', data)
for (let index = 0; index < this.resultInfo.length; index++) {
xAxis[index] = this.resultInfo[index].sealName
lineData[index] = this.resultInfo[index].totalSealUsedCount
}
}
if (xAxis.length > 10) {
this.dataZoom = [
{
show: true,
realtime: true,
start: 65,
end: 85,
},
]
} else {
this.dataZoom = []
}
this.writeChart(xAxis, lineData)
}
},
writeChart(xAxis, lineData) {
// [3] 基于准备好的 DOM,初始化 Echarts 实例
// 使用 ref 访问 DOM, 也可以使用 document.getElementById('chart')
// const { r, g, b } = COLOR_VAL()
const chart = echarts.init(this.$refs.chart, 'light')
// [4] 设置 Echarts 图表数据
chart.setOption({
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow',
},
formatter: params => {
if (params && params[0]) {
return `${this.$t('useTimes')}<br/> <i class="power_class"></i>${
params[0].name
} ${params[0].value}`
} else {
return `${this.$t('useTimes')}<br/> <i class="power_class"></i>${
params[0].name
} ${0}
`
}
},
},
title: {
show: Object.keys(lineData).length === 0,
textStyle: {
color: '#999',
fontSize: 16,
},
text: this.$t('noDataTips'),
left: 'center',
top: 'center',
},
series: [
{
name: this.$t('sealTimes'),
type: 'bar',
itemStyle: {
normal: {
color: function (params) {
// 给出颜色组
let colorList = [
'#759aa0',
'#e69d87',
'#8dc1a9',
'#ea7e53',
'#eedd78',
'#73a373',
'#73b9bc',
'#7289ab',
'#91ca8c',
'#f49f42',
]
//循环调用
return colorList[params.dataIndex % colorList.length]
},
},
},
data: lineData,
// encode: {
// x: 'amount',
// y: 'sealName',
// },
label: {
show: true,
position: 'right',
},
},
],
xAxis: {
type: 'value',
axisPointer: {
type: 'shadow',
},
axisLabel: {
interval: 0,
// formatter: function (value) {
// let valueTxt = ''
// if (value.length > 10) {
// valueTxt = `${value.slice(0, 10)}...`
// } else {
// valueTxt = value
// }
// return valueTxt
// },
},
},
dataZoom: this.dataZoom,
grid: {
left: 375,
},
yAxis: {
data: xAxis,
type: 'category',
splitLine: {
show: false,
},
axisLabel: {
interval: 0,
formatter: function (value) {
let newParamsName = '' // 最终拼接成的字符串
let paramsNameNumber = value.length // 实际标签的个数
let provideNumber = 30 // 每行能显示的字的个数
let rowNumber = Math.ceil(paramsNameNumber / provideNumber) // 换行的话,需要显示几行,向上取整
/**
* 判断标签的个数是否大于规定的个数, 如果大于,则进行换行处理 如果不大于,即等于或小于,就返回原标签
*/
// 条件等同于rowNumber>1
if (paramsNameNumber > provideNumber) {
/** 循环每一行,p表示行 */
for (let p = 0; p < rowNumber; p++) {
let tempStr = '' // 表示每一次截取的字符串
let start = p * provideNumber // 开始截取的位置
let end = start + provideNumber // 结束截取的位置
// 此处特殊处理最后一行的索引值
if (p == rowNumber - 1) {
// 最后一次不换行
tempStr = value.substring(start, paramsNameNumber)
} else {
// 每一次拼接字符串并换行
tempStr = `${value.substring(start, end)}\n`
}
newParamsName += tempStr // 最终拼成的字符串
}
} else {
// 将旧标签的值赋给新标签
newParamsName = value
}
//将最终的字符串返回
return newParamsName
},
},
},
})
//图表自适应窗口大小
window.onresize = chart.resize
this.$once('hook:beforeDestroy', () => {
window.onresize = null
echarts.dispose(chart)
})
},
// draw() {
// const chart = echarts.init(this.$refs.chart, 'light')
// window.addEventListener('resize', function () {
// chart.resize()
// })
// },
},
mounted() {
// this.draw()
this.yzSYInfo()
},
}
</script>
<style lang="scss" scoped>
#chart {
width: 95%;
height: 80rem;
box-sizing: border-box;
margin: -3rem 5rem 0.5rem 0.5rem;
}
</style>
2-2 柱状图(名字在下侧,但是需要倾斜,注意倾斜角度不能过大,否则或导致名字遮盖的问题,别问我怎么知道的)
{
"en-US":{
"export":"export",
"useTimes":"useTimes"
},
"zh-CN":{
"export":"导出Excel",
"useTimes":"使用次数"
}
}
</i18n>
<template>
<!-- [1] 为 ECharts 准备一个具备大小 (宽高) 的 DOM -->
<div id="chart" ref="chart"></div>
</template>
<script>
import echarts from 'echarts/lib/echarts' // 引入基本模板
import { deptSYInfo } from '@/api/decision-making.js'
export default {
data() {
return {
resultInfo: [],
dataZoom: [],
}
},
props: {
conditions: {
type: Object,
},
},
computed: {},
watch: {},
methods: {
// 获取申请次数
async deptSYInfo() {
const {
data: { code, data },
} = await deptSYInfo(this.conditions)
if (code === 0) {
let xAxis = []
let lineData = []
if (data) {
this.resultInfo = data
this.$emit('complate', data)
for (let index = 0; index < this.resultInfo.length; index++) {
xAxis[index] = this.resultInfo[index].deptName
lineData[index] = this.resultInfo[index].totalSealUsedCount
}
}
if (xAxis.length > 20) {
this.dataZoom = [
{
show: true,
realtime: true,
start: 65,
end: 85,
},
]
} else {
this.dataZoom = []
}
this.writeChart(xAxis, lineData)
}
},
writeChart(xAxis, lineData) {
// [3] 基于准备好的 DOM,初始化 Echarts 实例
// 使用 ref 访问 DOM, 也可以使用 document.getElementById('chart')
// const { r, g, b } = COLOR_VAL()
const chart = echarts.init(this.$refs.chart, 'light')
// [4] 设置 Echarts 图表数据
chart.setOption({
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow',
},
formatter: params => {
if (params && params[0]) {
return `${this.$t('useTimes')}<br/> <i class="power_class"></i>${
params[0].name
} ${params[0].value}`
} else {
return `${this.$t('useTimes')}<br/> <i class="power_class"></i>${
params[0].name
} ${0}
`
}
},
},
title: {
show: Object.keys(lineData).length === 0,
textStyle: {
color: '#999',
fontSize: 16,
},
text: this.$t('noDataTips'),
left: 'center',
top: 'center',
},
series: [
{
name: this.$t('sealTimes'),
type: 'bar',
itemStyle: {
normal: {
color: function (params) {
// 给出颜色组
let colorList = [
'#759aa0',
'#e69d87',
'#8dc1a9',
'#ea7e53',
'#eedd78',
'#73a373',
'#73b9bc',
'#7289ab',
'#91ca8c',
'#f49f42',
]
//循环调用
return colorList[params.dataIndex % colorList.length]
},
},
},
data: lineData,
label: {
show: true,
position: 'top',
},
},
],
xAxis: {
data: xAxis,
type: 'category',
axisPointer: {
type: 'shadow',
},
axisLabel: {
interval: 0, //横轴信息全部显示
formatter: function (value) {
let newParamsName = '' // 最终拼接成的字符串
let paramsNameNumber = value.length // 实际标签的个数
let provideNumber = 12 // 每行能显示的字的个数
let rowNumber = Math.ceil(paramsNameNumber / provideNumber) // 换行的话,需要显示几行,向上取整
/**
* 判断标签的个数是否大于规定的个数, 如果大于,则进行换行处理 如果不大于,即等于或小于,就返回原标签
*/
// 条件等同于rowNumber>1
if (paramsNameNumber > provideNumber) {
/** 循环每一行,p表示行 */
for (let p = 0; p < rowNumber; p++) {
let tempStr = '' // 表示每一次截取的字符串
let start = p * provideNumber // 开始截取的位置
let end = start + provideNumber // 结束截取的位置
// 此处特殊处理最后一行的索引值
if (p == rowNumber - 1) {
// 最后一次不换行
tempStr = value.substring(start, paramsNameNumber)
} else {
// 每一次拼接字符串并换行
tempStr = `${value.substring(start, end)}\n`
}
newParamsName += tempStr // 最终拼成的字符串
}
} else {
// 将旧标签的值赋给新标签
newParamsName = value
}
//将最终的字符串返回
return newParamsName
},
rotate: 20,
},
},
dataZoom: this.dataZoom,
grid: {
bottom: 100,
},
yAxis: {
type: 'value',
splitLine: {
show: false,
},
},
})
//图表自适应窗口大小
window.onresize = chart.resize
this.$once('hook:beforeDestroy', () => {
window.onresize = null
echarts.dispose(chart)
})
},
// draw() {
// const chart = echarts.init(this.$refs.chart, 'light')
// window.addEventListener('resize', function () {
// chart.resize()
// })
// },
},
mounted() {
// this.draw()
this.deptSYInfo()
},
}
</script>
<style lang="scss" scoped>
#chart {
width: 71%;
height: 80rem;
box-sizing: border-box;
margin: -3rem 5rem 0.5rem auto;
}
</style>
2-3 饼图-百分比
{
"en-US":{
"export":"export",
"useTimes":"useTimes"
},
"zh-CN":{
"export":"导出Excel",
"useTimes":"申请流程次数"
}
}
</i18n>
<template>
<!-- [1] 为 ECharts 准备一个具备大小 (宽高) 的 DOM -->
<div id="chart" ref="chart" style="height: 50rem"></div>
</template>
<script>
import echarts from 'echarts/lib/echarts' // 引入基本模板
import { sealInfo } from '@/api/decision-making.js'
export default {
data() {
return {
dataZoom: [],
}
},
props: {
conditions: {
type: Object,
},
},
methods: {
// 获取申请次数
async sealInfo() {
const {
data: { code, data },
} = await sealInfo(this.conditions)
if (code === 0) {
if (data.percent) {
this.dataZoom = data.percent.map(item => {
if (item) {
return {
value: item.sealCount,
name: item.name,
}
}
})
}
this.writeChart(this.dataZoom)
}
},
writeChart(data) {
const chart = echarts.init(this.$refs.chart, 'light')
let option = {
tooltip: {
trigger: 'item',
formatter: '{b} : {c} ({d}%)',
},
// formatter: params => {
// debugger
// if (params && params[0]) {
// return `${this.$t('useTimes')}<br/> <i class="power_class"></i>${
// params[0].name
// } ${params[0].value}`
// } else {
// return `${this.$t('useTimes')}<br/> <i class="power_class"></i>${
// params[0].name
// } ${0}
// `
// }
// },
title: [
{
left: '30%',
top: '45%',
textAlign: 'center',
},
],
series: [
{
type: 'pie',
radius: window.window.screen.width > 1300 ? '50%' : '40%',
center: ['50%', '50%'],
data: data,
label: {
position: 'outer',
alignTo: 'none',
// formatter: '{b} : {c} ({d}%)',
formatter(v) {
let text = `${v.name}:${v.percent.toFixed(2)}%`
if (text.length <= 8) {
return text
} else if (text.length > 8 && text.length <= 16) {
return (text = `${text.slice(0, 8)}\n${text.slice(8)}`)
} else if (text.length > 16 && text.length <= 24) {
return (text = `${text.slice(0, 8)}\n${text.slice(
8,
16
)}\n${text.slice(16)}`)
} else if (text.length > 24 && text.length <= 30) {
return (text = `${text.slice(0, 8)}\n${text.slice(
8,
16
)}\n${text.slice(16, 24)}\n${text.slice(24)}`)
} else if (text.length > 30) {
return (text = `${text.slice(0, 8)}\n${text.slice(
8,
16
)}\n${text.slice(16, 24)}\n${text.slice(
24,
30
)}\n${text.slice(30)}`)
}
},
bleedMargin: 5,
textStyle: {
fontSize: window.window.screen.width * 0.008,
},
},
left: '50%',
right: 0,
top: 0,
bottom: 0,
},
],
}
chart.setOption(option)
//图表自适应窗口大小
window.onresize = chart.resize
this.$once('hook:beforeDestroy', () => {
window.onresize = null
echarts.dispose(chart)
})
},
// draw() {
// const chart = echarts.init(this.$refs.chart, 'light')
// window.addEventListener('resize', function () {
// chart.resize()
// })
// },
},
mounted() {
// this.draw()
this.sealInfo()
},
}
</script>
<style lang="scss" scoped>
#chart {
width: 90%;
height: 40rem;
box-sizing: border-box;
margin: 0 auto;
}
</style>
3.e-table添加表格线,border不生效
加入下样式即可
/deep/.el-table td { border-bottom: 1px solid #ebeef5; }