前端開發常用技巧（update...）
阿新 • • 發佈：2020-12-29
技術標籤：EchartsJavaScriptjavascriptcsshtmlvue.js前端
前端開發常用技巧
- 1、文字溢位處理
- 2、使用偽類 新增下劃線
- 3、使用偽類 新增下劃線 下劃線居中
- 4、ECharts 柱狀圖 設定立體圓柱型
- 5、ECharts 柱狀圖柱體顏色漸變（每個柱體不同漸變色）
- 6、ECharts x軸資料過多時，新增橫向滾動
- 7、CSS畫梯形
1、文字溢位處理
//單行 .single { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } //多行 .more { display: -webkit-box !important; overflow: hidden; text-overflow: ellipsis; work-break: break-all; -webkit-box-orient: vertical; -webkit-line-clamp: 2; //指定行數 3.4.5.6 ... }
2、使用偽類 新增下劃線
.active:after {
position: absolute;
content: "";
width: 0.48rem;
height: 0.08rem;
bottom: 0;
left:0;
background: #0081dc;
}
3、使用偽類 新增下劃線 下劃線居中
.active:after { position: absolute; content: ""; width: 0.48rem; height: 0.08rem; bottom: -0.09rem; background: #0081dc; left: 50%; transform: translateX(-50%); -webkit-transform: translateX(-50%); }
4、ECharts 柱狀圖 設定立體圓柱型
series: [ { type: "bar", barWidth: 32, itemStyle: { normal: { label: { show: true, //開啟顯示 position: "top", //在上方顯示 textStyle: { //數值樣式 color: "#ffffff", fontSize: 16, }, }, borderWidth: 1, borderColor: "#18CEE2", barBorderRadius: 28, color: (params) => { var colorList = [ ["#65bafe", "#304C7B"], ["#fac410", "#304C7B"], ["#31e4fe", "#304C7B"], ]; var colorItem = colorList[params.dataIndex]; return new this.$echarts.graphic.LinearGradient( 0, 1, 0, 0, [ { offset: 0, color: colorItem[1], }, { offset: 0.5, color: colorItem[0], }, { offset: 1, color: colorItem[0], }, ], false ); }, }, emphasis: { barBorderRadius: 13, shadowBlur: 18, shadowColor: "rgba(218,170, 58, 0.7)", }, }, data: this.problemImproveY, }, { name: "a", tooltip: { show: false, }, type: "pictorialBar", itemStyle: { normal: { label: { show: true, //開啟顯示 position: "top", //在上方顯示 textStyle: { //數值樣式 color: "#ffffff", fontSize: 16, }, }, color: (params) => { var colorList = [ ["#65bafe", "#3780f5"], ["#fee113", "#fac410"], ["#31e4fe", "#11ccf4"], ]; var colorItem = colorList[params.dataIndex]; return new this.$echarts.graphic.LinearGradient( 0, 1, 0, 0, [ { offset: 0, color: colorItem[1], }, { offset: 0.5, color: colorItem[0], }, { offset: 1, color: colorItem[0], }, ], false ); }, borderWidth: 1, borderColor: "#18CEE2", }, }, symbol: "circle", symbolSize: ["32", "22"], symbolPosition: "end", data: this.problemImproveY, z: 3, }, ],
5、ECharts 柱狀圖柱體顏色漸變（每個柱體不同漸變色）
series:[
{
name:'test',
type:'bar',
//柱體的樣式
itemStyle:{
normal:{
//柱體的顏色
//右，下，左，上（1，0，0，0）表示從正右開始向左漸變
color: function(params){
console.log(params);
var colorList = [
['#0F5C7F','#99DFFF'],
['#8D3510','#FFA783'],
['#651180','#D099FF'],
['#4B8D10','#83FFC0'],
['#8D104B','#FF83D8'],
['#7F610F','#FFE899'],
['#108D89','#83FFE9']
];
var colorItem = colorList[params.dataIndex];
return new echarts.graphic.LinearGradient(1,0,0,0,[
{
offset:0,
color: colorItem[0]
},
{
offset:1,
color: colorItem[1]
}
],false);
}
}
},
data: [14,16,19,22,25,30,45]
}
]
6、ECharts x軸資料過多時，新增橫向滾動
設定 dataZoom 屬性
dataZoom: [
{
type: "slider",
show: true,
start: 0, //預設為0
end: 50, //預設為100
xAxisIndex: [0],
handleSize: 0, //滑動條的 左右2個滑動條的大小
height: 5, //元件高度
bottom: 0, //右邊的距離
borderColor: "#e3e3e3",
fillerColor: "#51B7F9",
borderRadius: 10,
backgroundColor: "#e3e3e3", //兩邊未選中的滑動條區域的顏色
showDataShadow: false, //是否顯示資料陰影 預設auto
showDetail: false, //即拖拽時候是否顯示詳細數值資訊 預設true
realtime: true, //是否實時更新
filterMode: "filter",
zlevel: -10,
},
//以下重點： 讓滑鼠滾動從縮放變成移動
{
type: "inside",
xAxisIndex: [0],
zoomOnMouseWheel: false, //滾輪不觸發縮放
moveOnMouseMove: true, //滑鼠移動觸發平移
moveOnMouseWheel: true, //滑鼠滾輪觸發平移
},
],
7、CSS畫梯形
.parallelogram {
/* 梯形 */
width: 0.57rem;
height: 0rem;
// background: #f00;
border-bottom: 0.57rem solid #0081dc;
border-right: 0.3rem solid transparent;
position: absolute;
color: #ffffff;
line-height: 2;
font-size: 0.19rem;
text-align: center;
cursor: pointer;
}
.parallelogramRight {
/* 梯形 */
width: 0.5rem;
height: 0rem;
// background: #f00;
border-top: 0.5rem solid #0a114c;
border-left: 0.25rem solid transparent;
position: absolute;
left: 42%;
color: #ffffff;
line-height: 2;
font-size: 0.19rem;
text-align: center;
cursor: pointer;
span {
float: left;
margin-top: -0.5rem;
}
}
