引入echarts环形图及显示后端数据

实现效果:

1.下载echarts 并引用

复制代码
npm install echarts --save 或 pnpm install -S echarts

项目中引用:

在项目main.ts中 import * as echarts from "echarts"; //引入echarts

3.页面中使用

<div id="main" class="chart" :option="option"></div>//定义一个有宽高的盒子

复制代码
//图表
const echartInit = async () => {
  var chartDom = document.getElementById('main');
  var myChart = echarts.init(chartDom);
  var option;
  let datas = []
  let numAll = ('0')
//调用后台接口
  const res = await getType();
  if (res && res.code == 200) {
    datas = res.data

  }
  //总计
   datas.forEach((item) => {
     let value = parseInt(item.value)
     numAll = numAll+ value - 0
  })
  // 指定图表的配置项和数据
  option = {
    // title: {
    //   text: '诉求类型分布',
    //   left: 'center',
    //   textStyle: {
    //   color: '#fff',
    //   fontWeight: 'normal',
    //   fontSize: 18
    // }
    // },
    graphic: [
          {
            //环形图中间添加文字
            type: "text", //通过不同top值可以设置上下显示
            left: "45%",
            top: "47%",
            style: {
              text: `总计\n\n${numAll}条`,
              textAlign: "center",
              fill: "#fff", //文字的颜色
              fontSize: 12,
              lineHeight: 10,
            },
          },
        ],
    tooltip: {
      trigger: 'item'
    },
    legend: {
      // top: '5%',
      // orient: 'vertical',
      left: 'center',
      bottom: -5,
      icon: 'circle',
      textStyle: {//图例文字的样式
        color: '#fff',
        fontSize:12,
      }

    },
    color:['#33ff99','#6699ff','#be99FF','#FFFF66'],//修改圆形图颜色
    series: [
      {
        name: '诉求类型',
        type: 'pie',
        radius: ['35%', '50%'],
        // center:['30%', '50%'],
        avoidLabelOverlap: true,
        minAngle: 20,//最小的扇区角度(0 ~ 360),用于防止某个值过小导致扇区太小影响交互
        itemStyle: {
          borderRadius: 10,
          borderColor: '#fff',
          borderWidth: 2
        },
        label: {
          show: false,
          normal: {
                   show: true,
                   lineHeight:10,
                   // position: 'inside',
                  formatter: '{b}{d}%\n\n{c}条', //自定义显示格式(b:name, c:value, d:百分比)
                  fontSize: 10   // 字体大小
                  },
          // position: 'center'
        },
        labelLine: {
         length: 20,
         length2: 50,
         maxSurfaceAngle: 80
        },
       emphasis:{
          shadowBlur: 10,
          hadowOffsetX: 0,
          shadowColor: 'rgba(0, 0, 0, 0.5)'
          },
        emphasis: {
          label: {
            show: true,
            fontSize: 12,
            fontWeight: 'bold'
          }
        },
        itemStyle: {
             borderColor: '#fff',
             borderWidth: -1
             },
        data: datas
      }
    ]
  };
  // 使用刚指定的配置项和数据显示图表。
  option && myChart.setOption(option);

}

可根据自己需求配置相关样式

相关推荐
kk不中嘞几秒前
Webpack 核心原理剖析
前端·webpack·node.js
葡萄城技术团队几秒前
TypeScript 队列实战:从零实现简单、循环、双端、优先队列,附完整测试代码
typescript
Yvonne爱编码4 分钟前
简述ajax、node.js、webpack、git
前端·git·ajax·webpack·node.js·visual studio
周小码4 分钟前
CesiumJS详解:打造专业级Web 3D地球仪与地图的JavaScript库
前端·javascript·3d
哆啦A梦15888 分钟前
Element-Plus
前端·vue.js·ts
IT_陈寒15 分钟前
🔥3分钟掌握JavaScript性能优化:从V8引擎原理到5个实战提速技巧
前端·人工智能·后端
前端小巷子37 分钟前
JS 打造丝滑手风琴
前端·javascript·面试
Mintopia1 小时前
多模态 AIGC 在 Web 内容创作中的技术融合实践:把“创作引擎”装进浏览器
前端·javascript·aigc
鹏多多.1 小时前
flutter-使用fluttertoast制作丰富的高颜值toast
android·前端·flutter·ios
Mintopia1 小时前
Next.js 的 Web Vitals 监测与 Lighthouse 分析:从底层到实战的快乐科学
前端·javascript·next.js