OrderOption: { title: { text: '订单走势图'//标题 }, tooltip: { trigger: 'axis' }, color:['#23B899','#FFACE2','#333FFF'], //顶部小圆点颜色 legend: { data: [ { name: '订单量', icon: 'circle'//顶部小圆点样式 圆圈 方块 }, { name: '付款订单', icon: 'circle' }, { name: '售后订单', icon: 'circle' } ], left: 'right',//顶部右侧 padding: [10, 60, 0, 0] // [5, 10, 15, 20]//顶部右侧挪动位置 }, grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true }, toolbox: { feature: { saveAsImage: {} } }, xAxis: { type: 'category', boundaryGap: false, data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],//底部信息
axisLabel: { //设置轴线 文字 的属性(x轴和y轴 都是这个属性)
show: true,
textStyle: {
color: '#777D9C', //更改坐标轴文字颜色
fontSize: 12 //更改坐标轴文字大小
}
},
axisLine: { //设置 轴线 的属性(x轴和y轴 都是这个属性)
//x轴线的颜色以及宽度
show: true,
lineStyle: {
color: '#777D9C',
0,
type: 'solid'
}
},
splitLine: { //设置网格线颜色 (x轴 和 y轴 都是这个属性)
show: true,
lineStyle: {
color: ['#EAEBF0'],
1,
type: 'solid'
}
}
}, yAxis: { type: 'value',
max:500, //设置Y坐标轴最大值
}, series: [ { name: '订单量', type: 'line', stack: '总量', data: [120, 132, 101, 134, 90, 230, 210],//底部数据 lineStyle: { color: '#23B899' } }, { name: '付款订单', type: 'line', stack: '总量', data: [220, 182, 191, 234, 290, 330, 310], lineStyle: { color: '#FFACE2' } }, { name: '售后订单', type: 'line', stack: '总量', data: [150, 232, 201, 154, 190, 330, 410], lineStyle: { color: '#333FFF' } } ] }
标题中添加按钮
<!-- //柱状图 --> <div style="font-size: 12px; color: #999; box-sizing: border-box; margin-top: 24px; padding-right: 60px"> <div class="v-card-body" style="position: relative"> <div class="engage"> <div class="payment nobgc" style=" 100%"> <div class="payment-one" style=" 100%"> <!-- // 地区分布 这里是echarts--> <div id="box" ref="barg" style=" 100%; height: 400px"></div> </div>
// 这里是按钮 <div style="z-index: 999; float: left; position: absolute; right: 60px; top: 20px; display: flex" > <div :class="[{ btn_selected: isBtn_1 }, 'btn_ps']" @click="dataStatistics(1)">客户群发统计</div> <div :class="[{ btn_selected: isBtn_2 }, 'btn_ps']" @click="dataStatistics(2, 'huoke')">智能获客统计</div> <div :class="[{ btn_selected: isBtn_3 }, 'btn_ps']" @click="dataStatistics(2, 'chat')">企微聊天统计</div> <div :class="[{ btn_selected: isBtn_4 }, 'btn_ps']" @click="dataStatistics(3)">客服下单咨询统计</div> </div> </div> </div> </div> </div>
.btn_ps { height: 31px; background: #f3f3fb; border-radius: 4px; border: 1px solid rgba(135, 139, 146, 0.15); color: #6c7293; line-height: 31px; text-align: center; margin: 0 10px; font-size: 12px; padding: 0 10px; } .btn_selected { background: #4983f8; color: #ffffff; }