vue2.0如何實(shí)現(xiàn)echarts餅圖(pie)效果展示
更新時(shí)間：2023年10月24日 09:39:07 作者：CloudEmperor
這篇文章主要介紹了vue2.0如何實(shí)現(xiàn)echarts餅圖(pie)效果展示,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
最近做的項(xiàng)目需要餅狀圖展示數(shù)據(jù)的功能，于是便引入echarts做了一個(gè)餅狀圖的效果展示。
由于只用到echarts其中的餅圖，所以就單獨(dú)在需要的模塊引用，避免全局引用影響性能，減少不必要的加載。
一、使用 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">（部門(mén)統(tǒng)計(jì)，崗位統(tǒng)計(jì)，人員統(tǒng)計(jì)，分類統(tǒng)計(jì)，類型統(tǒng)計(jì)）</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="部門(mén)，崗位" 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: '部門(mén)統(tǒng)計(jì)',
subtext: '',
x:'left',
textStyle:{
color:"#222",
fontStyle:"normal",
fontWeight:"600",
fontFamily:"san-serif",
fontSize:16,
}
},
tooltip : {
trigger: 'item',
/* formatter: "{a} <br/> : ({c}門(mén)) wppm3vysvbp%"*/
formatter: "{a} : ({c}門(mén)) wppm3vysvbp%"
},
legend: {
x : '70%',
y : '25%',
orient: 'vertical',
left: 'left',
itemWidth:10,
itemHeight:10,
selectedMode:false, //禁止點(diǎn)擊
textStyle: {
fontSize: 12,
color:"#999",
},
formatter: function (name) { //避免文字太長(zhǎng)做省略處理
return name.length > 4 ? (name.slice(0,4)+"...") : name
},
data: []
},
series : [
{
name: '',
type: 'pie',
radius : '75%',
center: ['60%', '54%'],
hoverAnimation:false, //是否開(kāi)啟 hover 在扇區(qū)上的放大動(dòng)畫(huà)效果
selectedMode:'single', //選中模式，表示是否支持多個(gè)選中，默認(rèn)關(guān)閉，支持布爾值和字符串，字符串取值可選'single'，'multiple'，分別表示單選還是多選。
selectedOffset:5, //選中扇區(qū)的偏移距離
data:[],
itemStyle: {
normal:{
label:{
show:true,
textStyle: {
fontSize: 12
},
/* formatter: ' : ({c}門(mén)) \n wppm3vysvbp%' */
formatter: function(params){ //避免文字太長(zhǎng)做省略處理
var name=params.name; //名字
var percent=params.percent; //占比
var value=params.value; //數(shù)量
if(name.length>8){
return name.slice(0,7)+"..."+"\n"+"("+value+"門(mén))"+percent+"%";
}else{
return name+"\n"+"("+value+"門(mén))"+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)計(jì)',
subtext: '',
x:'left',
textStyle:{
color:"#222",
fontStyle:"normal",
fontWeight:"600",
fontFamily:"san-serif",
fontSize:16,
}
},
tooltip : {
trigger: 'item',
formatter: "{a} : ({c}門(mén)) wppm3vysvbp%"
},
legend: {
x : '70%',
y : '25%',
orient: 'vertical',
left: 'left',
itemWidth:10,
itemHeight:10,
selectedMode:false, //禁止點(diǎn)擊
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, //是否開(kāi)啟 hover 在扇區(qū)上的放大動(dòng)畫(huà)效果
selectedMode:'single', //選中模式，表示是否支持多個(gè)選中，默認(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+"門(mén))"+percent+"%";
}else{
return name+"\n"+"("+value+"門(mén))"+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)計(jì)',
subtext: '',
x:'left',
textStyle:{
color:"#222",
fontStyle:"normal",
fontWeight:"600",
fontFamily:"san-serif",
fontSize:16,
}
},
tooltip : {
trigger: 'item',
formatter: "{a} : ({c}門(mén)) wppm3vysvbp%"
},
legend: {
x : '70%',
y : '25%',
orient: 'vertical',
left: 'left',
itemWidth:10,
itemHeight:10,
selectedMode:false, //禁止點(diǎn)擊
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, //是否開(kāi)啟 hover 在扇區(qū)上的放大動(dòng)畫(huà)效果
selectedMode:'single', //選中模式，表示是否支持多個(gè)選中，默認(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+"門(mén))"+percent+"%";
}else{
return name+"\n"+"("+value+"門(mén))"+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)計(jì)',
subtext: '',
x:'left',
textStyle:{
color:"#222",
fontStyle:"normal",
fontWeight:"600",
fontFamily:"san-serif",
fontSize:16,
}
},
tooltip : {
trigger: 'item',
formatter: "{a} : ({c}門(mén)) wppm3vysvbp%"
},
legend: {
x : '70%',
y : '25%',
orient: 'vertical',
left: 'left',
itemWidth:10,
itemHeight:10,
selectedMode:false, //禁止點(diǎn)擊
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, //是否開(kāi)啟 hover 在扇區(qū)上的放大動(dòng)畫(huà)效果
selectedMode:'single', //選中模式，表示是否支持多個(gè)選中，默認(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+"門(mén))"+percent+"%";
}else{
return name+"\n"+"("+value+"門(mén))"+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)計(jì)',
subtext: '',
x:'left',
textStyle:{
color:"#222",
fontStyle:"normal",
fontWeight:"600",
fontFamily:"san-serif",
fontSize:16,
}
},
tooltip : {
trigger: 'item',
formatter: "{a} : ({c}門(mén)) wppm3vysvbp%"
},
legend: {
x : '70%',
y : '25%',
orient: 'vertical',
left: 'left',
itemWidth:10,
itemHeight:10,
selectedMode:false, //禁止點(diǎn)擊
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, //是否開(kāi)啟 hover 在扇區(qū)上的放大動(dòng)畫(huà)效果
selectedMode:'single', //選中模式，表示是否支持多個(gè)選中，默認(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+"門(mén))"+percent+"%";
}else{
return name+"\n"+"("+value+"門(mén))"+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;
}
/*****************部門(mén)統(tǒng)計(jì)****************/
this.departmentOption.series[0].data=data.body.data.courseCountUsers1.list;
this.departmentOption.legend.data=data.body.data.courseCountUsers1.names.split(',');
/*****************崗位統(tǒng)計(jì)****************/
this.postChartOption.series[0].data=data.body.data.courseCountUsers2.list;
this.postChartOption.legend.data=data.body.data.courseCountUsers2.names.split(',');
/*****************人員統(tǒng)計(jì)****************/
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ò)通訊錯(cuò)誤')
});
},
drawLine:function(){// 初始化echarts實(shí)例
//獲取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;
}
//顯示隱藏上下滑動(dòng)效果
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 也不能通過(guò) Vue.use() 進(jìn)行全局調(diào)用，通常是在需要使用圖表的 .vue 文件中直接引入
import echarts from 'echarts'
也可以在 main.js 中引入，然后修改原型鏈
Vue.prototype.$echarts = echarts
然后就可以全局使用
let myEcharts = this.$echarts.init(document.getElementById('myEcharts'))備注：
我這塊整個(gè)顯示的寬度是固定的，所有沒(méi)做適應(yīng)容器處理，如果有需要可以自己加。
總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
您可能感興趣的文章:
- vue3+echarts實(shí)現(xiàn)好看的圓角環(huán)形圖
- echarts設(shè)置tootip輪播切換展示(vue3搭配vue-echarts粘貼即用)
- 手把手教你Vue3?按需引入?Echarts的過(guò)程(收藏)
- vue導(dǎo)出excel和echart圖形分別在不同工作表的實(shí)現(xiàn)方法
- vue使用echarts實(shí)現(xiàn)柱狀圖動(dòng)態(tài)排序效果
- vue中如何使用echarts動(dòng)態(tài)渲染數(shù)據(jù)
- vue使用echarts實(shí)現(xiàn)動(dòng)態(tài)數(shù)據(jù)的示例詳解
- Vuex進(jìn)行Echarts數(shù)據(jù)頁(yè)面初始化后如何更新dom
- vue+echarts圖表的基本使用步驟總結(jié)
- 在Vue中使用Echarts+封裝
- 使用vue3+ts打開(kāi)echarts的正確方式
- vue3中使用Vchart的示例代碼
相關(guān)文章
本篇文章主要介紹了Vue中render函數(shù)的使用方法，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-01-01
這篇文章主要介紹了vue如何讀取外部配置文件問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03
最近學(xué)習(xí)了Vue3,利用vue3做了個(gè)好玩的項(xiàng)目,所以下面這篇文章主要給大家介紹了關(guān)于如何利用Vue3模仿Windows窗口的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-04-04
本篇文章主要介紹了在Vue中使用echarts的實(shí)例代碼（3種圖），小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-07-07
如何修改element-ui中tree組件的icon圖標(biāo)(小白都會(huì)的前端技能)
這篇文章主要給大家介紹了關(guān)于如何修改element-ui中tree組件的icon圖標(biāo)的相關(guān)資料,本文介紹的是小白都會(huì)的前端技能,文中通過(guò)代碼以及圖文介紹的非常詳細(xì),需要的朋友可以參考下2024-01-01
解決Vue+Electron下Vuex的Dispatch沒(méi)有效果問(wèn)題
這篇文章主要介紹了Vue+Electron下Vuex的Dispatch沒(méi)有效果的解決方案 ,本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2019-05-05
這篇文章主要介紹了Vue如何提升首屏加載速度實(shí)例解析,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-06-06
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)懸浮球效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-04-04
el-descriptions引入代碼中l(wèi)abel不生效問(wèn)題及解決
這篇文章主要介紹了el-descriptions引入代碼中l(wèi)abel不生效問(wèn)題及解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-12-12
vue結(jié)合Echarts實(shí)現(xiàn)點(diǎn)擊高亮效果的示例
下面小編就為大家分享一篇vue結(jié)合Echarts實(shí)現(xiàn)點(diǎn)擊高亮效果的示例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-03-03