标签:height 引导 script gen 根据 文本 trigger reac type
因为工作需要,使用v-chart也有一段时间了,期间针对配置图表也遇到了不少问题,在这里总结一下。
echart的配置项可谓是相当的海量,能不看就不看。而v-chart对其进行了不少的简化,所以我们想要自定义一个图表时,最好按照以下步骤来检查:
v-chart每一个图表都有自己独有的设置项,想要配置这些项需要在组件上加入 :setting="chartSettings"
,然后在vue组建的data里设置chartSettings的值,如下:
<template>
<ve-line :data="chartData" :settings="chartSettings"></ve-line>
</template>
<script>
export default {
data () {
this.chartSettings = {
xAxisType: ‘time‘
}
return {
chartData: {
columns: [‘日期‘, ‘访问用户‘],
rows: [
{ ‘日期‘: ‘2018-01-01‘, ‘访问用户‘: 1393 },
{ ‘日期‘: ‘2018-01-02‘, ‘访问用户‘: 3530 },
{ ‘日期‘: ‘2018-01-03‘, ‘访问用户‘: 2923 }
]
}
}
}
}
</script>
v-chart所有图表组件中共有的属性,直接在图标组件上挂载:属性名称="属性值"
即可设置,下面是一些比较常用的
名称 | 类型 | 默认值 | 介绍 |
---|---|---|---|
data | Object | 无 | 图表的显示数据 |
setting | Object | 无 | 图表的私有属性 |
height | String | 400px | 高度 |
width | String | auto | 宽度,默认根据高度自动适配 |
tooltip-visible | boolean | true | 是否显示提示框 |
legend-visible | boolean | true | 是否显示图例 |
extend | Object | 无 | 设置echart的详细属性 |
公共属性上最重要的可以说就是extend属性了,在vchart的公共属性里extend居然不在基本属性了,而是放在文档后面专门开了一段讲。当时为了找到这个属性可以说是废了老半天功夫。如果你在前两者中都没有找到想要的设置项,那就可以通过这个属性来设置echart的配置,毕竟是基于echart的嘛,所以echart的所有配置在这里都可以适用,下边是配置示例:
<template>
<ve-histogram :data="chartData" :extend="chartExtend"></ve-histogram>
</template>
<script>
export default {
data () {
this.chartExtend = {
series: {
barWidth: 10
},
tooltip: {
trigger: ‘none‘
}
}
/* 等同于
this.chartExtend = {
series (v) {
v.forEach(i => {
i.barWidth = 10
})
return v
},
tooltip (v) {
v.trigger = ‘none‘
return v
}
}
等同于
this.chartExtend = {
‘series.0.barWidth‘: 10,
‘series.1.barWidth‘: 10,
‘tooltip.trigger‘: ‘none‘
}
*/
return {
chartData: { ... }
}
}
}
</script>
接下来就是重头戏了,如果你在前两者里都没有找到,那就只能从echart的配置项里找了,下面是一些目前比较常用的配置项
名称 | 类型 | 介绍 |
---|---|---|
legend | Object | 用于控制图表的图例组件,包括位置、样式、类型、图标等 |
series | Object | 每个图表的专属设置项,用于控制图表的详细样式位置等 |
其中series的属性就可以完成绝大多数配置了,下边是一个配置示例 实现的效果为:
//template
<ve-ring :settings="chartSetting" legend-position="right" :extend="chartExtend"></ve-ring>
...
//script
data () {
return {
chartExtend: {
series: {
center: [112, 92]
},
legend: {
right: 20,
textStyle: {
color: ‘#A0A0A0‘,
fontSize: 12
}
}
}
chartSetting: {
label: {
show: false
},
labelLine: {
show: false
},
radius: [55, 72]
}
}
}
标签:height 引导 script gen 根据 文本 trigger reac type
原文地址:https://www.cnblogs.com/cina33blogs/p/10775518.html