vue2.0實現echarts餅圖（pie）效果展示
阿新 • • 發佈：2019-01-31
最近做的專案需要餅狀圖展示資料的功能，於是便引入echarts做了一個餅狀圖的效果展示。由於只用到echarts其中的餅圖，所以就單獨在需要的模組引用，避免全域性引用影響效能，減少不必要的載入。
一.使用 cnpm 安裝 Echarts
cnpm install echarts -S二.HTML部分
<div class="echarts-content"> <div class="chart-head"> <p @click="echartShow"> <strong id="strong">課程分佈圖</strong> <em v-if="echartBtn==false">（部門統計，崗位統計，人員統計，分類統計，型別統計）</em> <i :class="{'el-icon-arrow-down':echartBtn==false,'el-icon-arrow-up':echartBtn}"></i> </p> </div> <div class="chart-main" id="chart-main"> <div class="chart-main-left"> <div v-show="echartNum==1" id="departmentChart" :style="{width: '500px', height: '215px',float:'left',borderRight:'1px solid #e4e4e4'}"></div> <div v-show="echartNum==1" id="postChart" :style="{width: '500px', height: '215px',float:'left',marginLeft:'30px'}"></div> <div v-show="echartNum==2" id="personnelChart" :style="{width: '500px', height: '215px',float:'left',borderRight:'1px solid #e4e4e4'}"></div> <div v-show="echartNum==2" id="classifyChart" :style="{width: '500px', height: '215px',float:'left',marginLeft:'30px'}"></div> <div v-show="echartNum==3" id="fileTypeChart" :style="{width: '1060px', height: '215px'}"></div> </div> <div class="chart-main-right"> <el-tooltip class="item" effect="dark" content="部門，崗位" placement="right"> <span :class="{spanActive:echartNum==1}" @click="echartIsShow('1')"></span> </el-tooltip> <el-tooltip class="item" effect="dark" content="人員，分類" placement="right"> <span :class="{spanActive:echartNum==2}" @click="echartIsShow('2')"></span> </el-tooltip> <el-tooltip class="item" effect="dark" content="型別" placement="right"> <span :class="{spanActive:echartNum==3}" @click="echartIsShow('3')"></span> </el-tooltip> </div> </div> </div>
三.CSS部分
.echarts-content{ width:100%; min-height:78px; max-height:300px; background:#fff; -webkit-box-shadow: 0 0 15px rgba(0,0,0,.1); -moz-box-shadow: 0 0 15px rgba(0,0,0,.1); box-shadow: 0 0 15px rgba(0,0,0,.1); padding:0 30px; } .echarts-content .chart-head{ height:78px; width:100%; padding-top:30px; } .echarts-content .chart-head p{ display:inline-block; height:21px; width:100%; cursor:pointer; text-align:center; } .echarts-content .chart-head p strong{ font-weight:normal; font-size:16px; color:#999; } .echarts-content .chart-head p em{ display:inline-block; font-style:normal; font-size:14px; color:#999; } .echarts-content .chart-head p i{ display:inline-block; color:#e4e4e4; font-size: 14px; margin-left:10px; } .echarts-content .chart-main{ width:100%; height:222px; position: relative; overflow: hidden; -webkit-transition: height 0.6s; -moz-transition: height 0.6s; -o-transition: height 0.6s; transition: height 0.6s; } .echarts-content .chart-main .chart-main-left{ width:calc(100% - 20px); height:100%; float:left; } .echarts-content .chart-main .chart-main-right{ width:20px; height:100%; float:right; padding-top:50px; } .echarts-content .chart-main .chart-main-right span{ display:inline-block; width:12px; height:12px; background:#e4e4e4; border-radius:100%; -moz-border-radius: 100%; -webkit-border-radius: 100%; cursor:pointer; } .echarts-content .chart-main .chart-main-right span:hover{ background:#0188fd; } .echarts-content .chart-main .chart-main-right .spanActive{ background:#0188fd; }
四.JS部分
// 引入基本模板 let echarts = require('echarts/lib/echarts'); // 引入餅圖元件 require('echarts/lib/chart/pie'); // 引入提示框和圖例元件 require('echarts/lib/component/title'); require('echarts/lib/component/tooltip'); require('echarts/lib/component/legend'); require("echarts/lib/component/legendScroll"); export default { data() { return { departmentOption:{ title : { text: '部門統計', subtext: '', x:'left', textStyle:{ color:"#222", fontStyle:"normal", fontWeight:"600", fontFamily:"san-serif", fontSize:16, } }, tooltip : { trigger: 'item', /* formatter: "{a} <br/>{b} : ({c}門) {d}%"*/ formatter: "{a} {b} : ({c}門) {d}%" }, legend: { x : '70%', y : '25%', orient: 'vertical', left: 'left', itemWidth:10, itemHeight:10, selectedMode:false, //禁止點選 textStyle: { fontSize: 12, color:"#999", }, formatter: function (name) { //避免文字太長做省略處理 return name.length > 4 ? (name.slice(0,4)+"...") : name }, data: [] }, series : [ { name: '', type: 'pie', radius : '75%', center: ['60%', '54%'], hoverAnimation:false, //是否開啟 hover 在扇區上的放大動畫效果 selectedMode:'single', //選中模式，表示是否支援多個選中，預設關閉，支援布林值和字串，字串取值可選'single'，'multiple'，分別表示單選還是多選。 selectedOffset:5, //選中扇區的偏移距離 data:[], itemStyle: { normal:{ label:{ show:true, textStyle: { fontSize: 12 }, /* formatter: '{b} : ({c}門) \n {d}%' */ formatter: function(params){ //避免文字太長做省略處理 var name=params.name; //名字 var percent=params.percent; //佔比 var value=params.value; //數量 if(name.length>8){ return name.slice(0,7)+"..."+"\n"+"("+value+"門)"+percent+"%"; }else{ return name+"\n"+"("+value+"門)"+percent+"%"; } } }, labelLine:{ show:true } }, emphasis: { shadowBlur: 10, shadowOffsetX: 0, shadowColor: 'rgba(0, 0, 0, 0.5)' } } } ], color: ['rgb(187,140,238)','rgb(134,146,243)','rgb(60,184,255)','rgb(113,171,246)','rgb(255,193,134)'] //餅圖分塊顏色設定 }, postChartOption:{ title : { text: '崗位統計', subtext: '', x:'left', textStyle:{ color:"#222", fontStyle:"normal", fontWeight:"600", fontFamily:"san-serif", fontSize:16, } }, tooltip : { trigger: 'item', formatter: "{a} {b} : ({c}門) {d}%" }, legend: { x : '70%', y : '25%', orient: 'vertical', left: 'left', itemWidth:10, itemHeight:10, selectedMode:false, //禁止點選 textStyle: { fontSize: 12, color:"#999", }, formatter: function (name) { return name.length > 4 ? (name.slice(0,4)+"...") : name }, data: [] }, series : [ { name: '', type: 'pie', radius : '75%', center: ['60%', '54%'], hoverAnimation:false, //是否開啟 hover 在扇區上的放大動畫效果 selectedMode:'single', //選中模式，表示是否支援多個選中，預設關閉，支援布林值和字串，字串取值可選'single'，'multiple'，分別表示單選還是多選。 selectedOffset:5, //選中扇區的偏移距離 data:[], itemStyle: { normal:{ label:{ show:true, formatter: function(params){ var name=params.name; //名字 var percent=params.percent; //佔比 var value=params.value; //數量 if(name.length>8){ return name.slice(0,7)+"..."+"\n"+"("+value+"門)"+percent+"%"; }else{ return name+"\n"+"("+value+"門)"+percent+"%"; } } }, labelLine:{ show:true } }, emphasis: { shadowBlur: 10, shadowOffsetX: 0, shadowColor: 'rgba(0, 0, 0, 0.5)' } } } ], color: ['rgb(187,140,238)','rgb(134,146,243)','rgb(60,184,255)','rgb(113,171,246)','rgb(255,193,134)'] }, personnelChartOption:{ title : { text: '人員統計', subtext: '', x:'left', textStyle:{ color:"#222", fontStyle:"normal", fontWeight:"600", fontFamily:"san-serif", fontSize:16, } }, tooltip : { trigger: 'item', formatter: "{a} {b} : ({c}門) {d}%" }, legend: { x : '70%', y : '25%', orient: 'vertical', left: 'left', itemWidth:10, itemHeight:10, selectedMode:false, //禁止點選 textStyle: { fontSize: 12 , color:"#999", }, formatter: function (name) { return name.length > 4 ? (name.slice(0,4)+"...") : name }, data: [] }, series : [ { name: '', type: 'pie', radius : '75%', center: ['60%', '54%'], hoverAnimation:false, //是否開啟 hover 在扇區上的放大動畫效果 selectedMode:'single', //選中模式，表示是否支援多個選中，預設關閉，支援布林值和字串，字串取值可選'single'，'multiple'，分別表示單選還是多選。 selectedOffset:5, //選中扇區的偏移距離 data:[], itemStyle: { normal:{ label:{ show:true, formatter: function(params){ var name=params.name; //名字 var percent=params.percent; //佔比 var value=params.value; //數量 if(name.length>8){ return name.slice(0,7)+"..."+"\n"+"("+value+"門)"+percent+"%"; }else{ return name+"\n"+"("+value+"門)"+percent+"%"; } } }, labelLine:{ show:true } }, emphasis: { shadowBlur: 10, shadowOffsetX: 0, shadowColor: 'rgba(0, 0, 0, 0.5)' } } } ], color: ['rgb(187,140,238)','rgb(134,146,243)','rgb(60,184,255)','rgb(113,171,246)','rgb(255,193,134)'] }, classifyChartOption:{ title : { text: '分類統計', subtext: '', x:'left', textStyle:{ color:"#222", fontStyle:"normal", fontWeight:"600", fontFamily:"san-serif", fontSize:16, } }, tooltip : { trigger: 'item', formatter: "{a} {b} : ({c}門) {d}%" }, legend: { x : '70%', y : '25%', orient: 'vertical', left: 'left', itemWidth:10, itemHeight:10, selectedMode:false, //禁止點選 textStyle: { fontSize: 12, color:"#999", }, formatter: function (name) { return name.length > 4 ? (name.slice(0,4)+"...") : name }, data: [] }, series : [ { name: '', type: 'pie', radius : '75%', center: ['60%', '54%'], hoverAnimation:false, //是否開啟 hover 在扇區上的放大動畫效果 selectedMode:'single', //選中模式，表示是否支援多個選中，預設關閉，支援布林值和字串，字串取值可選'single'，'multiple'，分別表示單選還是多選。 selectedOffset:5, //選中扇區的偏移距離 data:[], itemStyle: { normal:{ label:{ show:true, formatter: function(params){ var name=params.name; //名字 var percent=params.percent; //佔比 var value=params.value; //數量 if(name.length>8){ return name.slice(0,7)+"..."+"\n"+"("+value+"門)"+percent+"%"; }else{ return name+"\n"+"("+value+"門)"+percent+"%"; } } }, labelLine:{ show:true } }, emphasis: { shadowBlur: 10, shadowOffsetX: 0, shadowColor: 'rgba(0, 0, 0, 0.5)' } } } ], color: ['rgb(187,140,238)','rgb(134,146,243)','rgb(60,184,255)','rgb(113,171,246)','rgb(255,193,134)'] }, fileTypeChartOption:{ title : { text: '型別統計', subtext: '', x:'left', textStyle:{ color:"#222", fontStyle:"normal", fontWeight:"600", fontFamily:"san-serif", fontSize:16, } }, tooltip : { trigger: 'item', formatter: "{a} {b} : ({c}門) {d}%" }, legend: { x : '70%', y : '25%', orient: 'vertical', left: 'left', itemWidth:10, itemHeight:10, selectedMode:false, //禁止點選 textStyle: { fontSize: 12 , color:"#999", }, formatter: function (name) { return name.length > 4 ? (name.slice(0,4)+"...") : name }, data: [] }, series : [ { name: '', type: 'pie', radius : '75%', center: ['50%', '54%'], hoverAnimation:false, //是否開啟 hover 在扇區上的放大動畫效果 selectedMode:'single', //選中模式，表示是否支援多個選中，預設關閉，支援布林值和字串，字串取值可選'single'，'multiple'，分別表示單選還是多選。 selectedOffset:5, //選中扇區的偏移距離 data:[], itemStyle: { normal:{ label:{ show:true, formatter: function(params){ var name=params.name; //名字 var percent=params.percent; //佔比 var value=params.value; //數量 if(name.length>8){ return name.slice(0,7)+"..."+"\n"+"("+value+"門)"+percent+"%"; }else{ return name+"\n"+"("+value+"門)"+percent+"%"; } } }, labelLine:{ show:true } }, emphasis: { shadowBlur: 10, shadowOffsetX: 0, shadowColor: 'rgba(0, 0, 0, 0.5)' } } } ], color: ['rgb(187,140,238)','rgb(134,146,243)','rgb(60,184,255)','rgb(113,171,246)','rgb(255,193,134)'] }, api: { queryCoursePieChart: global_set.hostRe + '/course/queryCoursePieChart', //圖表資訊 }, echartBtn:true, echartOn:true, echartNum:1, } }, mounted: function() { this.queryCoursePieChart(); }, methods: { queryCoursePieChart:function(){ this.$http.get( this.api.queryCoursePieChart, { params:{ access_token:localStorage.token } }, { emulateJSON: true } ).then(function(data) { if(data.body.code == 801) { localStorage.token = null this.$router.push({ path: '/index-auth-login', query: { 'redirect': this.$route.query.fullPath } }) return false; } /*****************部門統計****************/ this.departmentOption.series[0].data=data.body.data.courseCountUsers1.list; this.departmentOption.legend.data=data.body.data.courseCountUsers1.names.split(','); /*****************崗位統計****************/ this.postChartOption.series[0].data=data.body.data.courseCountUsers2.list; this.postChartOption.legend.data=data.body.data.courseCountUsers2.names.split(','); /*****************人員統計****************/ this.personnelChartOption.series[0].data=data.body.data.courseCountUsers3.list; this.personnelChartOption.legend.data=data.body.data.courseCountUsers3.names.split(','); /*****************課程分類****************/ this.classifyChartOption.series[0].data=data.body.data.courseCountUsers4.list; this.classifyChartOption.legend.data=data.body.data.courseCountUsers4.names.split(','); /*****************檔案型別****************/ this.fileTypeChartOption.series[0].data=data.body.data.courseCountUsers5.list; this.fileTypeChartOption.legend.data=data.body.data.courseCountUsers5.names.split(','); //初始化 this.drawLine(); }, function(err) { this.$message.error('網路通訊錯誤') }); }, drawLine:function(){// 初始化echarts例項 //獲取demo元素 let departmentChart = echarts.init(document.getElementById('departmentChart')); let postChart = echarts.init(document.getElementById('postChart')); let personnelChart = echarts.init(document.getElementById('personnelChart')); let classifyChart = echarts.init(document.getElementById('classifyChart')); let fileTypeChart = echarts.init(document.getElementById('fileTypeChart')); //初始化echarts departmentChart.setOption(this.departmentOption); postChart.setOption(this.postChartOption); personnelChart.setOption(this.personnelChartOption); classifyChart.setOption(this.classifyChartOption); fileTypeChart.setOption(this.fileTypeChartOption); }, echartShow:function(){ //圖表展示隱藏 let chartMain= document.getElementById("chart-main"); let strong=document.getElementById("strong"); if(this.echartOn){ this.echartBtn=false; }else{ this.echartBtn=true; } //顯示隱藏上下滑動效果 chartMain.style.height = this.echartOn? "0": "215px"; strong.style.color = this.echartOn? "#222": "#999"; this.echartOn=! this.echartOn; }, echartIsShow:function(n){ //不同圖表切換 this.echartNum=n; }, }, }
五.最終效果
六.另外如果不使用按需載入要全域性使用，方法如下：
echarts 也不能通過 Vue.use() 進行全域性呼叫，通常是在需要使用圖表的 .vue 檔案中直接引入
import echarts from 'echarts'也可以在 main.js 中引入，然後修改原型鏈
Vue.prototype.$echarts = echarts 然後就可以全域性使用
let myEcharts = this.$echarts.init(document.getElementById('myEcharts'))備註：我這塊整個顯示的寬度是固定的，所有沒做適應容器處理，如果有需要可以自己加。這個餅狀圖元件內部詳細配置借鑑於https://blog.csdn.net/luanpeng825485697/article/details/76738751