點選右上方紅色按鈕關注“web秀”，讓你真正秀起來
前言
前面有文章，講述了Vue中封裝Echarts元件，但都是直接上代碼，沒有具體對代碼進行講述。今天我們就來看看，如何使Echarts圖表更美觀，都是那部分屬性使其更驚豔的。
前期文章：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 } // 分割線 }
如何使你的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元話費獎勵。再次感謝大家的支援。