echarts下⾯的字体调整和柱状宽度
<!-- @author 李致同 -->
<!-- @Description 供应商管理-添加 -->
<template>
<div >
<div class="table_stl">
<el-tabs v-model="activeName" @tab-click="handleClick">
<el-tab-pane label="终端-云端" name="first">textstyle
<div class="monitor-div">
<!-- 分割线 -->
<div>
<template>
<el-table :data="tableData" stripe >
<el-table-column prop="date" label="总访问量" width="191px"> </el-table-column>
<el-table-column prop="name" label="成功访问量" width="191px"> </el-table-column>
<el-table-column prop="address" label="账号错误访问量" width="191px"> </el-table-column>
<el-table-column prop="address" label="服务器错误访问量" width="191px"> </el-table-column>
<el-table-column prop="address" label="成功访问率" width="191px"> </el-table-column>
<el-table-column prop="address" label="平均接⼝访问时间" width="191px"> </el-table-column>
</el-table>
</template>
</div>
<!-- 分割线 -->
<div ></div>
<!-- 分割线 -->
<div>
<el-date-picker v-model="value6" type="daterange" range-separator="⾄" start-placeholder="开始⽇期" end-placeholder="结束⽇期"> </el-date-picker>              <el-select v-model="classification.label" placeholder="请选择" >
<el-option v-for="item in classification" :key="item.value" :label="item.label" :value="item.value" />
</el-select>
<el-select v-model="classification.label" placeholder="请选择" >
<el-option v-for="item in classification" :key="item.value" :label="item.label" :value="item.value" />
</el-select>
<el-select v-model="classification.label" placeholder="请选择" >
<el-option v-for="item in classification" :key="item.value" :label="item.label" :value="item.value" />
</el-select>
<el-button type="primary" icon="el-icon-search" >搜索</el-button>
</div>
</div>
<!-- 分割线 -->
<div class="monitor-Icon" id="day" ></div>
<!-- <div class="monitor-Icon">
<div>
<h2>访问统计量</h2>
<i class="el-icon-document"></i>
</div>
</div> -->
</el-tab-pane>
<el-tab-pane label="配置管理" name="second">
<!-- <div ref="chart"></div> -->
<!-- <div id="day" ></div> -->
</el-tab-pane>
</el-tabs>
</div>
</div>
</template>
<script>
const echarts = require('echarts');
export default {
data() {
return {
value6: '', //⽇期选择
activeName: 'first',
tableData: [
{
date: '10947601',
name: '10650731',
address: '14160'
}
],
classification: [
//分类
{
value: '选项1',
label: '车友'
},
{
value: '选项2',
label: '车友sd'
}
};
},
//  分割线
methods: {
echarts() {
// 基于准备好的dom，初始化echarts实例
var day = echarts.ElementById('day'));      // 指定图表的配置项和数据
var day_options = {
title: {
text: '访问量统计'
// subtext: '单位：条'
},
tooltip: {
trigger: 'axis'
},
toolbox: {
show: true,
feature: {
dataZoom: {
yAxisIndex: 'none'
}, //区域缩放，区域缩放还原
dataView: {
readOnly: false
}, //数据视图
magicType: {
type: ['line', 'bar']
}, //切换为折线图，切换为柱状图
restore: {}, //还原
saveAsImage: {} //保存为图⽚
}
},
xAxis: {
type: 'category',
boundaryGap: false,
//  rotate: -25, // 旋转⾓度
axisLabel: {
interval: 0, //强制⽂字产⽣间隔
rotate: 45, //⽂字逆时针旋转45°
textStyle: {
//⽂字样式
color: 'black',
fontSize: 12,
fontFamily: 'Microsoft YaHei'
}
},
data: [
'27⽇',
'28⽇',
'29⽇',
'30⽇',
'01⽇',
'02⽇',
'03⽇',
'04⽇',
'05⽇',
'06⽇',
'07⽇',
'08⽇',
'09⽇',
'10⽇',
'11⽇',
'12⽇',
'13⽇',
'14⽇',
'15⽇',
'16⽇',
'17⽇',
'18⽇',
'19⽇',
'20⽇',
'21⽇',
'22⽇',
'23⽇',
'24⽇',
'25⽇',
'26⽇'
]
},
yAxis: {
type: 'value'
series: [
{
name: '访问量统计',
barWidth : 10,//柱图宽度
type: 'line',
data: [370, 280, 6078, 380, 280, 590, 10, 7990, 50, 60, 30, 20, 60, 30, 20, 50, 10, 70, 50, 60, 30, 20, 60, 30, 20, 50, 10, 70, 50, 60, 30, 20, 60, 30, 20, 50, 10, 70, 50, 60],            markPoint: {
data: [
{
type: 'max',
name: '最⼤值'
},
{
type: 'min',
name: '最⼩值'
}
]
}
}
]
};
day.setOption(day_options);
}
},
//  分割线
mounted() {
}
};
</script>
<style  scoped lang="scss">
.table_stl {
.monitor-div {
width: 100%;
height: 140px;
// border: 1px solid red;
div {
//  background: red;
}
div:nth-child(3) {
display: flex;
//  background: wheat;
div {
width: 220px;
height: 40px;
}
}
}
}
.monitor-Icon {
width: 71%;
height: 300px;
//  border: 1px solid springgreen;
div {
width: 100%;
height: 30px;
// border: 1px solid red;
display: flex;
h2 {
text-align: center;
}
}
}
</style>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。