vue+V-charts实例笔记
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：
-
最大/最小值标记
添加属性：
: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 + '
' +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为整数
}