diff --git a/src/assets/images/crops.png b/src/assets/images/crops.png new file mode 100755 index 0000000..860dd48 Binary files /dev/null and b/src/assets/images/crops.png differ diff --git a/src/views/crops/area/index.vue b/src/views/crops/area/index.vue index 634264a..c6ea42e 100644 --- a/src/views/crops/area/index.vue +++ b/src/views/crops/area/index.vue @@ -42,11 +42,46 @@
- - - - - +
+
+ + 小麦 +
+
12364亩
+
35%
+
+
+
+ + 玉米 +
+
12364亩
+
35%
+
+
+
+ + 大豆 +
+
12364亩
+
35%
+
+
+
+ + 地瓜 +
+
12364亩
+
35%
+
+
+
+ + 花生 +
+
12364亩
+
35%
+
@@ -287,10 +322,10 @@ let tableData = [ }, ]; let TypeTime = { - 大豆: [1100, 1395, 1948, 2203, 3402, 1860, 2934, 2490], - 小麦: [1283, 2883, 2939, 1233, 1992, 1928, 3949, 1929], - 地瓜: [1823, 1948, 1928, 2294, 2302, 3903, 3493, 2323], - 花生: [2374, 1934, 3943, 3493, 2083, 1928, 2984, 3279], + 大豆: [1100, 1395, 1948, 2203, 3402, 1860, 2934, 2490, 2323], + 小麦: [1283, 2883, 2939, 1233, 1992, 1928, 3949, 1929, 3434], + 地瓜: [1823, 1948, 1928, 2294, 2302, 3903, 3493, 2323, 2545], + 花生: [2374, 1934, 3943, 3493, 2083, 1928, 2984, 3279, 1739], }; // 组件挂载完成后执行 @@ -307,7 +342,6 @@ onMounted(() => { farmland(); ProgressBar(); ASdivision(); - leftProgressBar(); }); /*-------------地图------------------------*/ @@ -929,11 +963,11 @@ function areachar() { fontFamily: 'Din-Light', }, color: [ - '#123dac', - '#73e2e2', - '#ff7e85', - '#9b52ff', - '#fac524', + 'rgba(252, 169, 63, 0.8)', + 'rgba(110, 209, 84, 0.8)', + 'rgba(103, 153, 242, 0.8)', + 'rgba(4, 199, 247, 0.9)', + 'rgba(229, 205, 38, 0.8)', '#46caff', '#a1e867', '#10b2b2', @@ -966,6 +1000,15 @@ function areachar() { fontSize: 24, }, }, + // legend: { + // show: true, + // top: '10', + // left: 'center', + // textStyle: { color: 'rgba(255,255,255,.9)' }, + // itemWidth: 20, + // itemHeight: 12.5, + // icon: 'stack', + // }, tooltip: { trigger: 'axis', @@ -999,9 +1042,42 @@ function areachar() { grid: { left: 60, right: 10, - top: 50, + top: 60, bottom: 50, }, + dataZoom: [ + { + // start: 0,//默认为0 + // end: 100,//默认为100 + type: 'slider', + show: false, + // xAxisIndex: [0], + handleSize: 0, //滑动条的 左右2个滑动条的大小 + startValue: 0, // 初始显示值 + endValue: 6, // 结束显示值 + height: 10, //组件高度 + left: '5%', //左边的距离 + right: '4%', //右边的距离 + bottom: 5, //底边的距离 + borderColor: '#000', + fillerColor: '#269cdb', + borderRadius: 5, + backgroundColor: '#33384b', //两边未选中的滑动条区域的颜色 + showDataShadow: false, //是否显示数据阴影 默认auto + showDetail: false, //即拖拽时候是否显示详细数值信息 默认true + realtime: true, //是否实时更新 + filterMode: 'filter', + }, + //下面这个属性是里面拖到 + { + type: 'inside', + show: true, + // xAxisIndex: [0], + start: 1, //默认为1 + end: 100, //默认为100 + }, + ], + xAxis: { type: 'category', boundaryGap: false, @@ -1056,9 +1132,31 @@ function areachar() { cursor: 'pointer', showSymbol: false, lineStyle: { + color: 'rgba(252, 169, 63, 0.8)', shadowColor: 'rgba(18,61,172,0.5)', shadowBlur: 10, }, + areaStyle: { + normal: { + color: new echarts.graphic.LinearGradient( + 0, + 0, + 0, + 1, + [ + { + offset: 0, + color: 'rgba(252, 169, 63, 0.8)', + }, + { + offset: 1, + color: 'rgba(252, 169, 63, 0)', + }, + ], + false + ), + }, + }, }, { name: '小麦', @@ -1069,9 +1167,31 @@ function areachar() { cursor: 'pointer', showSymbol: false, lineStyle: { + color: 'rgba(110, 209, 84, 0.8)', shadowColor: 'rgba(115,226,226,0.5)', shadowBlur: 10, }, + areaStyle: { + normal: { + color: new echarts.graphic.LinearGradient( + 0, + 0, + 0, + 1, + [ + { + offset: 0, + color: 'rgba(110, 209, 84, 0.8)', + }, + { + offset: 1, + color: 'rgba(110, 209, 84, 0)', + }, + ], + false + ), + }, + }, }, { name: '地瓜', @@ -1082,9 +1202,31 @@ function areachar() { cursor: 'pointer', showSymbol: false, lineStyle: { + color: 'rgba(103, 153, 242, 0.8)', shadowColor: 'rgba(255,126,133,0.5)', shadowBlur: 10, }, + areaStyle: { + normal: { + color: new echarts.graphic.LinearGradient( + 0, + 0, + 0, + 1, + [ + { + offset: 0, + color: 'rgba(103, 153, 242, 0.8)', + }, + { + offset: 1, + color: 'rgba(103, 153, 242, 0)', + }, + ], + false + ), + }, + }, }, { name: '花生', @@ -1095,9 +1237,67 @@ function areachar() { cursor: 'pointer', showSymbol: false, lineStyle: { + color: 'rgba(4, 199, 247, 0.9)', shadowColor: 'rgba(255,120,168,0.5)', shadowBlur: 10, }, + areaStyle: { + normal: { + color: new echarts.graphic.LinearGradient( + 0, + 0, + 0, + 1, + [ + { + offset: 0, + color: 'rgba(4, 199, 247, 0.9)', + }, + { + offset: 1, + color: 'rgba(4, 199, 247, 0)', + }, + ], + false + ), + }, + }, + }, + { + name: '玉米', + data: TypeTime.玉米, + type: 'line', + smooth: true, + smoothMonotone: 'x', + cursor: 'pointer', + showSymbol: false, + lineStyle: { + color: 'rgba(229, 205, 38, 0.8)', + shadowColor: 'rgba(255,120,168,0.5)', + shadowBlur: 10, + }, + + areaStyle: { + normal: { + color: new echarts.graphic.LinearGradient( + 0, + 0, + 0, + 1, + [ + { + offset: 0, + color: 'rgba(229, 205, 38, 0.8)', + }, + { + offset: 1, + color: 'rgba(229, 205, 38, 0)', + }, + ], + false + ), + }, + }, }, ], }; @@ -1108,75 +1308,6 @@ function areachar() { }); } -function leftProgressBar() { - const leftProgressBarrDivIntance = echarts.init(leftProgressBarDiv.value); - var option = { - // backgroundColor: '#031d33', - grid: { - top: 0, - bottom: 0, - left: '10%', - right: '10%', - }, - xAxis: { - show: false, - type: 'value', - boundaryGap: [0, 0], - }, - yAxis: [ - { - type: 'category', - data: [''], - axisLine: { show: false }, - axisTick: [ - { - show: false, - }, - ], - }, - ], - series: [ - { - name: '金额', - type: 'bar', - zlevel: 1, - itemStyle: { - normal: { - barBorderRadius: 30, - color: new echarts.graphic.LinearGradient(1, 0, 0, 1, [ - { - offset: 1, - color: 'rgba(7,99,84,0.95) ', - }, - { - offset: 0, - color: 'rgba(71,179,161,0.95)', - }, - ]), - }, - }, - barWidth: 20, - data: [10], - }, - { - name: '背景', - type: 'bar', - barWidth: 20, - barGap: '-100%', - data: [20], - itemStyle: { - normal: { - color: 'rgba(255, 255, 255, 0.2)', - barBorderRadius: 50, - }, - }, - }, - ], - }; - option && leftProgressBarrDivIntance.setOption(option, true); - // useEcharts(leftProgressBarrDivIntance, option); -} - function typesof() { const typesofDivIntance = echarts.init(typesofDiv.value); var option = { @@ -1414,8 +1545,8 @@ function farmland() { ], }; farmlandDivIntance.on('click', function (params) { - console.log(params.name) - }) + console.log(params.name); + }); option && farmlandDivIntance.setOption(option, { notMerge: true, grid: { bottom: 20 } }); useEcharts(farmlandDivIntance, option); @@ -2016,7 +2147,8 @@ $height: calc(100vh - 100px); left: 20px; height: $height; width: 25%; - background: rgba(2, 31, 26, 0.3); + background: rgba(2, 31, 26, 0.85); + box-shadow: inset 0px 0px 15px 6px rgba(41, 255, 255, 0.5); .leftTop { max-width: calc(100% - 20px); @@ -2054,10 +2186,38 @@ $height: calc(100vh - 100px); } .tableDiv { - background: rgba(255, 255, 255, 0.05); + // background: rgba(255, 255, 255, 0.05); display: flex; justify-content: center; width: 85%; + flex-direction: column; + padding: 5px 10px 5px 10px; + color: rgba(255, 255, 255, 1); + .Crops { + display: flex; + width: 100%; + margin-bottom: 10px; + font-size: 14px; + font-weight: 400; + height: 31px; + flex-direction: row; + align-items: center; + justify-content: space-around; + opacity: 1; + background: linear-gradient( + 90deg, + rgba(21, 173, 148, 0.1) 0%, + rgba(21, 173, 148, 0) 100% + ); + div { + display: flex; + align-items: center; + } + } + .el-checkbox-group { + display: flex; + flex-direction: column; + } :deep(.ones) { width: 100%; @@ -2088,7 +2248,8 @@ $height: calc(100vh - 100px); display: flex; flex-direction: column; align-items: center; - background: rgba(2, 31, 26, 0.3); + background: rgba(2, 31, 26, 0.85); + box-shadow: inset 0px 0px 15px 6px rgba(41, 255, 255, 0.5); .rightTop { width: 100%;