vue+V-charts例項筆記
V-CHART
-
【柱狀圖】柱子寬度設定、圓角設定barBorderRadius、顏色設定
Html內需要新增Extend 屬性:
< :extend="chartExtend">
...
js內data-return內進行引數設定:
chartExtend: { series: { //柱子寬度設定barWidth barWidth: 50, itemStyle: { //柱子圓角設定barBorderRadius emphasis: { barBorderRadius: 8 }, normal: { barBorderRadius: 8, color: function (params){ var colorList = ['#eccb95','#EBAC43','#eccb95']; return colorList[params.dataIndex]; } }, //滑鼠懸停時: emphasis: { shadowBlur: 10, shadowOffsetX: 0, shadowColor: 'rgba(0, 0, 0, 0.5)' } } } }
-
座標顯示不全問題
:grid="grid"
...
//統計圖右側寬度60
this.grid = { right: 60 }
-
xy軸詳情設定在Extend 屬性內
this.Extend = { series (v) { v.forEach(i => { i.barWidth = 20//柱狀圖柱子寬度 }) return v }, tooltip (v) { v.trigger = 'none'//提示線不顯示 return v }, 'xAxis.0.axisLabel.show': false,//x軸標籤不顯示 'yAxis.0.axisLabel.show': false,//y軸標籤不顯示 'xAxis.0.splitLine.show': false//x軸表格線不顯示 }
-
設定圖表標線與標點
設定屬性mark-line、mark-point:
<ve-line :data="chartData" :mark-line="markLine" :mark-point="markPoint"> </ve-line>
<template> <ve-line :data="chartData" :mark-line="markLine" :mark-point="markPoint"> </ve-line> </template> <script> // 使用前需先引入對應模組 // import 'echarts/lib/component/markLine' // import 'echarts/lib/component/markPoint' export default { data () { this.markLine = { data: [ { name: '平均線', type: 'average' } ] } this.markPoint = { data: [ { name: '最大值', type: 'max' } ] } return { chartData: { columns: ['日期', '成本', '利潤'], rows: [ { '日期': '1月1日', '成本': 1523, '利潤': 1231 }, { '日期': '1月2日', '成本': 1223, '利潤': 2523 }, { '日期': '1月3日', '成本': 2123, '利潤': 1000 }, { '日期': '1月4日', '成本': 4123, '利潤': 3223 } ] } } }} </script>
-
最大/最小值標記
新增屬性:
:mark-point="markPoint"
JS中:
this.markPoint = {
data: [
{
name: '最大值',
type: 'max',//最小值是min
symbolSize: 60,//標記大小
symbol: 'rect',//標記形狀
symbolOffset: [0, '-50%']//標記位置座標
}
]
}
1.圖形
series[i]-bar.markPoint.symbol string
[ default: 'pin' ]
ECharts 提供的標記型別包括 'circle'圓, 'rect'四邊形, 'roundRect'圓角四邊形, 'triangle'三角形, 'diamond'菱形, 'pin', 'arrow'
2.大小
series[i]-bar.markPoint.symbolSize number, Array, Function
[ default: 50 ]
標記的大小,可以設定成諸如 10 這樣單一的數字,也可以用陣列分開表示寬和高,例如 [20, 10] 表示標記寬為20,高為10。
3.位置
series[i]-bar.markPoint.symbolOffset Array
[ default: [0, 0] ]
標記相對於原本位置的偏移。預設情況下,標記會居中置放在資料對應的位置,但是如果 symbol 是自定義的向量路徑或者圖片,就有可能不希望 symbol 居中。這時候可以使用該配置項配置 symbol 相對於原本居中的偏移,可以是絕對的畫素值,也可以是相對的百分比。
例如 [0, '50%'] 就是把自己向上移動了一半的位置,在 symbol 圖形是氣泡的時候可以讓圖形下端的箭頭對準資料點。
-
echarts中自定義提示框內容
chartExtend:{
tooltip: {
trigger: 'item',
formatter: function(data)
{
return data.name + '<br/>' +data.seriesName + ':'+data.value+'件';
}
}
}
…
-
顏色設定
:colors="colors"
…
this.colors = ['#44A1C4','#5CB9DB','#DD74A5','#EBBD70','#7FDFB0']
-
柱狀圖雙座標軸
在chartSettings 內設定:
this.chartSettings = {
showLine: ['金額'],
axisSite: { right: ['金額'] },//右側縱座標數值根據'金額'的數值設定
yAxisName: ['單位:臺', '單位:萬元'],//雙縱軸上方的單位顯示
}
-
雙座標-設定縱座標
新增屬性:
:extend="chartExtend"
…
在chartExtend內設定:
chartExtend: {
'yAxis.0.min': 0, // yAxis.0:y軸左側 //設定縱座標的最小值
'yAxis.0.max': 5, // 設定縱座標的最大值
'yAxis.0.minInterval': 1 // minInterval設定間隔值,1為整數
'yAxis.1.splitLine.show': false,// yAxis.1: y軸右側 //不顯示值標線
'yAxis.1.minInterval': 25 // minInterval設定間隔值,1為整數
}