echarts--四个圈饼图

zyue_1217

已于 2023-07-10 15:53:40 修改

阅读量281

点赞数

分类专栏： echarts 文章标签： echarts javascript 前端 vue

于 2023-07-06 14:28:04 首次发布

本文链接：https://blog.csdn.net/zyue_1217/article/details/131575831

版权

echarts 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

这段代码展示了如何在Vue.js的mounted生命周期钩子中使用Echarts库初始化一个饼图，设置过渡动画和数据加载提示。数据加载完成后，创建了四个带有不同颜色和标签的扇区，每个扇区代表不同的类别及其相应的百分比。同时，代码处理了窗口的resize事件以实现图表的自适应布局。

摘要由CSDN通过智能技术生成

let mychart = this.$echarts.init(document.getElementById('chart'))
       //过渡动画,转圈圈
      // mychart.showLoading({
      //   text: '数据正在加载...',
      //   textStyle: { fontSize: 30, color: '#444' },
      //   effectOption: { backgroundColor: 'rgba(0, 0, 0, 0)' }
      // });
      var data = [
        {
          name: '装备制造',
          value: 54
        }, {
          name: '现代材料',
          value: 44
        }, {
          name: '新能源',
          value: 35
        }, {
          name: '新一代信息技术',
          value: 30
        }]

      var titleArr = [], seriesArr = [];
      var colors = [['#389af4', '#dfeaff'], ['#ffc257', '#ffedcc'], ['#fd6f97', '#fed4e0'], ['#a181fc', '#e3d9fe']]
      data.forEach(function (item, index) {
        titleArr.push(
          {
            text: item.name,
            // 标题位置
            left: (index + 0.5) * 24 + '%',
            top: '70%',
            textAlign: 'center',
            textStyle: {
              fontWeight: 'normal',
              fontSize: '12',
              color: colors[index][0],
              textAlign: 'center',
            },
          }
        );
        seriesArr.push(
          {
            name: item.name,
            type: 'pie',
            clockWise: false,
            radius: [40, 35],
            itemStyle: {
              normal: {
                // 占比颜色
                color: colors[index][0],
                shadowColor: colors[index][0],
                shadowBlur: 0,
                label: {
                  show: false
                },
                labelLine: {
                  show: false
                },
              }
            },
            hoverAnimation: false,
            // 饼图的中心（圆心）坐标，数组的第一项是横坐标，第二项是纵坐标。
            center: [(index + 0.6) * 24 + '%', '40%'],
            data: [{
              // 圆百分比内容
              value: item.value,
              label: {
                normal: {
                  formatter: function (params) {
                    return params.value + '%';
                  },
                  position: 'center',
                  show: true,
                  textStyle: {
                    fontSize: '16',
                    fontWeight: 'normal',
                    //圆心数字颜色
                    color: colors[index][0]
                  }
                }
              },
            }, {
             // 占比计算
              value: 100 - item.value,
              name: 'invisible',
              itemStyle: {
                normal: {
                  color: colors[index][1]
                },
                emphasis: {
                  color: colors[index][1]
                }
              }
            }]
          }
        )
      });
      let option = {
        backgroundColor: "#fff",
        title: titleArr,
        series: seriesArr
      }

      // 模拟异步加载数据
      // setTimeout(function () {
      //   // 数据加载完成后隐藏加载动画
      //   mychart.hideLoading();

      //   // 更新图表数据
      //   mychart.setOption(option);
      // }, 2000);
      mychart.setOption(option)
      // 自适应屏幕
      window.addEventListener('resize', function () {
        mychart.resize()
      })