vue+echarts项目八库存情况显示占比圆环图

最终效果如图

组件结构设计

外部Stockpage.vue

 显示最外侧组件的结构

1.  
   <template>
2.  
   <div class="comP1">
3.  
   <Stock></Stock>
4.  
   </div>
5.  
   </template>
6.  
    
7.  
   <script>
8.  
   import Stock from "@/components/Stock";
9.  
   export default {
10.  
    name: "StockPage",
11.  
    components:{Stock}
12.  
    }
13.  
    </script>
14.  
     
15.  
    <style scoped>
16.  
     
17.  
    </style>

内部的Stock

1.  
   <!-- 显示库存的环形图表 -->
2.  
   <template>
3.  
   <div class="comP2" ref="stock_1"></div>
4.  
   </template>
5.  
   <script>
6.  
   export default {
7.  
   data () {
8.  
   return {}
9.  
   },
10.  
    methods: {}
11.  
    }
12.  
    </script>
13.  
    <style lang="less" scoped>
14.  
    </style>

初始化图表 数据的获取 更新图表 定时器切换的启停

组件挂载到DOM时  初始化图表  =》 获取数据 =》更新图表 =》 增加分辨率适配

组件被卸载时：清除定时器 清除分辨率变化的响应 

1.  
   mounted() {
2.  
   // 渲染DOM元素之后 初始化图表实例 请求数据 监听页面尺寸变化
3.  
   this.initChart()
4.  
   this.getData()
5.  
   window.addEventListener('resize',this.screenAdapter)
6.  
   this.screenAdapter()
7.  
   },
8.  
   destroyed() {
9.  
   clearInterval(this.timerID)
10.  
    window.removeEventListener('resize',this.screenAdapter)
11.  
    },

初始化图表：

基本零配置  就添加个标题  对图表实例添加鼠标移入移出 定时器 启停的效果

1.  
   initChart(){
2.  
   this.chartsInstance = this.$echarts.init(this.$refs.stock_1,this.theme)
3.  
   const initOption = {
4.  
   title:{
5.  
   text:'▎库存和销量分析',
6.  
   left:20,
7.  
   top:30
8.  
   },
9.  
   }
10.  
    this.chartsInstance.setOption(initOption)
11.  
    this.chartsInstance.on('mouSEO（(Search Engine Optimization)）ver',()=>{
12.  
    clearInterval(this.timerID)
13.  
    })
14.  
    this.chartsInstance.on('mouSEO（(Search Engine Optimization)）ut',()=>{
15.  
    this.startInterval()
16.  
    })
17.  
    },

获取数据

get 到数据 调用更新图表的方法  启动定时器

 getData(){
  const {data:res} = await this.$http.get('stock')
  this.allData = res
  this.updateChart()
  this.startInterval()
},

获取到的数据：

1.  
   [{
2.  
   "name": "二建通关大礼包",
3.  
   "stock": 2310,
4.  
   "sales": 2103
5.  
   }, {
6.  
   "name": "21天过二建",
7.  
   "stock": 34312,
8.  
   "sales": 23509
9.  
   }, {
10.  
    "name": "二建不过退费班",
11.  
    "stock": 22140,
12.  
    "sales": 12830
13.  
    }, {
14.  
    "name": "单独教材班",
15.  
    "stock": 10842,
16.  
    "sales": 5492
17.  
    }, {
18.  
    "name": "抖音领航班",
19.  
    "stock": 68102,
20.  
    "sales": 44043
21.  
    }, {
22.  
    "name": "二建押题班",
23.  
    "stock": 12032,
24.  
    "sales": 8603
25.  
    }, {
26.  
    "name": "一建智学班",
27.  
    "stock": 9890,
28.  
    "sales": 8960
29.  
    }, {
30.  
    "name": "28天过一建",
31.  
    "stock": 20130,
32.  
    "sales": 12302
33.  
    }, {
34.  
    "name": "一建精学班",
35.  
    "stock": 89342,
36.  
    "sales": 42948
37.  
    }, {
38.  
    "name": "1V1督学班",
39.  
    "stock": 5034,
40.  
    "sales": 1220
41.  
    }]

数据更新图表 

对获取到的数据进行操作 得到想要的 设置到配置项 更新图表

