echarts里面的参数解释_Echarts适用小技巧：适用参数详细说明及示例-TS文件
點(diǎn)擊右上方紅色按鈕關(guān)注“web秀”，讓你真正秀起來(lái)
前言
前面有文章，講述了Vue中封裝Echarts組件，但都是直接上代碼，沒(méi)有具體對(duì)代碼進(jìn)行講述。今天我們就來(lái)看看，如何使Echarts圖表更美觀(guān)，都是那部分屬性使其更驚艷的。
如何使你的Echarts圖表更具有觀(guān)賞性和實(shí)用性？
如何隱藏坐標(biāo)軸
Echarts中options對(duì)象有xAxis、yAxis參數(shù)，可以控制是否顯示坐標(biāo)軸、坐標(biāo)軸刻度標(biāo)簽、坐標(biāo)軸軸線(xiàn)、坐標(biāo)軸刻度、分割線(xiàn)等yAxis: { // y軸
type: 'value',
show: false, // 是否顯示坐標(biāo)軸
data: [],
axisLabel: { show: false }, // 坐標(biāo)軸刻度標(biāo)簽
axisLine: { show: false }, // 坐標(biāo)軸軸線(xiàn)
axisTick: { show: false }, // 坐標(biāo)軸刻度
splitLine: { show:false } // 分割線(xiàn)
}
如何使你的Echarts圖表更具有觀(guān)賞性和實(shí)用性？
柱形圖如何設(shè)置柱子漸變和圓角
主要通過(guò)itemStyle屬性，color來(lái)設(shè)置漸變，barBorderRadius屬性設(shè)置圓角，遵循css左上、右上、右下、左下順序。同時(shí)下方代碼加了柱子數(shù)值label配置。barWidth是柱子寬度。series : [{
type: 'bar',
barWidth: 40, // 柱子寬度
label: {
show: true,
position: 'top', // 位置
color: '#1CD8A8',
fontSize: 14,
fontWeight: 'bold', // 加粗
distance: 20 // 距離
}, // 柱子上方的數(shù)值
itemStyle: {
barBorderRadius: [20, 20, 0, 0],// 圓角(左上、右上、右下、左下)
color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
'#2FAEF2',
'#1CD8A8'
].map((color, offset) => ({color, offset}))), // 漸變
},
data: [10, 52, 200, 334, 390, 330, 220]
}]
如何使你的Echarts圖表更具有觀(guān)賞性和實(shí)用性？
柱形圖柱子陰影
從上方series可以看出，接收的數(shù)組類(lèi)型的。所以我們?cè)诩右粋€(gè)，同樣的type，不過(guò)數(shù)據(jù)，我們?cè)诿總€(gè)值上+100，做成陰影即可。var data = [10, 52, 200, 334, 390, 330, 220];
...
series : [{ // 陰影柱形
type: 'bar',
barWidth: 40,
itemStyle: {
color: 'rgba(167,167,167,0.2)',
barBorderRadius: [20, 20, 0, 0]
},
barGap:'-100%',
data: data.map(item=>{
return item+=100
}),
},
...
柱形圖添加折線(xiàn)
同上方一樣，我們還可以再在series里面添加line，同時(shí)可以設(shè)置折線(xiàn)顏色(lineStyle)，折線(xiàn)線(xiàn)條區(qū)域顏色(areaStyle)等，都是可以通過(guò)new echarts.graphic.LinearGradient()來(lái)設(shè)置漸變。series: [
...
...
{
type:'line',
smooth: true, // 線(xiàn)條轉(zhuǎn)折有弧度
symbol: 'circle', // 數(shù)值點(diǎn)類(lèi)型('circle', 'rectangle', 'triangle', 'diamond', 'emptyCircle', 'emptyRectangle', 'emptyTriangle', 'emptyDiamond')
showSymbol: true,
symbolSize: 8, // 數(shù)值點(diǎn)的大小
itemStyle: {
color: ['#1CD8A8']
},// 數(shù)值點(diǎn)的顏色
lineStyle: {
width: 2,
color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{offset: 0, color: '#2FAEF2'},{offset: 1, color: '#1CD8A8'}])
}, // 線(xiàn)條漸變
areaStyle: {
color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
{offset: 0, color: 'rgba(47,174,242,0)'},
{offset: 0.5, color: 'rgba(34,202,192,0.04)'},
{offset: 1, color: 'rgba(28,216,168,0.52)'}]
)
}, // 線(xiàn)條區(qū)域漸變
data: data, // 折線(xiàn)圖的渲染數(shù)據(jù)
}]
如何使你的Echarts圖表更具有觀(guān)賞性和實(shí)用性？
數(shù)據(jù)格式
這個(gè)也是非常簡(jiǎn)單，只需要在需要格式化的地方，加上formatter方法，即可對(duì)數(shù)據(jù)進(jìn)行格式化。series: [
...
...
{
type: 'bar',
barWidth: 12,
label: {
show: true,
position: 'top',
formatter: (params) => {
return params.value + '萬(wàn)';
},
color: '#1CD8A8',
fontSize: 14,
fontWeight: 'bold',
distance: 25
},
...
},
如何使你的Echarts圖表更具有觀(guān)賞性和實(shí)用性？
多數(shù)據(jù)圖表可縮放
在options下可以添加dataZoom，來(lái)控制默認(rèn)展示位置等。...
dataZoom: [{
show: true, // 是否顯示滾動(dòng)圖，依然可以滾動(dòng)縮放
realtime: true,
start: 0, // 默認(rèn)起始位置
end: 55 // 默認(rèn)終點(diǎn)位置
}, {
type: 'inside',
realtime: true,
start: 45,
end: 85
}],
如何使你的Echarts圖表更具有觀(guān)賞性和實(shí)用性？
圖例legend詳細(xì)參數(shù)
可以定義圖例的位置，布局顏色等。...
legend: {
right: 68, //圖例組件離右邊的距離
orient : 'vertical', //布局 縱向布局
width: 40, //圖行例組件的寬度,默認(rèn)自適應(yīng)
x : 'left', //圖例顯示在右邊
itemWidth:10, //圖例標(biāo)記的圖形寬度
itemHeight:10, //圖例標(biāo)記的圖形高度
data:['直接訪(fǎng)問(wèn)','郵件營(yíng)銷(xiāo)','聯(lián)盟廣告','視頻廣告','web秀'],
textStyle:{ //圖例文字的樣式
color:'#333',
fontSize:12
}
}
如何使你的Echarts圖表更具有觀(guān)賞性和實(shí)用性？
視圖里面加陰影提示：tooltip，提示框組件
show，默認(rèn)true，是否顯示提示框組件
trigger，觸發(fā)類(lèi)型，item、axis、none，當(dāng)為none的時(shí)候代表什么都不觸發(fā)，就不會(huì)顯示提示框
axisPointer，坐標(biāo)軸指示器配置項(xiàng)，實(shí)際上坐標(biāo)軸指示器的全部功能，都可以通過(guò)軸上的 axisPointer 配置項(xiàng)完成。
axisPointer的type類(lèi)型：
1、'line' 直線(xiàn)指示器
2、'shadow' 陰影指示器
3、'none' 無(wú)指示器
4、'cross' 十字準(zhǔn)星指示器。其實(shí)是種簡(jiǎn)寫(xiě)，表示啟用兩個(gè)正交的軸的 axisPointer。
label屬性加formatter函數(shù)，可以格式化提示框顯示內(nèi)容...
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow',
label:{
formatter: function (params) {
return '星期：' + params.value;
}
}
}
}
如何使你的Echarts圖表更具有觀(guān)賞性和實(shí)用性？
總結(jié)
總的來(lái)講，顏色搭配是具有觀(guān)賞性的主要因素。同時(shí)，精簡(jiǎn)不需要的組件和功能，能夠一目了然看懂的圖表，不要添加無(wú)用的元素說(shuō)明信息。這樣反而讓用戶(hù)看不懂，不知道圖表要表達(dá)什么主題了。
公告
為了感謝大家一直以來(lái)的支持，小編發(fā)起了抽獎(jiǎng)活動(dòng)，大家可以去參與，轉(zhuǎn)發(fā)抽獎(jiǎng)活動(dòng)和關(guān)注小編即可參與，抽出5名小伙伴每人20元話(huà)費(fèi)獎(jiǎng)勵(lì)。再次感謝大家的支持。
總結(jié)
以上是生活随笔為你收集整理的echarts里面的参数解释_Echarts适用小技巧：适用参数详细说明及示例-TS文件的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： html内容点击按钮自动复制,HTML页
- 下一篇： nifi将hive同步到oracle,N