如何配置圖表信息

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配置項

接下來就是重頭戲了，如果你在前兩者里都沒有找到，那就只能從echart的配置項里找了，下面是一些目前比較常用的配置項

名稱類型介紹

legend	Object	用于控制圖表的圖例組件，包括位置、樣式、類型、圖標等
series	Object	每個圖表的專屬設置項，用于控制圖表的詳細樣式位置等

其中series的屬性就可以完成絕大多數配置了，下邊是一個配置示例 實現的效果為：

• 圖例位于圖表右方，且距右邊緣20px
• 圖例顏色#A0A0A0，字體12px
• 環圖中心相對于左上角距離112px, s92px
• 隱藏環圖上的文本標簽和引導線
• 環圖內半徑55px與外半徑72px

//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]}} }

?

總結

以上是生活随笔為你收集整理的使用V-chart时配置踩过的一些坑的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。