4.20 echarts 饼图实现库存销量分析-WebSocket，轮询，http-WebSocket 的使用-后端的基本使用- 前端的测试-后端代码改造

4.20 echarts 饼图实现库存销量分析-WebSocket，轮询，http-WebSocket 的使用-后端的基本使用- 前端的测试-后端代码改造

一.学习内容

1.1 饼图实现库存销量分析

实现效果

1.1.1图表基本功能的实现

目标：数据的获取，呈现五个圆环，标题的配置, 圆环内文字的显示以及渐变颜色的处理

1.数据的获取

async getData () {
   
// 获取服务器的数据, 对this.allData进行赋值之后, 调用updateChart方法更新图表
    const {
    data: ret } = await this.$http.get('stock')
    this.allData = ret
    this.updateChart()
},

2.数据的处理, 要显示5个圆环的实现.首先需要准备五个圆环的圆心点，先展示前五条数据

updateChart () {
   
// 处理图表需要的数据
// 5个圆环对应的圆心点
const centerPointers = [
    ['18%', '40%'],
    ['50%', '40%'],
    ['82%', '40%'],
    ['34%', '75%'],
    ['66%', '75%']
]
// 先显示前5条数据
const showData = this.allData.slice(0, 5)
//遍历每条数据，进行展示
const seriesArr = showData.map((item, index) => {
   
return {
   
    	//饼图类型
        type: 'pie',
    	//鼠标移入动画的移除
    	hoverAnimation: false,
    	//指示线的移除
    	labelLine: {
   
			show: false
		},
        center: centerPointers[index],
    	//设置外圆与内圆的半径
        radius: [110, 100],
        data: [
                {
   
                    //销量的数据
                	value: item.sales
                },
                {
   
                    //囤货数据
                	value: item.stock,
                }
			]
		}
})
const dataOption = {
   
	series: seriesArr
}
	this.chartInstance.setOption(dataOption)
}

3.标题的配置

initChart () {
   
this.chartInstance = this.$echarts.init(this.$refs.stock_ref)
const initOption = {
   
title: {
   
        text: '▎ 库存销售量',
        left: 20,
        top: 20
	}
}
this.chartInstance.setOption(initOption)
},

4.圆环内文字的显示, 因为显示的是销量的商品和销售出的数量，所以给饼图第一部分数据销售数据增加 name 属性

updateChart () {
   
......
const seriesArr = showData.map((item, index) => {
   
return {
   
......
    data: [
    {
   
        name: item.name + '\n\n' + item.sales,
        value