diff --git a/new-digital-agriculture-screen/src/views/entities/components/valueCharts.vue b/new-digital-agriculture-screen/src/views/entities/components/valueCharts.vue index dc0d752..31be468 100644 --- a/new-digital-agriculture-screen/src/views/entities/components/valueCharts.vue +++ b/new-digital-agriculture-screen/src/views/entities/components/valueCharts.vue @@ -117,7 +117,7 @@ const state = reactive({ yAxis: [ { type: 'category', - data: ['耿马镇', '勐撒镇', '勐永镇', '孟定镇', '大兴乡'].reverse(), + data: ['耿马镇', '勐撒镇', '勐永镇', '孟定镇', '大兴乡'], axisTick: { show: false, }, @@ -152,63 +152,63 @@ const state = reactive({ }, }, }, - data: [12000, 8000, 6000, 4000, 3500], + data: [8653.1, 9455.7, 4502.8, 4907.2, 4152], }, ], series: [ - // { - // name: '值', - // type: 'bar', - // zlevel: 1, - // barBorderRadius: 10, - // itemStyle: { - // borderRadius: [10, 10, 10, 10], - // color: 'rgba(100, 200, 255, 0.3)', - // }, - // backgroundStyle: { - // color: 'rgba(100, 200, 255, 0.3)', - // borderRadius: [10, 10, 10, 10], // 必须与barBorderRadius保持一致 - // }, - // barWidth: 14, - // data: values, - // label: { - // position: [0, -16], - // align: 'left', - // show: true, - // formatter: (params) => { - // return params.name; - // }, - // }, - // barMaxWidth: 40, - // markLine: { - // label: { - // color: '#26a69a', - // }, - // }, - // }, - // { - // name: '背景', - // type: 'bar', - // barWidth: 14, - // barGap: '-100%', - // data: maxData, - // barBorderRadius: 30, - // itemStyle: { - // normal: { - // color: 'rgba(105,131,242,.3)', - // borderRadius: 10, - // }, - // }, - // label: { - // show: false, - // }, - // barMaxWidth: 14, - // markLine: { - // label: { - // color: '#26a69a', - // }, - // }, - // }, + { + name: '值', + type: 'bar', + zlevel: 1, + barBorderRadius: 10, + itemStyle: { + borderRadius: [10, 10, 10, 10], + color: 'rgba(100, 200, 255, 0.3)', + }, + backgroundStyle: { + color: 'rgba(100, 200, 255, 0.3)', + borderRadius: [10, 10, 10, 10], // 必须与barBorderRadius保持一致 + }, + barWidth: 20, + data: values, + label: { + position: [0, -16], + align: 'left', + show: true, + formatter: (params) => { + return params.name; + }, + }, + barMaxWidth: 40, + markLine: { + label: { + color: '#26a69a', + }, + }, + }, + { + name: '背景', + type: 'bar', + barWidth: 20, + barGap: '-100%', + data: maxData, + barBorderRadius: 30, + itemStyle: { + normal: { + color: 'rgba(105,131,242,.3)', + borderRadius: 10, + }, + }, + label: { + show: false, + }, + barMaxWidth: 40, + markLine: { + label: { + color: '#26a69a', + }, + }, + }, ], }, }); @@ -252,6 +252,8 @@ const loadData = (val) => { } } } + console.log(state.data); + console.log(state.option.yAxis); values = getValue(state.data); titles = getName(state.data); max = Math.max(...state.data); diff --git a/new-digital-agriculture-screen/src/views/entities/index.vue b/new-digital-agriculture-screen/src/views/entities/index.vue index 0dc0cd4..920da90 100644 --- a/new-digital-agriculture-screen/src/views/entities/index.vue +++ b/new-digital-agriculture-screen/src/views/entities/index.vue @@ -133,11 +133,11 @@ const loadData = async () => { await sleep(500); state.data = { one: [ - { value: 3500, name: '大兴乡' }, - { value: 6000, name: '勐撒镇' }, - { value: 4000, name: '勐永镇' }, - { value: 8000, name: '孟定镇' }, - { value: 12000, name: '耿马镇' }, + { value: 4152, name: '大兴乡' }, + { value: 4907.2, name: '勐撒镇' }, + { value: 4502.8, name: '勐永镇' }, + { value: 9455.7, name: '孟定镇' }, + { value: 8653.1, name: '耿马镇' }, ], third: [ // { value: 35.61, value1: 178.06, name: '耿马镇' }, diff --git a/new-digital-agriculture-screen/src/views/land/index.vue b/new-digital-agriculture-screen/src/views/land/index.vue index 8bbbe07..cd9da7e 100644 --- a/new-digital-agriculture-screen/src/views/land/index.vue +++ b/new-digital-agriculture-screen/src/views/land/index.vue @@ -22,7 +22,7 @@
- + @@ -30,7 +30,7 @@