參考 v-charts文檔有詳細說明，不多做介紹。
感謝博主的梳理，我在此基礎之上稍作修改
效果展示：
在工作中遇到了就記錄下來，留作備用，以便今后查閱：
安裝
```java npm install vue-schart -S<h2>結合vue的使用</h2>
<h3 style="color:red">【注】 每種圖形的設置，是需要寫在腳本的data之后，return之前，否則自定義某些設置的時候效果不生效</h5>
```java
<template>
<el-main>
<el-scrollbar>
<el-row :gutter="20">
<el-col :span="12" class="echarts-item">
<el-card>
<div class="content-title">餅狀圖示例</div>
<ve-pie :data="pieChartData" :settings="pieChartSettings"></ve-pie>
</el-card>
</el-col>
<el-col :span="12" class="echarts-item">
<el-card>
<div class="content-title">環形圖示例</div>
<ve-ring :data="ringChartData" :settings="ringChartSettings"></ve-ring>
</el-card>
</el-col>
<el-col :span="12" class="echarts-item">
<el-card>
<div class="content-title">柱狀圖示例</div>
<ve-histogram :data="histogramChartData" :settings="histogramChartSettings"
:mark-line="histogramChartMarkLine"></ve-histogram>
</el-card>
</el-col>
<el-col :span="12" class="echarts-item">
<el-card>
<div class="content-title">折線圖示例</div>
<ve-line :data="lineChartData" :settings="lineChartSettings"
:mark-point="lineChartMarkPoint"></ve-line>
</el-card>
</el-col>
</el-row>
</el-scrollbar>
</el-main>
</template>
<script>
import Vue from 'vue'
import VCharts from 'v-charts'
Vue.use(VCharts)
export default {
name: 'Dashboard',
data() {
//柱狀圖設置
histogramChartSettings: {
metrics: ['日期', '百度', '谷歌', '獵豹', '搜狗', 'QQ', 'Safair'],
dimension: ['日期'],
stack: {
'國內': ['百度', '獵豹', '搜狗', 'QQ'],
'國外': ['谷歌', 'Safair']
}
},
histogramChartMarkLine: {
data: [
[{type: 'min'}, {type: 'max'}]
]
},
//折線圖設置
lineChartSettings: {
metrics: ['保額', '保費'],
dimension: ['日期']
},
lineChartMarkPoint: {
data: [{
name: '最大值',
type: 'max'
}]
},
//餅狀圖設置
pieChartSettings: {
dimension: '保費',
metrics: '出單量'
},
//環形圖設置
ringChartSettings: {
dimension: '保費',
metrics: '出單量'
}
return {
//柱狀圖
histogramChartData: {
columns: ['日期', '百度', '谷歌', '獵豹', '搜狗', 'QQ', 'Safair'],
rows: [{
'日期': '周一', '百度': 320, '谷歌': 120, '獵豹': 220, '搜狗': 150, 'QQ': 862, 'Safair': 620,
}, {
'日期': '周二', '百度': 332, '谷歌': 132, '獵豹': 182, '搜狗': 232, 'QQ': 1018, 'Safair': 732
}, {
'日期': '周三', '百度': 301, '谷歌': 101, '獵豹': 191, '搜狗': 201, 'QQ': 964, 'Safair': 701
}, {
'日期': '周四', '百度': 334, '谷歌': 134, '獵豹': 234, '搜狗': 154, 'QQ': 1026, 'Safair': 734
}, {
'日期': '周五', '百度': 390, '谷歌': 90, '獵豹': 290, '搜狗': 190, 'QQ': 1679, 'Safair': 1090
}, {
'日期': '周六', '百度': 330, '谷歌': 230, '獵豹': 330, '搜狗': 330, 'QQ': 1600, 'Safair': 1130
}, {
'日期': '周日', '百度': 320, '谷歌': 210, '獵豹': 310, '搜狗': 410, 'QQ': 1570, 'Safair': 1120
}]
},
//折線圖
lineChartData: {
columns: ['日期', '保額', '保費', '占比', '其他'],
rows: [{
'保額': 6200, '日期': '1月1日', '保費': 4788.99, '占比': 0.32, '其他': 100
}, {
'保額': 3400, '日期': '1月2日', '保費': 3200.00, '占比': 0.35, '其他': 100
}, {
'保額': 4300, '日期': '1月3日', '保費': 4100.88, '占比': 0.2, '其他': 100
}, {
'保額': 5000, '日期': '1月4日', '保費': 4888.88, '占比': 0.41, '其他': 100
}, {
'保額': 7800, '日期': '1月5日', '保費': 2008.99, '占比': 0.52, '其他': 100
}, {
'保額': 2900, '日期': '1月6日', '保費': 1534, '占比': 0.55, '其他': 100
}]
},
//餅狀圖
pieChartData: {
columns: ['日期', '保費', '出單量'],
rows: [{
'日期': '1/1', '保費': 588.78, '出單量': 10
}, {
'日期': '1/2', '保費': 249.88, '出單量': 34
}, {
'日期': '1/3', '保費': 468.78, '出單量': 97
}, {
'日期': '1/4', '保費': 239.33, '出單量': 48
}, {
'日期': '1/5', '保費': 900.88, '出單量': 78
}, {
'日期': '1/6', '保費': 989.88, '出單量': 23
}]
},
//環形圖
ringChartData: {
columns: ['日期', '保費', '出單量'],
rows: [{
'日期': '1/1', '保費': 588.78, '出單量': 10
}, {
'日期': '1/2', '保費': 249.88, '出單量': 34
}, {
'日期': '1/3', '保費': 468.78, '出單量': 97
}, {
'日期': '1/4', '保費': 239.33, '出單量': 48
}, {
'日期': '1/5', '保費': 900.88, '出單量': 78
}, {
'日期': '1/6', '保費': 989.88, '出單量': 23
}]
}
}
},
created: function () {
},
methods: {}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.content-title {
clear: both;
font-weight: 400;
line-height: 50px;
padding: 10px 10px;
font-size: 21px;
color: black;
border-radius: 1px;
border: 1px solid #EBEEF5;
}
</style>