vue3+echarts环形柱状图

小羊aa

已于 2024-09-26 11:17:37 修改

阅读量218

点赞数 2

文章标签： echarts 前端 javascript

于 2024-09-26 11:15:40 首次发布

本文链接：https://blog.csdn.net/weixin_45960031/article/details/142549762

版权

效果如下：
在这里插入图片描述

代码实现

// 环形柱状图js封装  
//chartOption.ts文件
import * as Echarts from "echarts";
export const circleOption = {
  polar: {
    // radius: [30, "80%"]
  },
  angleAxis: {
    // max: 2,
    //   startAngle: 75
    show: false
  },
  radiusAxis: {
    type: "category",
    data: ["统计"],
    show: false
  },
  tooltip: {},
  legend: {
    show: true,
    data: ["喜羊羊", "美羊羊", "懒羊羊"]
  },
  series: [
    {
      type: "bar",
      data: [] as number[],
      coordinateSystem: "polar",
      name: "喜羊羊",
      label: {
        show: true,
        position: "middle"
      },
      itemStyle: {
        borderColor: "red",
        opacity: 0.8,
        borderWidth: 1
      }
    },
    {
      type: "bar",
      data: [] as number[],
      coordinateSystem: "polar",
      name: "美羊羊",
      // roundCap: true,
      label: {
        show: true,
        position: "middle"
      },
      itemStyle: {
        borderColor: "green",
        opacity: 0.8,
        borderWidth: 1
      }
    },
    {
      type: "bar",
      data: [] as number[],
      coordinateSystem: "polar",
      name: "懒羊羊",
      // roundCap: true,
      label: {
        show: true,
        position: "middle"
      },
      itemStyle: {
        borderColor: "yellow",
        opacity: 0.8,
        borderWidth: 1
      }
    }
  ]
};

前端代码

// html
<div ref="chart4" class="word_chart"></div>
// js
const chart4 = ref();
const ChartsObj4 = shallowRef<echarts.ECharts>();
// 初始化
function initCharts() {
  window.addEventListener("resize", () => {
    ChartsObj4.value?.resize();
  });
  ChartsObj4.value = echarts.init(chart4.value);
}
/*
 接口请求 返回格式
{
'喜羊羊': 1,
'美羊羊': 3,
'懒羊羊': 1
}
*/
getCount(queryForm1).then((res: any) => {
    circleOption.series[0].data = [res.data?.'喜羊羊'];
    circleOption.series[1].data = [res.data?.'美羊羊'];
    circleOption.series[2].data = [res.data?.'懒羊羊'];
    nextTick(() => {
      ChartsObj4.value?.setOption(circleOption);
    });
  });