echarts圆形嵌套

最新推荐文章于 2024-09-14 18:52:56 发布

荔枝桂圆草莓

最新推荐文章于 2024-09-14 18:52:56 发布

阅读量151

点赞数

文章标签： echarts javascript 前端

本文链接：https://blog.csdn.net/2201_75663407/article/details/129754640

版权

本文详细介绍了如何使用Echarts库在JavaScript中创建动态的圆形嵌套图表。通过配置Echarts选项，实现不同层级数据的可视化展示，适用于前端开发中的数据呈现需求。

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

<template>
  <div id="app">
    <!-- 饼图 -->
  <div class="echart">
    <!-- 这个 div 会被解析为 echarts图 -->
    <div class="barChart" ref="barChart"></div>
     <!-- 计划 -->
  <div class="wan">
  <div class="jihua">
    <div class="top">计划OA</div>
    <div class="di">100%</div>
  </div>
  <div class="jihua">
    <div class="top">实际OA</div>
    <div class="di">56.4%</div>
  </div>
  <div class="jihua">
    <div class="top">计划差距</div>
    <div class="di">44.6%</div>
  </div>
</div>

<div class="kapian">
  <!-- <el-progress :percentage="50" :stroke-width="26" ></el-progress> -->
  <div class="kaishi">
    <div class="zuo">计划开始日期</div>
    <div class="you">2019/04/22</div>
  </div>
  <div class="kaishi">
    <div class="zuo">计划开始日期</div>
    <div class="you">2019/04/22</div>
  </div>
  <div class="kaishi">
    <div class="zuo">暂未延期&nbsp;&nbsp;55%</div>
    <div class="jindu"></div>
  </div>
</div>

  </div>
  <!-- 百分比 -->
  <div class="bai">
    <h1>57%</h1>
    <p>完成百分比</p>
  </div>
 
</div>
</template>

<script>

export default {
  mounted() {
    this.initBarChart();
  },
  methods: {
    initBarChart() {
      let myChart = this.$echarts.init(this.$refs.barChart);
      // total 和 salary的数据就是各个环的数据
      let total = 100;
      let salayry1 = 64;
      let salayry2 = 24;
      let salayry3 = 12;
      // let salayry4 = 30;
      // let salayry5 = 15;
      // let salayry6 = 20;
      let option = {
        color: [
          "#00FFFF",
          "#00B0FF",
          "#FFC000",
          // "#FFAB6F",
          // "#63E315",
          // "#893BFF",
        ],
        legend: {
          orient: "vertical",
          left: "20%",
          top: "20%",
          itemHeight: 12, //图例的高度
          itemGap: 15, //图例之间的间距
          data: [
            {
              name: "计划 645