diff --git a/src/components/ChartsBarLine/index.vue b/src/components/ChartsBarLine/index.vue index b04f5bd..359e688 100644 --- a/src/components/ChartsBarLine/index.vue +++ b/src/components/ChartsBarLine/index.vue @@ -36,8 +36,8 @@ type: Object, default: () => { return { - left: "5%", - right: "5%", + left: '15%', + right: '15%', bottom: "16%", top: "16%", containLabel: true, @@ -133,14 +133,26 @@ }, 100); } }; - - + const splitLineColors = [ + '#000', '#ccc', '#ccc', '#ccc', '#ccc', + '#ccc', '#ccc', '#ccc', '#ccc', '#ccc', + '#ccc', '#ccc', '#ccc', '#ccc', '#000' + ]; + function getSplitLine(index) { + return { + show: true, + lineStyle: { + color: splitLineColors, + width: 1 + } + } + } const getChartOption = () => { console.log(props.legendData, props.xAxisData, props.seriesData) const series = props.seriesData.map((item, index) => { const colors = [ ["#248ff7", "#6f5be8"], - ["#248ff7", "#6f5be8"], + ["#EE6666", "#EE6666"], ]; const color = colors[index % colors.length]; @@ -198,11 +210,13 @@ type: "category", data: props.xAxisData, axisLine: { + show: true, lineStyle: { color: "#ccc", - }, + width: 1, + } }, - + position: 'bottom', axisLabel: { textStyle: { fontFamily: "Microsoft YaHei", @@ -235,37 +249,49 @@ }, yAxis: [ - - { // 水位 - 右侧 - type: 'value', - name: '水位 (m)', - axisLabel: { color: '#EE6666' }, - nameTextStyle: { color: '#EE6666', fontWeight: 'bold' }, - splitLine: { - show: true, - lineStyle: { - color: "#ccc", - }, - }, - }, { // 雨量 - 左侧 type: 'value', name: '雨量 (mm)', inverse: true, nameLocation: 'start', - position: 'right', axisLabel: { color: '#1075FD' }, nameTextStyle: { color: '#1075FD', fontWeight: 'bold' }, - splitLine: { - show: true, - lineStyle: { - color: "#ccc", - }, + splitLine: getSplitLine(0), + }, + { // 水位 - 右侧 + type: 'value', + name: '水位 (m)', + position: 'right', + axisLabel: { color: '#EE6666' }, + nameTextStyle: { color: '#EE6666', fontWeight: 'bold' }, + splitLine: getSplitLine(1), + }, + ], + dataZoom: [ + { + type: 'inside', // 内置型数据区域缩放组件 + xAxisIndex: [0], // 控制第一个x轴 + start: 0, + end: 100 + }, + { + type: 'slider', // 滑动条型数据区域缩放组件 + xAxisIndex: [0], + start: 0, + end: 100, + bottom: 50, // 距离底部距离 + height: 30, // 高度 + fillerColor: 'rgba(167,183,204,0.4)', // 选中区域的背景色 + borderColor: '#ddd', + textStyle: { + color: '#999' }, - + handleSize: '100%', // 手柄大小 + handleStyle: { + color: '#a7b7cc' + } } ], - series: series, }; diff --git a/src/components/ETree/index.vue b/src/components/ETree/index.vue index 6b731eb..0a0b7e1 100644 --- a/src/components/ETree/index.vue +++ b/src/components/ETree/index.vue @@ -1,4 +1,3 @@ -