qdintc/intc-vue3
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feature：代码初始化。

Browse Source
This commit is contained in:
tianyongbao
2024-04-19 09:36:13 +08:00
commit 2f89616d14
454 changed files with 111421 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

56
src/views/components/chart/drawAnnular.vue Normal file
View File

@@ -0,0 +1,56 @@
<template>
<div class="echarts-wraper">
<div ref="echarts" style="height: 100%; width: 100%" class="echarts"></div>
</div>
</template>
<script>
import * as echarts from 'echarts'
export default {
setup() {
const { proxy } = getCurrentInstance()
const drawChart = (value) => {
const myChart = echarts.init(proxy.$refs.echarts)
const option = {
legend: {
show: true,
bottom: -5,
left: 'center',
type: 'scroll',
icon: 'circle'
},
grid: {
left: 30,
right: 60,
top: 50,
bottom: 40,
containLabel: true
},
tooltip: {
trigger: 'item',
axisPointer: { type: 'shadow' },
formatter: function (params) {
return params.marker + params.data.name + '：' + params.data.percent
}
},
series: [
{
type: 'pie',
radius: ['50%', '70%'],
data: value,
label: {
formatter: function (params) {
return params.data.name + ' ' + params.data.percent
}
}
}
]
}
myChart.setOption(option)
window.addEventListener('resize', () => {
myChart.resize()
})
}
return { drawChart }
}
}
</script>

53
src/views/components/chart/drawBar.vue Normal file
View File

@@ -0,0 +1,53 @@
<template>
<div class="echarts-wraper">
<div ref="echarts" style="height: 100%; width: 100%" class="echarts"></div>
</div>
</template>
<script>
import * as echarts from 'echarts'
export default {
setup() {
const { proxy } = getCurrentInstance()
const drawChart = (value) => {
const myChart = echarts.init(proxy.$refs.echarts)
const option = {
legend: {
show: true,
top: 20,
left: 'center'
},
grid: {
left: 30,
right: 30,
top: 50,
bottom: 10,
containLabel: true
},
tooltip: {
trigger: 'axis',
axisPointer: { type: 'shadow' }
},
xAxis: {
axisTick: { show: false },
data: value.xAxis
},
yAxis: {
name: value.unit,
minInterval: 1,
nameTextStyle: { color: '#707070', fontSize: 14 },
splitLine: { show: false },
axisLabel: {
formatter: '{value}'
}
},
series: value.series
}
myChart.setOption(option)
window.addEventListener('resize', () => {
myChart.resize()
})
}
return { drawChart }
}
}
</script>

52
src/views/components/chart/drawLine.vue Normal file
View File

@@ -0,0 +1,52 @@
<template>
<div class="echarts-wraper">
<div ref="echarts" style="height: 100%; width: 100%" class="echarts"></div>
</div>
</template>
<script>
import * as echarts from 'echarts'
export default {
setup() {
const { proxy } = getCurrentInstance()
const drawChart = (value) => {
const myChart = echarts.init(proxy.$refs.echarts)
const option = {
legend: {
show: true,
top: 20,
left: 'center'
},
grid: {
left: 30,
right: 30,
top: 50,
bottom: 10,
containLabel: true
},
tooltip: {
trigger: 'axis',
axisPointer: { type: 'shadow' }
},
xAxis: {
axisTick: { show: false },
data: value.xAxis
},
yAxis: {
minInterval: 1,
nameTextStyle: { color: '#707070', fontSize: 14 },
splitLine: { show: false },
axisLabel: {
formatter: '{value}'
}
},
series: value.series
}
myChart.setOption(option)
window.addEventListener('resize', () => {
myChart.resize()
})
}
return { drawChart }
}
}
</script>

55
src/views/components/chart/drawPie.vue Normal file
View File

@@ -0,0 +1,55 @@
<template>
<div class="echarts-wraper">
<div ref="echarts" style="height: 100%; width: 100%" class="echarts"></div>
</div>
</template>
<script>
import * as echarts from 'echarts'
export default {
setup() {
const { proxy } = getCurrentInstance()
const drawChart = (value) => {
const myChart = echarts.init(proxy.$refs.echarts)
const option = {
legend: {
show: true,
bottom: -5,
left: 'center',
type: 'scroll',
icon: 'circle'
},
grid: {
left: 30,
right: 60,
top: 50,
bottom: 40,
containLabel: true
},
tooltip: {
trigger: 'item',
axisPointer: { type: 'shadow' },
formatter: function (params) {
return params.marker + params.data.name + '：' + params.data.percent
}
},
series: [
{
type: 'pie',
data: value,
label: {
formatter: function (params) {
return params.data.name + ' ' + params.data.percent
}
}
}
]
}
myChart.setOption(option)
window.addEventListener('resize', () => {
myChart.resize()
})
}
return { drawChart }
}
}
</script>

