画折线图
// 开始画折线
category () {
const dom = document.getElementById('slcontainer');
const myChart = echarts.init(dom);
let option = null;
const data = this.stayListData;
var xdateList = data.map(function (item) {
return item.time.slice(5);
});
var valueList = data.map(function (item) {
return item.aveStayTime;
});
option = {
// title: {
// text: '加油站配合度TOP20',
// left: '50%',
// textAlign: 'center'
// },
tooltip: {
trigger: 'item',
formatter: function (params) {
var relVal = params.name;
var ss;
// 在每个字符处进行分解。
ss = relVal.split("-");
var showstr = " " + ss[0] + "月" + ss[1] + '日';
var item = data[params.dataIndex];
showstr += '<br/>' + params.marker + '平均停留时长：' + params.value + '<br/>' + params.marker + '车辆数：' + item.vehicleCount;
return showstr;
}
},
grid: {
left: '7%',
right: '5%',
top: '20%',
bottom: '20%',
},
xAxis: {
type: 'category',
name: '日期',
boundaryGap: true,
nameTextStyle: {
padding: [100, 0, 0, -40]
},
axisTick: {
interval: 'auto',
alignWithLabel: {
boundaryGap: true
}
},
data: xdateList
},
yAxis: {
name: '停留时长（小时）',
type: 'value',
boundaryGap: true,
nameRotate: '90',
nameLocation: 'top',
minInterval: 1,
splitLine: { show: false },
splitNumber: 3,
nameTextStyle: {
padding: [0, 0, 100, 20]
}
},
series: [{
name: 'name',
color: '#3860F4',
data: valueList,
type: 'line'
}]
};
if (option && typeof option === 'object') {
myChart.setOption(option, true);
}
},
注意点:要取到没有塞到图表数据源data1里的数据，可以根据params.dataIndex来确定当前索引，然后取出对应数据源data0中的第几个，来展示不属于图表数据源data1但属于原本数据源data0的数据来展示出来。
饼图
// 饼图
pieChart (data, title) {
const dom = document.getElementById('vmacontainer');
const myChart = echarts.init(dom);
let option = null;
var list = data.map(function (item) {
return item.name;
});
option = {
title: {
text: title,
x: 'center',
textStyle: {
color: '#000',
fontSize: 18
}
},
legend: { // 展示图例
orient: 'horizontal',
x: 'center',
y: '95%',
icon: "circle", // 这个字段控制形状 类型包括 circle，rect ，roundRect，triangle，diamond，pin，arrow，none
itemWidth: 10, // 设置宽度
itemHeight: 10, // 设置高度
itemGap: 20, // 设置间距
data: list
},
color: ['#BA93ED', '#BDD2FD', '#BDEFDB', '#F55F6E', '#FFE661', '#4CBEC7', '#5B8FF9', '#CEBEE3', '#227D51', '#4CC1F0'],
tooltip: {
trigger: 'item',
formatter: function (params) {
return `${params.marker}${params.name}：${params.value}%`
}
},
series: [
{
name: ' 车辆分布',
type: 'pie',
radius: '65%',
center: ['50%', '55%'],// 改成55%可以有效避免上方数据过多造成的遮挡
data: data,
itemStyle: {
emphasis: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
},
normal: {
label: {
show: true,
formatter: '{b} : {c}%'
},
labelLine: {
show: true
}
}
},
}
]
};
if (option && typeof option === 'object') {
myChart.setOption(option, true);
}
},
统一处理table表头高度
// 样式部分
<el-table
:header-cell-class-name="handlemyclass"
</el-table>
// method部分
methods: {
// 处理table头部
handlemyclass (row, column, rowIndex, columnIndex) {
return 'lableClass-userManagement'
},
}
// css部分
.lableClass-userManagement {
height: 40px !important;
padding: 0 !important;
}
使用el-date-picker时遇到的奇怪问题
当需求需要type="month/year"和 type="date"切换时,共用了同一个el-date-picker时，如果没能使上一个控件消失就会出现样式重叠的问题。
如图：
image.png
解决方案：不共用一个el-date-picker分离，自己负责自己的，可以有效避免这种问题。
网友评论