vue2.0如何實現(xiàn)echarts餅圖(pie)效果展示
更新時間：2023年10月24日 09:39:07 作者：CloudEmperor
這篇文章主要介紹了vue2.0如何實現(xiàn)echarts餅圖(pie)效果展示,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
最近做的項目需要餅狀圖展示數(shù)據(jù)的功能，于是便引入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">（部門統(tǒng)計，崗位統(tǒng)計，人員統(tǒng)計，分類統(tǒng)計，類型統(tǒng)計）</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: '部門統(tǒng)計',
subtext: '',
x:'left',
textStyle:{
color:"#222",
fontStyle:"normal",
fontWeight:"600",
fontFamily:"san-serif",
fontSize:16,
}
},
tooltip : {
trigger: 'item',
/* formatter: "{a} <br/> : ({c}門) vvxyksv9kd%"*/
formatter: "{a} : ({c}門) vvxyksv9kd%"
},
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 在扇區(qū)上的放大動畫效果
selectedMode:'single', //選中模式，表示是否支持多個選中，默認(rèn)關(guān)閉，支持布爾值和字符串，字符串取值可選'single'，'multiple'，分別表示單選還是多選。
selectedOffset:5, //選中扇區(qū)的偏移距離
data:[],
itemStyle: {
normal:{
label:{
show:true,
textStyle: {
fontSize: 12
},
/* formatter: ' : ({c}門) \n vvxyksv9kd%' */
formatter: function(params){ //避免文字太長做省略處理
var name=params.name; //名字
var percent=params.percent; //占比
var value=params.value; //數(shù)量
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)'] //餅圖分塊顏色設(shè)置
},
postChartOption:{
title : {
text: '崗位統(tǒng)計',
subtext: '',
x:'left',
textStyle:{
color:"#222",
fontStyle:"normal",
fontWeight:"600",
fontFamily:"san-serif",
fontSize:16,
}
},
tooltip : {
trigger: 'item',
formatter: "{a} : ({c}門) vvxyksv9kd%"
},
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 在扇區(qū)上的放大動畫效果
selectedMode:'single', //選中模式，表示是否支持多個選中，默認(rèn)關(guān)閉，支持布爾值和字符串，字符串取值可選'single'，'multiple'，分別表示單選還是多選。
selectedOffset:5, //選中扇區(qū)的偏移距離
data:[],
itemStyle: {
normal:{
label:{
show:true,
formatter: function(params){
var name=params.name; //名字
var percent=params.percent; //占比
var value=params.value; //數(shù)量
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: '人員統(tǒng)計',
subtext: '',
x:'left',
textStyle:{
color:"#222",
fontStyle:"normal",
fontWeight:"600",
fontFamily:"san-serif",
fontSize:16,
}
},
tooltip : {
trigger: 'item',
formatter: "{a} : ({c}門) vvxyksv9kd%"
},
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 在扇區(qū)上的放大動畫效果
selectedMode:'single', //選中模式，表示是否支持多個選中，默認(rèn)關(guān)閉，支持布爾值和字符串，字符串取值可選'single'，'multiple'，分別表示單選還是多選。
selectedOffset:5, //選中扇區(qū)的偏移距離
data:[],
itemStyle: {
normal:{
label:{
show:true,
formatter: function(params){
var name=params.name; //名字
var percent=params.percent; //占比
var value=params.value; //數(shù)量
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: '分類統(tǒng)計',
subtext: '',
x:'left',
textStyle:{
color:"#222",
fontStyle:"normal",
fontWeight:"600",
fontFamily:"san-serif",
fontSize:16,
}
},
tooltip : {
trigger: 'item',
formatter: "{a} : ({c}門) vvxyksv9kd%"
},
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 在扇區(qū)上的放大動畫效果
selectedMode:'single', //選中模式，表示是否支持多個選中，默認(rèn)關(guān)閉，支持布爾值和字符串，字符串取值可選'single'，'multiple'，分別表示單選還是多選。
selectedOffset:5, //選中扇區(qū)的偏移距離
data:[],
itemStyle: {
normal:{
label:{
show:true,
formatter: function(params){
var name=params.name; //名字
var percent=params.percent; //占比
var value=params.value; //數(shù)量
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: '類型統(tǒng)計',
subtext: '',
x:'left',
textStyle:{
color:"#222",
fontStyle:"normal",
fontWeight:"600",
fontFamily:"san-serif",
fontSize:16,
}
},
tooltip : {
trigger: 'item',
formatter: "{a} : ({c}門) vvxyksv9kd%"
},
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 在扇區(qū)上的放大動畫效果
selectedMode:'single', //選中模式，表示是否支持多個選中，默認(rèn)關(guān)閉，支持布爾值和字符串，字符串取值可選'single'，'multiple'，分別表示單選還是多選。
selectedOffset:5, //選中扇區(qū)的偏移距離
data:[],
itemStyle: {
normal:{
label:{
show:true,
formatter: function(params){
var name=params.name; //名字
var percent=params.percent; //占比
var value=params.value; //數(shù)量
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;
}
/*****************部門統(tǒng)計****************/
this.departmentOption.series[0].data=data.body.data.courseCountUsers1.list;
this.departmentOption.legend.data=data.body.data.courseCountUsers1.names.split(',');
/*****************崗位統(tǒng)計****************/
this.postChartOption.series[0].data=data.body.data.courseCountUsers2.list;
this.postChartOption.legend.data=data.body.data.courseCountUsers2.names.split(',');
/*****************人員統(tǒng)計****************/
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('網(wǎng)絡(luò)通訊錯誤')
});
},
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() 進行全局調(diào)用，通常是在需要使用圖表的 .vue 文件中直接引入
import echarts from 'echarts'
也可以在 main.js 中引入，然后修改原型鏈
Vue.prototype.$echarts = echarts
然后就可以全局使用
let myEcharts = this.$echarts.init(document.getElementById('myEcharts'))備注：
我這塊整個顯示的寬度是固定的，所有沒做適應(yīng)容器處理，如果有需要可以自己加。
總結(jié)
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
您可能感興趣的文章:
- vue3+echarts實現(xiàn)好看的圓角環(huán)形圖
- echarts設(shè)置tootip輪播切換展示(vue3搭配vue-echarts粘貼即用)
- 手把手教你Vue3?按需引入?Echarts的過程(收藏)
- vue導(dǎo)出excel和echart圖形分別在不同工作表的實現(xiàn)方法
- vue使用echarts實現(xiàn)柱狀圖動態(tài)排序效果
- vue中如何使用echarts動態(tài)渲染數(shù)據(jù)
- vue使用echarts實現(xiàn)動態(tài)數(shù)據(jù)的示例詳解
- Vuex進行Echarts數(shù)據(jù)頁面初始化后如何更新dom
- vue+echarts圖表的基本使用步驟總結(jié)
- 在Vue中使用Echarts+封裝
- 使用vue3+ts打開echarts的正確方式
- vue3中使用Vchart的示例代碼
相關(guān)文章
這篇文章主要介紹了vue中的dom節(jié)點和window對象，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
這篇文章主要介紹了Vue編寫自定義Plugin詳解,在Vue開發(fā)中，我們經(jīng)常需要使用一些第三方庫或功能性模塊，Vue插件就是一種將這些庫或模塊集成到Vue應(yīng)用中的方式,插件是Vue.js提供的一種機制，用于擴展Vue的功能,需要的朋友可以參考下2023-08-08
vue?結(jié)合webpack的初級使用指南小白學(xué)習(xí)篇
這篇文章主要為大家介紹了vue?結(jié)合webpack的初級使用指南非常適合入門webpack的小白學(xué)習(xí)，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-05-05
Vue 3 自定義權(quán)限指令 v-action的作用
在實際的前端開發(fā)中,尤其是涉及到權(quán)限管理的系統(tǒng),我們經(jīng)常需要根據(jù)用戶的權(quán)限動態(tài)控制某些按鈕的顯示和隱藏,這篇文章主要介紹了Vue 3 自定義權(quán)限指令 v-action的相關(guān)知識,需要的朋友可以參考下2025-04-04
這篇文章主要介紹了VSCode插件安裝完成后的配置,本文給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2020-08-08
vue router下的html5 history在iis服務(wù)器上的設(shè)置方法
這篇文章主要介紹了vue router下的html5 history在iis服務(wù)器上的設(shè)置方法，需要的朋友參考下吧2017-10-10
ElementUI表單驗證validate和validateField的使用及區(qū)別
Element-UI作為前端框架,最常使用到的就是表單驗證,下面這篇文章主要給大家介紹了關(guān)于ElementUI表單驗證validate和validateField的使用及區(qū)別,文中通過實例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-02-02
這篇文章主要為大家詳細(xì)介紹了如何利用Vue開發(fā)實現(xiàn)簡單的滑動驗證組件，并且適配移動和PC，文中的示例代碼講解詳細(xì)，感興趣的小伙伴可以了解一下2023-07-07
這篇文章主要介紹了vue獲取input值的三種常用寫法，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-08-08
本文給大家?guī)韛ue項目在安卓低版本機顯示空白的原因分析，根據(jù)各自需求給大家?guī)砹藘煞N原因分析，大家可以參考下2018-09-09