64
src/views/components/chart/drawSortBar.vue Normal file
View File

@@ -0,0 +1,64 @@
<template>
<div class="echarts-wraper">
<div ref="echarts" style="height: 100%; width: 100%" class="echarts"></div>
</div>
</template>
<script>
import * as echarts from 'echarts'
export default {
setup() {
const { proxy } = getCurrentInstance()
const drawChart = (value) => {
const myChart = echarts.init(proxy.$refs.echarts)
const option = {
legend: {
show: true,
bottom: -5,
left: 'center'
},
grid: {
left: 30,
right: 30,
top: 30,
bottom: 10,
containLabel: true
},
tooltip: {
trigger: 'axis',
axisPointer: { type: 'shadow' },
formatter: function (params) {
return params[0].name + '</br>' + params[0].marker + ' ' + params[0].data
}
},
xAxis: {
type: 'value',
minInterval: 1,
axisTick: { show: false },
axisLine: {
show: false
}
},
yAxis: {
type: 'category',
minInterval: 1,
nameTextStyle: { color: '#707070', fontSize: 14 },
splitLine: { show: false },
axisLabel: {
formatter: '{value}'
},
data: value.xData.reverse()
},
series: {
type: 'bar',
data: value.yData.reverse()
}
}
myChart.setOption(option)
window.addEventListener('resize', () => {
myChart.resize()
})
}
return { drawChart }
}
}
</script>

64
src/views/components/chart/drawSortBar1.vue Normal file
View File

@@ -0,0 +1,64 @@
<template>
<div class="echarts-wraper">
<div ref="echarts" style="height: 100%; width: 100%" class="echarts"></div>
</div>
</template>
<script>
import * as echarts from 'echarts'
export default {
setup() {
const { proxy } = getCurrentInstance()
const drawChart = (value) => {
const myChart = echarts.init(proxy.$refs.echarts)
const option = {
legend: {
show: true,
bottom: -5,
left: 'center'
},
grid: {
left: 30,
right: 30,
top: 30,
bottom: 10,
containLabel: true
},
tooltip: {
trigger: 'axis',
axisPointer: { type: 'shadow' },
formatter: function (params) {
return params[0].name + '</br>' + params[0].marker + ' ' + params[0].data
}
},
xAxis: {
type: 'category',
minInterval: 1,
axisTick: { show: false },
axisLine: {
show: true
},
data: value.xData
},
yAxis: {
type: 'value',
minInterval: 1,
nameTextStyle: { color: '#707070', fontSize: 14 },
splitLine: { show: false },
axisLabel: {
formatter: '{value}'
}
},
series: {
type: 'bar',
data: value.yData
}
}
myChart.setOption(option)
window.addEventListener('resize', () => {
myChart.resize()
})
}
return { drawChart }
}
}
</script>

65
src/views/components/chart/drawSortBar2.vue Normal file
View File

@@ -0,0 +1,65 @@
<template>
<div class="echarts-wraper">
<div ref="echarts" style="height: 100%; width: 100%" class="echarts"></div>
</div>
</template>
<script>
import * as echarts from 'echarts'
export default {
setup() {
const { proxy } = getCurrentInstance()
const drawChart = (value) => {
const myChart = echarts.init(proxy.$refs.echarts)
const option = {
legend: {
show: true,
bottom: -5,
left: 'center'
},
grid: {
left: 30,
right: 30,
top: 30,
bottom: 10,
containLabel: true
},
tooltip: {
trigger: 'axis',
axisPointer: { type: 'shadow' },
formatter: function (params) {
return params[0].name + '</br>' + params[0].marker + ' ' + params[0].data
}
},
xAxis: {
type: 'value',
minInterval: 1,
name: '%',
axisTick: { show: false },
axisLine: {
show: false
}
},
yAxis: {
type: 'category',
minInterval: 1,
nameTextStyle: { color: '#707070', fontSize: 14 },
splitLine: { show: false },
axisLabel: {
formatter: '{value}'
},
data: value.xData.reverse()
},
series: {
type: 'bar',
data: value.yData.reverse()
}
}
myChart.setOption(option)
window.addEventListener('resize', () => {
myChart.resize()
})
}
return { drawChart }
}
}
</script>