使用圖表展示數據，可以讓數據看起來更加的直觀，通過餅圖或者直方圖折線，能展示出數據的趨勢，這篇文章簡單的介紹了如何在自己的項目中集成使用Echarts圖表提供工具。
官方地址站點 https://echarts.apache.org/
在Vue里使用圖標工具也是很簡單，只需要引入js文件就可以了，由於網絡引入不是很穩定，我們這里是需要下載得到本地的，官方給的有可以把圖表打包到js文件里的方法
我們需要注意，引入的時候，按需引入不會使程序顯的臃腫（圖表下顯示的英文就是按需引入需要用到的別名）
例如我們在后面跟上 pie就是餅圖，bar就是柱狀圖，其他的就不一一列舉
import pie from 'echarts/lib/chart/pie'; // 引入餅圖組件
import line from 'echarts/lib/chart/bar'; // 引入柱狀圖組件
開始引入
首先，在Vue里安裝工具
一篇不錯的收藏的文章demo
http://note.youdao.com/s/AW93X60H
npm install echarts
在頁面中使用圖表信息
<!--平台統計部分-->
<template>
<!--統計表部分信息-->
<div class="echarts-demo">
<!-- [1] 為 ECharts 准備一個具備大小 (寬高) 的 DOM -->
<div id="chart" ref="chart" style="display: inline-block; width: 550px; height: 550px"></div>
<div id="lineChart" ref="lineChart" style="display: inline-block; width: 550px; height: 550px"></div>
</div>
</template>
<script>
import {getPlateTotalInfo} from "@/api/page"
import echarts from 'echarts'; // 方便, 但是也同時引入了很多不需要的組件
import pie from 'echarts/lib/chart/pie'; // 引入柱狀圖組件
import line from 'echarts/lib/chart/bar'; // 引入柱狀圖組件
export default {
name: "platformtotal",
data(){
return{
value1: '',
value2: '',
oneValue:"",
twoValue:"",
threeValue:"",
fourValue:"",
listQuery:{},
}
},
created(){
this.getList();
},
methods:{
//獲取數據
getList(){
getPlateTotalInfo().then(res=>{
if(res.data.result){
this.oneValue = res.data.listVo.newPeople;
this.twoValue = res.data.listVo.newPayPeople;
this.threeValue = res.data.listVo.totalMoney;
this.fourValue = res.data.listVo.sendSellerMoney;
this.chart = echarts.init(this.$refs.chart);
// [4] 設置 Echarts餅圖的圖表數據
this.chart.setOption({
title: {
text: '平台統計信息',
subtext: '平台統計信息',
x:'center'
},
tooltip: {
trigger: 'item',
formatter: "{a} <br/>{b} : {c} ({d}%)"
},
toolbox: {
show : true,
feature : {
mark : {show: true},
dataView : {show: true, readOnly: false},
magicType : {
show: true,
type: ['pie', 'funnel'],
option: {
funnel: {
x: '25%',
width: '50%',
funnelAlign: 'left',
max: 1548
}
}
},
restore : {show: true},
saveAsImage : {show: true}
}
},
calculable : true,
legend: {
orient : 'vertical',
x : 'left',
data:['新增用戶','新增付款人數','托管金額','給賣家金額']
},
series: [{
name: '信息類別',
type: 'pie', // 設置圖表類型為餅圖
radius: '55%', // 餅圖的半徑，外半徑為可視區尺寸（容器高寬中較小一項）的 55% 長度。
hoverAnimation:true, // 是否開啟 hover 在扇區上的放大動畫效果
center: ['50%', '60%'],
data:[ // 數據數組，name 為數據項名稱，value 為數據項值
{value:this.oneValue, name:'新增用戶'},
{value:this.twoValue, name:'新增付款人數'},
{value:this.threeValue, name:'托管金額'},
{value:this.fourValue, name:'給賣家金額'},
],
// roseType: 'angle',
legend: {
orient : 'vertical',
x : 'left',
data: ['新增用戶','新增付款人數','托管金額','給賣家金額']
},
}]
});
// [4] 設置 Echarts 柱狀圖圖表數據 lineChart
this.lineChart = echarts.init(this.$refs.lineChart);
this.lineChart.setOption({
title: {
text: '平台統計信息'
},
tooltip: {},
xAxis: {
data: ['新增用戶', '新增付款人數', '托管金額', '給賣家金額' ]
},
yAxis: {
type: 'value'
},
series: [{
name: '銷量',
type: 'bar',
showBackground: true,
backgroundStyle: {
color: 'rgba(220, 220, 220, 0.8)'
},
data: [ this.oneValue, this.twoValue , this.threeValue , this.fourValue ]
}]
});
}
})
},
}
}
</script>
實現顯示效果，餅圖可以查看數據，導出作為png圖片，右側預覽信息等
關於實例，官方給的有demo，里面包含了詳細的代碼實現
demo網址 https://echarts.apache.org/examples/zh/index.html#chart-type-pie
預覽格式，我們可以根據需要，直接將相應的圖表代碼信息引入到自己的項目頁面里來
上文demo里引用了接口數據，這里給出一個沒有使用接口的數據demo
<template>
<div class="echarts-demo">
<!-- [1] 為 ECharts 准備一個具備大小 (寬高) 的 DOM 標簽-->
<div id="chart" ref="chart" style="width: 300px; height: 300px"></div>
</div>
</template>
<script>
// [2] 引入 echarts
// 全部引入
import echarts from 'echarts';
// 按需引入
// import echarts from 'echarts/lib/echarts'; // 引入基本模板
// import bar from 'echarts/lib/chart/bar'; // 引入柱狀圖組件
export default {
data() {
return {
chart: null,
};
},
mounted() {
// [3] 基於准備好的 DOM，初始化 Echarts 實例
// 使用 ref 訪問 DOM, 也可以使用 document.getElementById('chart')
this.chart = echarts.init(this.$refs.chart);
// [4] 設置 Echarts 圖表數據
this.chart.setOption({
//設置標題
title: {
text: 'ECharts 入門示例'
},
tooltip: {},
//設置x軸的內容
xAxis: {
data: ['襯衫', '羊毛衫', '雪紡衫', '褲子', '高跟鞋', '襪子']
},
//設置y軸的內容
yAxis: {},
//設置數據信息
series: [{
name: '銷量',
type: 'bar',
data: [5, 20, 36, 10, 10, 20]
}]
});
}
};
</script>
