|
|
@@ -40,6 +40,19 @@
|
|
|
:height="455"
|
|
|
:name="item.name"
|
|
|
>
|
|
|
+ <div
|
|
|
+ v-if="index === 0"
|
|
|
+ class="dateChange"
|
|
|
+ >
|
|
|
+ <div
|
|
|
+ v-for="(itm, index) in item.btns"
|
|
|
+ :key="index"
|
|
|
+ :class="{active:index === item.checkId}"
|
|
|
+ @click="changeFn(index,item)"
|
|
|
+ >
|
|
|
+ {{ itm }}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
<Echart :option="item.option" />
|
|
|
</Box>
|
|
|
</template>
|
|
|
@@ -61,7 +74,7 @@
|
|
|
:name="itemd.name"
|
|
|
>
|
|
|
<div
|
|
|
- v-if="indexd ===0"
|
|
|
+ v-if="indexd === 0"
|
|
|
class="statistics"
|
|
|
>
|
|
|
<div class="statistics-top">
|
|
|
@@ -355,11 +368,7 @@ const leftContent = ref({
|
|
|
name: '客运量',
|
|
|
option: {
|
|
|
grid: {
|
|
|
- containLabel: true,
|
|
|
- bottom: '10%',
|
|
|
- top: '20%',
|
|
|
- left: '5%',
|
|
|
- right: '5%'
|
|
|
+ containLabel: true
|
|
|
},
|
|
|
tooltip: {
|
|
|
trigger: 'axis',
|
|
|
@@ -367,19 +376,17 @@ const leftContent = ref({
|
|
|
type: 'shadow'
|
|
|
}
|
|
|
},
|
|
|
- // legend: {
|
|
|
- // top: 10,
|
|
|
- // right: 10,
|
|
|
- // data: ['负荷情况'],
|
|
|
- // itemWidth: 18,
|
|
|
- // itemHeight: 18,
|
|
|
- // itemGap: 30,
|
|
|
- // textStyle: {
|
|
|
- // fontSize: 18,
|
|
|
- // color: '#C9D2FA',
|
|
|
- // padding: [0, 0, 0, 10)],
|
|
|
- // },
|
|
|
- // },
|
|
|
+ legend: {
|
|
|
+ top: 10,
|
|
|
+ right: 10,
|
|
|
+ itemWidth: 18,
|
|
|
+ itemHeight: 18,
|
|
|
+ itemGap: 30,
|
|
|
+ textStyle: {
|
|
|
+ fontSize: 18,
|
|
|
+ color: '#C9D2FA'
|
|
|
+ }
|
|
|
+ },
|
|
|
xAxis: {
|
|
|
// name: "班级",
|
|
|
triggerEvent: true,
|
|
|
@@ -412,20 +419,11 @@ const leftContent = ref({
|
|
|
},
|
|
|
yAxis: [
|
|
|
{
|
|
|
- // name: '单位:万',
|
|
|
- // type: 'value',
|
|
|
- // nameTextStyle: {
|
|
|
- // color: '#444444',
|
|
|
- // },
|
|
|
splitNumber: 2,
|
|
|
axisLabel: {
|
|
|
show: true,
|
|
|
fontSize: 18,
|
|
|
color: '#C9D2FA'
|
|
|
- // formatter: function (value) {
|
|
|
- // // 在标签后面添加百分号
|
|
|
- // return value + '%';
|
|
|
- // },
|
|
|
},
|
|
|
axisLine: {
|
|
|
show: false
|
|
|
@@ -447,7 +445,7 @@ const leftContent = ref({
|
|
|
show: true,
|
|
|
fontSize: 18,
|
|
|
color: '#C9D2FA',
|
|
|
- formatter(value:number) {
|
|
|
+ formatter(value: number) {
|
|
|
// 在标签后面添加百分号
|
|
|
return `${value}%`
|
|
|
}
|
|
|
@@ -468,7 +466,7 @@ const leftContent = ref({
|
|
|
],
|
|
|
series: [
|
|
|
{
|
|
|
- name: '负荷情况',
|
|
|
+ name: 'test1',
|
|
|
type: 'bar',
|
|
|
silent: true,
|
|
|
itemStyle: {
|
|
|
@@ -488,7 +486,7 @@ const leftContent = ref({
|
|
|
// },
|
|
|
},
|
|
|
{
|
|
|
- name: '折线图名称',
|
|
|
+ name: 'test2',
|
|
|
type: 'line',
|
|
|
yAxisIndex: 1, // 与第二个 y 轴关联
|
|
|
itemStyle: {
|
|
|
@@ -497,7 +495,9 @@ const leftContent = ref({
|
|
|
data: [ 100, 80, 120, 60, 90, 70 ] // 折线图的数据
|
|
|
}
|
|
|
]
|
|
|
- }
|
|
|
+ },
|
|
|
+ btns: [ '总', '年', '月', '日' ],
|
|
|
+ checkId: 0
|
|
|
},
|
|
|
{
|
|
|
name: '消费占比',
|
|
|
@@ -513,38 +513,50 @@ const leftContent = ref({
|
|
|
fontWeight: 'normal'
|
|
|
}
|
|
|
},
|
|
|
+ grid: {
|
|
|
+ containLabel: true
|
|
|
+ },
|
|
|
// 图表图例
|
|
|
legend: {
|
|
|
show: true,
|
|
|
- orient: 'vertical', // 图例排列方向
|
|
|
+ type: 'scroll',
|
|
|
+ orient: 'horizontal', // 图例排列方向
|
|
|
icon: 'circle', // 图例样式为圆形
|
|
|
itemWidth: 10, // 图例图形的宽度
|
|
|
itemHeight: 16, // 图例图形的高度
|
|
|
itemGap: 10, // 图例项之间的间隔
|
|
|
- right: '6%', // 图例距离容器右侧的距离
|
|
|
- top: 'center', // 图例垂直居中
|
|
|
+ left: 'center', // 图例距离容器右侧的距离
|
|
|
+ bottom: 0, // 图例垂直居中
|
|
|
textStyle: {
|
|
|
- color: '#00ddff' // 图例文字颜色
|
|
|
+ color: 'white', // 图例文字颜色
|
|
|
+ fontSize: 20
|
|
|
}
|
|
|
},
|
|
|
- color: [ '#6386e0', '#fb9a55', '#6bd98d', '#8dfd15', '#6bd98d' ],
|
|
|
+
|
|
|
+ // color: [ '#6386e0', '#fb9a55', '#6bd98d', '#8dfd15', '#6bd98d', '#fff' ],
|
|
|
series: [
|
|
|
{
|
|
|
type: 'pie', // 图表类型为饼图
|
|
|
- radius: [ '18%', '26%' ], // 控制内外圆环的半径，30%代表内圆，60%代表外圆
|
|
|
+ radius: [ '55%', '75%' ], // 控制内外圆环的半径，30%代表内圆，60%代表外圆
|
|
|
avoidLabelOverlap: true, // 是否启用防止标签重叠策略
|
|
|
showEmptyCircle: true, // 是否在无数据的时候显示一个占位圆
|
|
|
label: {
|
|
|
show: true,
|
|
|
formatter: '{b}\n{d}%',
|
|
|
- color: '#b3c9d5'
|
|
|
+ color: 'white'
|
|
|
},
|
|
|
data: [
|
|
|
{ key: 2, name: '0次', value: 30619 },
|
|
|
{ key: 2, name: '1次', value: 5921 },
|
|
|
{ key: 2, name: '2次', value: 1153 },
|
|
|
{ key: 2, name: '3次', value: 266 },
|
|
|
- { key: 2, name: '大于3次', value: 87 }
|
|
|
+ { key: 2, name: '大于3次', value: 87 },
|
|
|
+ { key: 2, name: '大于4次', value: 999 },
|
|
|
+ { key: 2, name: '12次', value: 5921 },
|
|
|
+ { key: 2, name: '22次', value: 1153 },
|
|
|
+ { key: 2, name: '32次', value: 266 },
|
|
|
+ { key: 2, name: '大于32次', value: 87 },
|
|
|
+ { key: 2, name: '大于42次', value: 999 }
|
|
|
]
|
|
|
}
|
|
|
]
|
|
|
@@ -942,6 +954,10 @@ const rightContent = ref([
|
|
|
]
|
|
|
}
|
|
|
] as any)
|
|
|
+
|
|
|
+function changeFn(id:number, item:any) {
|
|
|
+ item.checkId = id
|
|
|
+}
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
@@ -988,6 +1004,38 @@ const rightContent = ref([
|
|
|
display: flex;
|
|
|
justify-content: space-between;
|
|
|
flex-wrap: wrap;
|
|
|
+
|
|
|
+ :deep(.box-content) {
|
|
|
+ position: relative;
|
|
|
+
|
|
|
+ .dateChange {
|
|
|
+ position: absolute;
|
|
|
+ width: 360px;
|
|
|
+ height: 30px;
|
|
|
+ border-radius: 30px;
|
|
|
+ border: solid 1px #2185E8;
|
|
|
+ left: 50%;
|
|
|
+ transform: translate(-50%,0);
|
|
|
+ top: 10px;
|
|
|
+ z-index: 2;
|
|
|
+ display: flex;
|
|
|
+ &>div{
|
|
|
+ width: 90px;
|
|
|
+ color: white;
|
|
|
+ font-size: 16px;
|
|
|
+ text-align: center;
|
|
|
+ cursor: pointer;
|
|
|
+ line-height: 30px;
|
|
|
+ &:not(:first-child){
|
|
|
+ border-left: solid 1px #2185E8;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .active{
|
|
|
+ background: #2185e860;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
}
|
|
|
}
|
|
|
|
