This commit is contained in:
duanxiaohai 2024-07-22 10:46:36 +08:00
parent f3da7da1f1
commit 0a48b509e3
7 changed files with 121 additions and 4 deletions

BIN
dist.zip Normal file

Binary file not shown.

Binary file not shown.

Before

Width:  |  Height:  |  Size: 136 KiB

After

Width:  |  Height:  |  Size: 508 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 126 KiB

After

Width:  |  Height:  |  Size: 490 KiB

View File

@ -25,6 +25,11 @@ const router = createRouter({
path: '/home/index',
component: () => import('../view/sy.vue'),
},
{
name: '首页',
path: '/home/index/LivelihoodWelfare',
component: () => import('../view/sy.vue'),
},
{
name: '养老',
path: '/home/yl',

View File

@ -0,0 +1,112 @@
<template>
<!-- ECharts 准备一个定义了宽高的 DOM -->
<!--vue3中 id= 变更 ref=-->
<div ref="chart" style="width:100%;height:200px;"></div>
</template>
<script setup >
import {onMounted, reactive, ref} from "vue";
// echarts
import * as echarts from 'echarts'
// const props = defineProps({ //
//
const {chartType,chartData}= defineProps({ //
chartType:{
type: String
},
chartData: {
type: Array
}
})
const chart =ref(); // DOM
//
const option = reactive({
//
title: { //
// left: 'center', //
text: 'ECharts 入门示例',
left: 'center',
textStyle: {
color: '#f60',
fontSize: 20,
}
},
color: '#f00', //
tooltip: {}, //
legend: { //
data: ['销量'],
top: '5%',
left: 'right',
textStyle: { //
color: '#f68',
}
},
xAxis: { // x
data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子'],
axisLine: { //
lineStyle: { //
color:'#000' //
}
},
axisLabel:{
interval: 0,
formatter: value => value.split('').join('\n') //lang='ts'
}
},
yAxis: { // y
axisLine: { //
lineStyle: { //
color:'#000' //
}
},
axisLabel:{
// formatter: '{value} '
formatter: function(value,index){ // lang='ts'
return value %2 == 0 ? value + '件' : value //
}
}
},
series: [ // data
{
name: '销量',
// type: 'bar', //
// type: props.chartType, //
type:chartType, //
// data: [5, 20, 36, 10, 10, 20], //
// data: props.chartData,
data: chartData,
label: {
show: true,
position: 'top'
},
}
]
})
// 使
onMounted(() => {
// domecharts
// var myChart = echarts.init(document.getElementById('main'));
// Vue3
var myChart = echarts.init(chart.value)
// init(); // vue3.2this
// 使
myChart.setOption(option);
// :
window.addEventListener('resize',()=>{
myChart.resize()
})
})
</script>
<style scoped>
</style>

View File

@ -557,7 +557,7 @@ const selectChange2 = () => {
});
selectData.list = roseData1.value;
console.log(selectData.list);
// console.log(selectData.list);
setTimeout(() => {
showR.value = true;

View File

@ -605,6 +605,7 @@
</div>
</template>
</DialogTab>
</div>
</template>
@ -1736,6 +1737,7 @@ onBeforeMount(async () => {
</script>
<style lang="scss" scoped>
:deep(.el-dialog) {
--el-dialog-bg-color: none;
}
@ -1797,9 +1799,7 @@ onBeforeMount(async () => {
background-color: rgba(0, 116, 255, 0) !important;
}
}
</style>
<style lang="scss" scoped>
.displayFlex {
box-sizing: border-box;
height: 100%;