网站流程设计,网站翻书效果,求2021没封的良心网站,网站建设自检自查如何配置图表信息
echart的配置项可谓是相当的海量#xff0c;能不看就不看。而v-chart对其进行了不少的简化#xff0c;所以我们想要自定义一个图表时#xff0c;最好按照以下步骤来检查#xff1a;
图表私有属性
v-chart每一个图表都有自己独有的设置项#xff0c;想…如何配置图表信息
echart的配置项可谓是相当的海量能不看就不看。而v-chart对其进行了不少的简化所以我们想要自定义一个图表时最好按照以下步骤来检查
图表私有属性
v-chart每一个图表都有自己独有的设置项想要配置这些项需要在组件上加入 :settingchartSettings然后在vue组建的data里设置chartSettings的值如下:
templateve-line :datachartData :settingschartSettings/ve-line
/templatescriptexport 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所有图表组件中共有的属性直接在图标组件上挂载:属性名称属性值即可设置下面是一些比较常用的
名称类型默认值介绍dataObject无图表的显示数据settingObject无图表的私有属性heightString400px高度widthStringauto宽度默认根据高度自动适配tooltip-visiblebooleantrue是否显示提示框legend-visiblebooleantrue是否显示图例extendObject无设置echart的详细属性
公共属性上最重要的可以说就是extend属性了在vchart的公共属性里extend居然不在基本属性了而是放在文档后面专门开了一段讲。当时为了找到这个属性可以说是废了老半天功夫。如果你在前两者中都没有找到想要的设置项那就可以通过这个属性来设置echart的配置毕竟是基于echart的嘛所以echart的所有配置在这里都可以适用下边是配置示例
templateve-histogram :datachartData :extendchartExtend/ve-histogram
/templatescriptexport 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 nonereturn v}}等同于this.chartExtend {series.0.barWidth: 10,series.1.barWidth: 10,tooltip.trigger: none}*/return {chartData: { ... }}}}
/scriptEchart配置项
接下来就是重头戏了如果你在前两者里都没有找到那就只能从echart的配置项里找了下面是一些目前比较常用的配置项
名称类型介绍legendObject用于控制图表的图例组件包括位置、样式、类型、图标等seriesObject每个图表的专属设置项用于控制图表的详细样式位置等
其中series的属性就可以完成绝大多数配置了下边是一个配置示例 实现的效果为
图例位于图表右方且距右边缘20px图例颜色#A0A0A0字体12px环图中心相对于左上角距离112px, s92px隐藏环图上的文本标签和引导线环图内半径55px与外半径72px
//template
ve-ring :settingschartSetting legend-positionright :extendchartExtend/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]}}
}
