畫折線圖
// 開始畫折線
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 + '車輛數(shù)：' + 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);
}
},
注意點:要取到?jīng)]有塞到圖表數(shù)據(jù)源data1里的數(shù)據(jù)，可以根據(jù)params.dataIndex來確定當前索引寝杖，然后取出對應數(shù)據(jù)源data0中的第幾個违施，來展示不屬于圖表數(shù)據(jù)源data1但屬于原本數(shù)據(jù)源data0的數(shù)據(jù)來展示出來。
餅圖
// 餅圖
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%可以有效避免上方數(shù)據(jù)過多造成的遮擋
data: data,
itemStyle: {
emphasis: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
},
normal: {
label: {
show: true,
formatter: '排吴 : {c}%'
},
labelLine: {
show: true
}
}
},
}
]
};
if (option && typeof option === 'object') {
myChart.setOption(option, true);
}
},
統(tǒng)一處理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時，如果沒能使上一個控件消失就會出現(xiàn)樣式重疊的問題懦鼠。
如圖：
image.png
解決方案：不共用一個el-date-picker分離钻哩，自己負責自己的，可以有效避免這種問題肛冶。
