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