echart vue 嵌套饼图_vue2.0实现echarts饼图（pie）效果展示

最近做的项目需要饼状图展示数据的功能，于是便引入echarts做了一个饼状图的效果展示。由于只用到echarts其中的饼图，所以就单独在需要的模块引用，避免全局引用影响性能，减少不必要的加载。

一.使用 cnpm 安装 Echartscnpm install echarts -S

二.HTML部分

课程分布图

(部门统计，岗位统计，人员统计，分类统计，类型统计)

三.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}
{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