使用v-charts過程中味滞，官方給出的文檔不夠詳細，很多參數(shù)最后還是要去e-charts文檔上找壮莹，或者網(wǎng)上自己找，總結(jié)一下在使用過程中遇到的配置問題姻檀，剩下的還需要在使用過程中慢慢發(fā)現(xiàn)
有問題請留言命满，一起解決哈~
柱圖、折線圖绣版、環(huán)圖的常用配置
:data 綁定基本數(shù)據(jù)
<template>
<ve-histogram :data="{columns:[], rows:[]}"></ve-histogram>
</template>
{
// 第一個參數(shù)為維度(記住這個詞胶台，就是橫軸，例如時間)杂抽，剩余為指標(biāo)（就是給哪些東西做統(tǒng)計诈唬，可以直接為中文）
columns: ['month', 'key1', 'key2', 'key3'],
// rows為數(shù)組，每個指標(biāo)各有一條柱缩麸，并標(biāo)注出每個指標(biāo)的值
rows: [
{month:'一月', key1: value1, key2: value2, key3: value3},
{month:'二月', key1: value4, key2: value5, key3: value6}
],
// rows為對象 -- 散點圖可以用
rows: {
name1: [
{month:'二月', key1:'', key2:'', key3: ''}
],
name2: [
{month:'三月', key1:'', key2:'', key3: ''}
],
}
}
:settings 綁定基本配置
<template>
<ve-histogram :settings="{dimension:[]}""></ve-histogram>
</template>
{
// 聲明維度 -- 默認(rèn)就是columns的第一個
dimension: ['month'],
// 設(shè)置橫軸為連續(xù)的數(shù)值軸铸磅，如時間，數(shù)字等
xAxisType: 'value(橫軸必須是數(shù)字)', 'time(橫軸是時間)'
// 聲明指標(biāo) -- columns的第二個開始
metrics: ['key1', 'key2', 'key3'],
// 指標(biāo)的別名 -- 后臺數(shù)據(jù)給的指標(biāo)大多時候不為中文杭朱，但是給用戶看的肯定是中文的
labelMap: {
key1: 'value指標(biāo)',
key2: 'value指標(biāo)',
key3: 'value指標(biāo)',
key4: '舉個例子顯示百分比'
},
// 修改圖例別名 -- 就是頂部的那個幾個色塊阅仔，官網(wǎng)文檔沒用，綁定在legend里設(shè)置
legendName:{
'key1': '訪問用戶 total: 10000'
},
// 指標(biāo)所在的軸 -- 設(shè)置左右雙Y軸用
axisSite: { right: ['key4'] },
// 柱圖 -- 堆疊key1弧械、key2八酒、key3在一條軸上顯示
stack: { 'month': ['key1', 'key2', 'key3'] },
// 柱圖 -- 設(shè)置其中一個指標(biāo)為折線圖（需要引入折線圖組件）
showLine: ['key3'],
// 縱軸左右坐標(biāo)軸標(biāo)題
yAxisName: ['月度課程發(fā)布情況', 'key4Name'],
// 設(shè)置常用數(shù)據(jù)格式 -- 指標(biāo)的單位
// 可以使用 numerify? 的格式來配置顯示，具體的格式支持和插件擴展寫法可以參考 numerify? 文檔
// 也支持使用回調(diào)函數(shù)的方式function (v) {return v + ' ￥'}
// 折線圖 -- 用yAxisType
yAxisType: ['KMB(對應(yīng)yAxisName第一位)', 'percent(對應(yīng)yAxisName第二位)'],
// 餅圖環(huán)圖 -- 用dataType
dataType: {
'key1': 'KMB', //數(shù)字轉(zhuǎn)為RMB(基本的數(shù)據(jù)格式)
'key2': 'percent', //百分比格式(基本的數(shù)據(jù)格式)
'key3': 'normal' //千分位(基本的數(shù)據(jù)格式)
},
// 數(shù)據(jù)格式為 percent 保留的小數(shù)點
digit: 2,
// 設(shè)置數(shù)據(jù)的排序方式刃唐，例如根據(jù)指標(biāo)key1升序（實際效果好像是反的）
dataOrder: {
{ label: 'key1', order: 'asc' }
},
// 折線圖 -- 填充整個面積的色塊
area: true
// 色塊透明度
opacity: 0.5,
// 環(huán)圖 -- 限制最大數(shù)量
limitShowNum: 3,
// 環(huán)圖 -- 內(nèi)外徑
radius: [50, 70],
// 環(huán)圖 -- 縱軸中心位置丘跌，px或者%或'center'等
offsetY: '45%',
// 環(huán)圖 -- 支出來的那個線后面的文字
label: {
show: false
},
// 柱圖 -- 顯示柱狀圖數(shù)據(jù)值，并把具體數(shù)字放在頂部
label: { show: true, position: "top" }
// 折線 -- 顯示具體數(shù)據(jù)數(shù)值
label: { normal: { show: true } }
// 環(huán)圖 -- 支出來的那個線
labelLine: {
show: false
},
// 環(huán)圖 -- 玫瑰圖
roseType: 'radius'
// 環(huán)圖餅圖 -- 是否放上去放大
hoverAnimation: false
}
:legend 圖例（就是小方塊那個說明區(qū)）
<template>
<ve-histogram :legend="{right: 0}"></ve-histogram>
</template>
{
// 調(diào)整圖例區(qū)的位置唁桩，單位(數(shù)字，百分比耸棒，center/left位置)
right: 0,
// 是否可以點擊荒澡，隱藏點擊的內(nèi)容
selectedMode:false,
// 圖例的寬度，不夠會換行
width: 100,
//樣式
textStyle: {
color: '#BED1EF'
}
}
grid 整個繪制區(qū)域
<template>
<ve-histogram :grid="{bottom: 0}"></ve-histogram>
</template>
{
// 調(diào)整位置
bottom: 0,
//調(diào)整大小啥的
width: 200
}
title 環(huán)形圖中間的文字說明
<template>
<ve-histogram :title="{title: '你的標(biāo)題'}"></ve-histogram>
</template>
import 'echarts/lib/component/title'; //必須引入這個組件与殃，默認(rèn)不帶title
{
// 文字啥的单山，用\n可以換行
text: '',
//調(diào)整位置
x: 'center',
top: '35%',
//調(diào)整樣式
textStyle: {
fontSize: 20,
fontWeight: 'normal'
}
}
:extend 最終所有的配置都可以用這個值重新設(shè)置
<template>
<ve-histogram :extend="{series:{}}"></ve-histogram>
</template>
{
// x軸的文字傾斜
'xAxis.0.axisLabel.rotate': 45,
series: {
//環(huán)圖 -- 圓心位置
center: ['50%', '50%'],
///環(huán)圖顏色順序，顏色不是按你的列表一一對應(yīng)的幅疼，需要手動設(shè)置順序
itemStyle: {
normal: {
color: (params)=> {
return this.colorList[params.dataIndex]
}
}
},
barWidth : 20,//柱圖 -- 條寬度
},
yAxis: {
// 縱坐標(biāo)網(wǎng)格線設(shè)置米奸，同理橫坐標(biāo)
splitLine:{
lineStyle: {
color: '#999'
}
},
// 縱坐標(biāo)字體顏色，同理橫坐標(biāo)
axisLine:{
lineStyle:{
color: '#BED1EF'
}
}
}
}
