前言
前面有文章，講述了Vue中封裝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 } // 分割線
} 複制
柱形圖如何設定柱子漸變和圓角
主要通過
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]
}] 複制
柱形圖柱子陰影
從上方
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, // 折線圖的渲染資料
}] 複制
資料格式
這個也是非常簡單，隻需要在需要格式化的地方，加上
formatter
方法，即可對資料進行格式化。
series: [
...
...
{
type: 'bar',
barWidth: 12,
label: {
show: true,
position: 'top',
formatter: (params) => {
return params.value + '萬';
},
color: '#1CD8A8',
fontSize: 14,
fontWeight: 'bold',
distance: 25
},
...
}, 複制
多資料圖表可縮放
在
options
下可以添加
dataZoom
，來控制預設展示位置等。
...
dataZoom: [{
show: true, // 是否顯示滾動圖，依然可以滾動縮放
realtime: true,
start: 0, // 預設起始位置
end: 55 // 預設終點位置
}, {
type: 'inside',
realtime: true,
start: 45,
end: 85
}], 複制
圖例legend詳細參數
可以定義圖例的位置，布局顔色等。
...
legend: {
right: 68, //圖例元件離右邊的距離
orient : 'vertical', //布局 縱向布局
width: 40, //圖行例元件的寬度,預設自适應
x : 'left', //圖例顯示在右邊
itemWidth:10, //圖例标記的圖形寬度
itemHeight:10, //圖例标記的圖形高度
data:['直接通路','郵件營銷','聯盟廣告','視訊廣告','web秀'],
textStyle:{ //圖例文字的樣式
color:'#333',
fontSize:12
}
} 複制
視圖裡面加陰影提示：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;
}
}
}
} 複制
總結
總的來講，顔色搭配是具有觀賞性的主要因素。同時，精簡不需要的元件和功能，能夠一目了然看懂的圖表，不要添加無用的元素說明資訊。這樣反而讓使用者看不懂，不知道圖表要表達什麼主題了。