echarts——圆环饼图

在这里插入图片描述

需求

需求：圆环饼图
- 1、每个圆环分为左右两部分，分别为每个商品的库存和销量，销量设置为渐变色
- 2、在圆环中心显示该商品名字和销量，设置不同的颜色
- 3、每次展示5个产品的圆环图，定时切换展示下一页商品，这里就不写了
- 4、随着屏幕的变化，适配标题大小和圆环的半径以及内部标签文字的大小

<template><div class="w100 h100"><div ref="looppie" class="w100 h100"></div></div>
</template><script>
import { ququ } from "../../public/static/theme/ququ";
export default {data() {return {size: null, //基准字体大小——控制标题和图例的大小looppieChart: null,looppieData: [{name: "服装",stock: 100,sales: 200,},{name: "水果",stock: 140,sales: 210,},{name: "家居",stock: 50,sales: 120,},{name: "奶粉",stock: 170,sales: 200,},{name: "奶瓶",stock: 70,sales: 260,},],index: 0, // 当前一级分类的索引};},mounted() {/*** 需求：圆环饼图* 1、每个圆环分为左右两部分，分别为每个商品的库存和销量，销量设置为渐变色* 2、在圆环中心显示该商品名字和销量，设置不同的颜色* 3、每次展示5个产品的圆环图，定时切换展示下一页商品，这里就不写了* 4、随着屏幕的变化，适配标题大小和圆环的半径以及内部标签文字的大小*/this.init();this.getData();// 监听屏幕大小变化window.addEventListener("resize", this.screenResize);// 一进来主动调取屏幕适配this.screenResize();},beforeDestroy() {window.removeEventListener("resize", this.screenResize);},methods: {// 初始化图表init() {this.$echarts.registerTheme("ququ", ququ);this.looppieChart = this.$echarts.init(this.$refs.looppie, "ququ");let initOption = {// 标题title: {text: "▍五个圆环饼图", // ▍ 任意打一个字，调出搜狗输入法卡片，右键单击——表情符号——符号大全left: 40,top: 40,textStyle: {color: "#fff",},},};this.looppieChart.setOption(initOption);},// 获取并处理数据，然后渲染图表getData() {// 五个饼图的圆心位置let positionArr = [["18%", "40%"],["50%", "40%"],["82%", "40%"],["34%", "75%"],["66%", "75%"],];// 五个饼图的渐变色起始颜色let colorArr = [["#4ff778", "#0ba82c"],["#e5dd45", "#e8b11c"],["#e8821c", "#e55445"],["#5052ee", "#ab6ee5"],["#23e5e5", "#2e72bf"],];// 因为有5个饼图，所以series配置项数组有5项数据分别代表每个饼图的数据let seriesArr = this.looppieData.map((item, index) => {return {type: "pie",// radius: [115, 100], // 圆环饼图内外直径的大小center: positionArr[index], // 饼图的位置——正中心// 圆环中间显示的文字标签label: {show: true, // 显示饼图每块区域的名称position: "center", // 标签文字显示在圆环中间color: colorArr[index][0], // 每个饼图的标签文字颜色},labelLine: {show: false, // 隐藏名字和图之间默认的一条线},name: item.name,data: [{name: item.name + "\n" + item.sales, //lable显示的文字内容value: item.sales,itemStyle: {//该区域对应渐变色color: new this.$echarts.graphic.LinearGradient(0, 1, 0, 0, [{ offset: 0, color: colorArr[index][0] },{ offset: 1, color: colorArr[index][1] },]),},},{// name: "库存",value: item.stock,itemStyle: {color: "#666", //该区域对应颜色},},],};});let dataOption = {series: seriesArr,};// 生成图表this.looppieChart.setOption(dataOption);},// 监听屏幕变化——标题大小，圆环半径和标签文字大小screenResize() {this.$nextTick(() => {// 获取图表区域的宽度，作为基准值来设置其他需要动态改变的尺寸let width = this.$refs.looppie.offsetWidth;this.size = (width / 100) * 3.6; // 定义一个基准尺寸let screenOption = {title: {textStyle: {fontSize: this.size,},},// 动态设置圆环的大小和标签文字大小,有五个饼图，所以series数组就有5项series: [{type: "pie", //设置类型是为了第一次加载先执行这个方法radius: [this.size * 3, this.size * 2.5],label: {fontSize: this.size / 1.5,},},{type: "pie",radius: [this.size * 3, this.size * 2.5],label: {fontSize: this.size / 1.5,},},{type: "pie",radius: [this.size * 3, this.size * 2.5],label: {fontSize: this.size / 1.5,},},{type: "pie",radius: [this.size * 3, this.size * 2.5],label: {fontSize: this.size / 1.5,},},{type: "pie",radius: [this.size * 3, this.size * 2.5],label: {fontSize: this.size / 1.5,},},],};this.looppieChart.setOption(screenOption);// 更新图表this.looppieChart.resize();});},},
};
</script>