使用到的数据
data(){
  return{
    chartsInstance:null, // 组件实例
    allData:null, // 请求过来处理过后的数据
    currentIndex:0, // 根据这个改变显示数列
    timerID:null // 定时器
  }
},

1. 定义两个数组 一个是中心点(基于x轴偏移多少，基于y)   一个是渐变色的数组
2. 根据现有的 currentIndex *5 取出要展示的数据  map操作出对应的系列  系列就是五个饼图(圆环图)  item.sales 用渐变色  item.stock用灰底色

1.  
   updateChart(){
2.  
   const centerArr = [
3.  
   ['18%','40%'],
4.  
   ['50%','40%'],
5.  
   ['82%','40%'],
6.  
   ['34%','75%'],
7.  
   ['66%','75%']
8.  
   ]
9.  
   const colorArr = [
10.  
    ['#4ff778','#0ba82c'],
11.  
    ['#e5dd45','#e8b11c'],
12.  
    ['#e8821c','#e55445'],
13.  
    ['#5052ee','#ab6ee5'],
14.  
    ['#23e5e5','#2e72bf'],
15.  
    ]
16.  
    const start = this.currentIndex * 5
17.  
    const end = (this.currentIndex 1) * 5
18.  
    const showData = this.allData.slice(start,end)
19.  
    const seriesArr = showData.map((item,index) => {
20.  
    return {
21.  
    type:'pie',
22.  
    center:centerArr[index],
23.  
    hoverAnimation:false, // 关闭鼠标移入饼图时的动画效果
24.  
    labelLine:{
25.  
    show:false // 隐藏指示线
26.  
    },
27.  
    label:{
28.  
    position:'center',
29.  
    color:colorArr[index][0]
30.  
    },
31.  
    data:[
32.  
    {
33.  
    name:item.name '\n' '\n' item.sales,
34.  
    value:item.sales,
35.  
    itemStyle:{
36.  
    color: new this.$echarts.graphic.LinearGradient(0,1,0,0,[
37.  
    {
38.  
    offset:0,
39.  
    color:colorArr[index][0]
40.  
    },
41.  
    {
42.  
    offset:1,
43.  
    color:colorArr[index][1]
44.  
    }
45.  
    ])
46.  
    }
47.  
    },
48.  
    {
49.  
    value:item.stock,
50.  
    itemStyle:{
51.  
    color:'#333843'
52.  
    }
53.  
    }
54.  
    ]
55.  
    }
56.  
    })
57.  
    const dataOption = {
58.  
    series:seriesArr
59.  
    }
60.  
    this.chartsInstance.setOption(dataOption)
61.  
    },

定时器的回调

0-1 之间切换 因为总数居10条 一次展示5条

1.  
   startInterval(){
2.  
   if (this.timerID){
3.  
   clearInterval(this.timerID)
4.  
   }
5.  
   this.timerID = setInterval(()=>{
6.  
   this.currentIndex
7.  
   if (this.currentIndex > 1){
8.  
   this.currentIndex = 0
9.  
   }
10.  
    this.updateChart()
11.  
    },4400)
12.  
    },

屏幕尺寸变化的响应

圆环的半径在这里相应的设置 

1.  
   screenAdapter(){
2.  
   // 标题 文字 圆环
3.  
   const titleFontSize = this.$refs.stock_1.offsetWidth / 100 * 3.6
4.  
   const innerRadius = titleFontSize * 2.8
5.  
   const outRadius = titleFontSize * 2.4
6.  
   const seriesArr = []
7.  
   for (let i=0;i<5;i ){
8.  
   seriesArr.push({
9.  
   type:'pie',
10.  
    radius:[outRadius,innerRadius],
11.  
    label: {
12.  
    fontSize: titleFontSize / 1.4
13.  
    }
14.  
    })
15.  
    }
16.  
    const adapterOption = {
17.  
    title:{
18.  
    textStyle:{
19.  
    fontSize: titleFontSize
20.  
    }
21.  
    },
22.  
    series: seriesArr
23.  
    }
24.  
    this.chartsInstance.setOption(adapterOption)
25.  
    this.chartsInstance.resize()
26.  
    }

这篇好文章是转载于：学新通技术网