v-charts

由於工做須要，使用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配置項

接下來就是重頭戲了，若是你在前二者裏都沒有找到，那就只能從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] } } }