V-CHART
統計 https://v-charts.js.org/#/
echarts中文文檔 http://echarts.baidu.com/option3.html#series-bar.markPoint
Echarts實例文檔 http://echarts.baidu.com/echarts2/doc/doc.html#AxisAxislabel
-
【柱狀圖】柱子寬度設置、圓角設置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+'件';
}
}
}
…
來自 <https://www.jianshu.com/p/aa585c304660>
-
顏色設置
:colors="colors"
…
this.colors = ['#44A1C4','#5CB9DB','#DD74A5','#EBBD70','#7FDFB0']
-
柱狀圖雙座標軸
在chartSettings 內設置：
this.chartSettings = {
showLine: ['金額'],
axisSite: { right: ['金額'] },//右側縱座標數值根據'金額'的數值設置
yAxisName: ['單位:臺', '單位:萬元'],//雙縱軸上方的單位顯示
}
-
雙座標-設置縱座標
（參考echarts手冊 http://echarts.baidu.com/option.html#yAxis）
添加屬性：
: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爲整數
}