|
@@ -58,14 +58,14 @@ export default defineComponent({
|
|
name: 'CurveCom',
|
|
name: 'CurveCom',
|
|
props: {
|
|
props: {
|
|
ecahrtsData: Object,
|
|
ecahrtsData: Object,
|
|
-
|
|
|
|
|
|
+ typeSrarch: Number,
|
|
},
|
|
},
|
|
|
|
|
|
setup(props) {
|
|
setup(props) {
|
|
props
|
|
props
|
|
const store = useStore()
|
|
const store = useStore()
|
|
const sumeChartRef = ref(null)
|
|
const sumeChartRef = ref(null)
|
|
- const newData=ref([])
|
|
|
|
|
|
+ const newData = ref([])
|
|
|
|
|
|
// const listData = ref([])
|
|
// const listData = ref([])
|
|
|
|
|
|
@@ -73,7 +73,8 @@ export default defineComponent({
|
|
// num
|
|
// num
|
|
const num = computed(() => store.state.Home.worksChartData.num)
|
|
const num = computed(() => store.state.Home.worksChartData.num)
|
|
const newDataName = ref('')
|
|
const newDataName = ref('')
|
|
- const aa=ref('')
|
|
|
|
|
|
+ const aa = ref('')
|
|
|
|
+ const dataTime = ref([])
|
|
|
|
|
|
// 读取数据 func
|
|
// 读取数据 func
|
|
const loading = ref(true)
|
|
const loading = ref(true)
|
|
@@ -81,7 +82,7 @@ export default defineComponent({
|
|
loading.value = false
|
|
loading.value = false
|
|
// console.log('props.ecahrtsData')
|
|
// console.log('props.ecahrtsData')
|
|
// console.log(props.ecahrtsData)
|
|
// console.log(props.ecahrtsData)
|
|
- aa.value=props.ecahrtsData[0]?props.ecahrtsData[0].name:'';
|
|
|
|
|
|
+ aa.value = props.ecahrtsData[0] ? props.ecahrtsData[0].name : ''
|
|
var jsona = JSON.stringify(props.ecahrtsData)
|
|
var jsona = JSON.stringify(props.ecahrtsData)
|
|
var jsonb = jsona.replace(/"list"/g, '"data"')
|
|
var jsonb = jsona.replace(/"list"/g, '"data"')
|
|
newData.value = JSON.parse(jsonb)
|
|
newData.value = JSON.parse(jsonb)
|
|
@@ -98,93 +99,122 @@ export default defineComponent({
|
|
}
|
|
}
|
|
})
|
|
})
|
|
console.log(newData.value)
|
|
console.log(newData.value)
|
|
|
|
+
|
|
|
|
+ var arr1 = props.ecahrtsData[0].listDate
|
|
|
|
+
|
|
|
|
+ if (props.typeSrarch == 1) {
|
|
|
|
+ dataTime.value = arr1.map(function (item) {
|
|
|
|
+ return item.toString().substring(5,10);
|
|
|
|
+ })
|
|
|
|
+ console.log('dataTime.value')
|
|
|
|
+ console.log(dataTime.value)
|
|
|
|
+ } else if (props.typeSrarch == 2) {
|
|
|
|
+ dataTime.value = arr1.map(function (item) {
|
|
|
|
+ return item.toString().substring(5,7)+'月';
|
|
|
|
+ })
|
|
|
|
+ }else{
|
|
|
|
+ dataTime.value = arr1.map(function (item) {
|
|
|
|
+ return item
|
|
|
|
+ })
|
|
|
|
+ }
|
|
}
|
|
}
|
|
|
|
+
|
|
function ecahrts() {
|
|
function ecahrts() {
|
|
let myChart = echarts.init(sumeChartRef.value)
|
|
let myChart = echarts.init(sumeChartRef.value)
|
|
- myChart.setOption({
|
|
|
|
- color: ['#FEB70D', '#50F335', '#0DC8FE','#e4ff40','#ff409a','#ff4040'],
|
|
|
|
- title: {
|
|
|
|
- text: '同比分析',
|
|
|
|
- left: 'center',
|
|
|
|
- textStyle: {
|
|
|
|
- color: '#9d9d9d',
|
|
|
|
- fontSize: 14,
|
|
|
|
- fontWeight: 600,
|
|
|
|
|
|
+ myChart.setOption(
|
|
|
|
+ {
|
|
|
|
+ color: [
|
|
|
|
+ '#FEB70D',
|
|
|
|
+ '#50F335',
|
|
|
|
+ '#0DC8FE',
|
|
|
|
+ '#e4ff40',
|
|
|
|
+ '#ff409a',
|
|
|
|
+ '#ff4040',
|
|
|
|
+ ],
|
|
|
|
+ title: {
|
|
|
|
+ text: '同比分析',
|
|
|
|
+ left: 'center',
|
|
|
|
+ textStyle: {
|
|
|
|
+ color: '#9d9d9d',
|
|
|
|
+ fontSize: 14,
|
|
|
|
+ fontWeight: 600,
|
|
|
|
+ },
|
|
},
|
|
},
|
|
- },
|
|
|
|
- tooltip: {
|
|
|
|
- trigger: 'axis',
|
|
|
|
- },
|
|
|
|
- // 图列组件
|
|
|
|
- legend: {
|
|
|
|
- itemHeight: 10, //改变圆圈大小
|
|
|
|
- itemWidth: 26, //改变圆圈大小
|
|
|
|
- itemGap: 30,
|
|
|
|
- textStyle: {
|
|
|
|
- color: 'black',
|
|
|
|
|
|
+ tooltip: {
|
|
|
|
+ trigger: 'axis',
|
|
},
|
|
},
|
|
|
|
+ // 图列组件
|
|
|
|
+ legend: {
|
|
|
|
+ itemHeight: 10, //改变圆圈大小
|
|
|
|
+ itemWidth: 26, //改变圆圈大小
|
|
|
|
+ itemGap: 30,
|
|
|
|
+ textStyle: {
|
|
|
|
+ color: 'black',
|
|
|
|
+ },
|
|
|
|
|
|
- left: 'center',
|
|
|
|
- bottom: '0',
|
|
|
|
- },
|
|
|
|
- toolbox: {
|
|
|
|
- show: true,
|
|
|
|
- feature: {
|
|
|
|
- saveAsImage: { show: true, color: 'black' },
|
|
|
|
|
|
+ left: 'center',
|
|
|
|
+ bottom: '0',
|
|
},
|
|
},
|
|
- iconStyle: {
|
|
|
|
- borderColor: '#666',
|
|
|
|
- },
|
|
|
|
- },
|
|
|
|
- grid: {
|
|
|
|
- left: '3%',
|
|
|
|
- right: '4%',
|
|
|
|
- bottom: '5%',
|
|
|
|
- containLabel: true,
|
|
|
|
- },
|
|
|
|
- xAxis: {
|
|
|
|
- type: 'category',
|
|
|
|
- boundaryGap: true,
|
|
|
|
- data: props.ecahrtsData[0]?props.ecahrtsData[0].listDate:'',
|
|
|
|
- axisTick: {
|
|
|
|
- show: false, //去除刻度线
|
|
|
|
- },
|
|
|
|
- axisLabel: {
|
|
|
|
- color: 'black', // 文本颜色
|
|
|
|
- },
|
|
|
|
- axisLine: {
|
|
|
|
- show: false, // 去除轴线
|
|
|
|
- },
|
|
|
|
- },
|
|
|
|
- yAxis: {
|
|
|
|
- name: yName,
|
|
|
|
- nameTextStyle: {
|
|
|
|
- color: 'black',
|
|
|
|
- fontSize: 10,
|
|
|
|
|
|
+ toolbox: {
|
|
|
|
+ show: true,
|
|
|
|
+ feature: {
|
|
|
|
+ saveAsImage: { show: true, color: 'black' },
|
|
|
|
+ },
|
|
|
|
+ iconStyle: {
|
|
|
|
+ borderColor: '#666',
|
|
|
|
+ },
|
|
},
|
|
},
|
|
- type: 'value',
|
|
|
|
- axisTick: {
|
|
|
|
- show: true, //去除刻度线
|
|
|
|
|
|
+ grid: {
|
|
|
|
+ left: '3%',
|
|
|
|
+ right: '4%',
|
|
|
|
+ bottom: '5%',
|
|
|
|
+ containLabel: true,
|
|
},
|
|
},
|
|
- axisLabel: {
|
|
|
|
- color: 'black', // 文本颜色
|
|
|
|
|
|
+ xAxis: {
|
|
|
|
+ type: 'category',
|
|
|
|
+ boundaryGap: true,
|
|
|
|
+ data: props.ecahrtsData[0] ? dataTime.value : '',
|
|
|
|
+ axisTick: {
|
|
|
|
+ show: false, //去除刻度线
|
|
|
|
+ },
|
|
|
|
+ axisLabel: {
|
|
|
|
+ color: 'black', // 文本颜色
|
|
|
|
+ },
|
|
|
|
+ axisLine: {
|
|
|
|
+ show: false, // 去除轴线
|
|
|
|
+ },
|
|
},
|
|
},
|
|
- axisLine: {
|
|
|
|
- show: true, // 去除轴线
|
|
|
|
- lineStyle: {
|
|
|
|
|
|
+ yAxis: {
|
|
|
|
+ name: yName,
|
|
|
|
+ nameTextStyle: {
|
|
color: 'black',
|
|
color: 'black',
|
|
|
|
+ fontSize: 10,
|
|
},
|
|
},
|
|
- },
|
|
|
|
- splitNumber: 5,
|
|
|
|
- splitLine: {
|
|
|
|
- show: true,
|
|
|
|
- lineStyle: {
|
|
|
|
- color: '#9d9d9d',
|
|
|
|
|
|
+ type: 'value',
|
|
|
|
+ axisTick: {
|
|
|
|
+ show: true, //去除刻度线
|
|
|
|
+ },
|
|
|
|
+ axisLabel: {
|
|
|
|
+ color: 'black', // 文本颜色
|
|
|
|
+ },
|
|
|
|
+ axisLine: {
|
|
|
|
+ show: true, // 去除轴线
|
|
|
|
+ lineStyle: {
|
|
|
|
+ color: 'black',
|
|
|
|
+ },
|
|
|
|
+ },
|
|
|
|
+ splitNumber: 5,
|
|
|
|
+ splitLine: {
|
|
|
|
+ show: true,
|
|
|
|
+ lineStyle: {
|
|
|
|
+ color: '#9d9d9d',
|
|
|
|
+ },
|
|
},
|
|
},
|
|
},
|
|
},
|
|
|
|
+ series: newData.value,
|
|
},
|
|
},
|
|
- series: newData.value,
|
|
|
|
- },true)
|
|
|
|
|
|
+ true
|
|
|
|
+ )
|
|
window.onresize = function () {
|
|
window.onresize = function () {
|
|
// 自适应大小
|
|
// 自适应大小
|
|
myChart.resize()
|
|
myChart.resize()
|
|
@@ -193,9 +223,15 @@ export default defineComponent({
|
|
|
|
|
|
const writeValue = (val) => {
|
|
const writeValue = (val) => {
|
|
val
|
|
val
|
|
-
|
|
|
|
|
|
+
|
|
getData()
|
|
getData()
|
|
- ecahrts()
|
|
|
|
|
|
+ ecahrts()
|
|
|
|
+ }
|
|
|
|
+ const writeValue2 = (val) => {
|
|
|
|
+ val
|
|
|
|
+
|
|
|
|
+ getData()
|
|
|
|
+
|
|
}
|
|
}
|
|
|
|
|
|
//监听变化
|
|
//监听变化
|
|
@@ -211,6 +247,20 @@ export default defineComponent({
|
|
{ lazy: true }
|
|
{ lazy: true }
|
|
)
|
|
)
|
|
|
|
|
|
|
|
+ //监听变化
|
|
|
|
+ watch(
|
|
|
|
+ () => props.typeSrarch,
|
|
|
|
+ (newVal, oldVal, clear) => {
|
|
|
|
+ // alert(props.typeSrarch)
|
|
|
|
+ // 执行异步任务,并得到关闭异步任务的 id
|
|
|
|
+ // console.log(newVal)
|
|
|
|
+ let id = writeValue2(newVal, oldVal)
|
|
|
|
+ // 如果 watch 监听被重复执行了,则会先清除上次未完成的异步任务
|
|
|
|
+ clear(() => clearTimeout(id))
|
|
|
|
+ },
|
|
|
|
+ { lazy: true }
|
|
|
|
+ )
|
|
|
|
+
|
|
onMounted(() => {
|
|
onMounted(() => {
|
|
getData()
|
|
getData()
|
|
ecahrts()
|
|
ecahrts()
|
|
@@ -229,7 +279,8 @@ export default defineComponent({
|
|
num,
|
|
num,
|
|
newDataName,
|
|
newDataName,
|
|
newData,
|
|
newData,
|
|
- ecahrts
|
|
|
|
|
|
+ ecahrts,
|
|
|
|
+ dataTime,
|
|
}
|
|
}
|
|
},
|
|
},
|
|
})
|
|
})
|