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
-
柱子宽度设置
Html内需要添加Extend 属性:
< :extend="chartExtend">
...
js内data-return内进行参数设置:
chartExtend:{
series (v) {
v.forEach(i => {
i.barWidth = 50
})
return v
}
},
-
坐标显示不全问题
:grid="grid"
...
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轴表格线不显示
}
-
设置图表标线与标点
<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 },
{ '日期': '1月5日', '成本': 3123, '利润': 3023 },
{ '日期': '1月6日', '成本': 7123, '利润': 5523 }
]
} } }}
</script>
-
柱状图坐标轴内显示每条数据
:settings="chartSettings"
…
this.chartSettings = {
label: { show: true, position: "top",formatter:"{c}件"},
}
-
最大/最小值标记
添加属性：
:mark-point="markPoint"
…
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内添加提示框设置
…
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: ['单位:台', '单位:万元'],//双纵轴上方的单位显示
}