vue+echarts水球图制作

最新推荐文章于 2024-09-20 09:33:51 发布

士居坡东

最新推荐文章于 2024-09-20 09:33:51 发布

阅读量444

点赞数

文章标签： echarts vue.js 前端

本文链接：https://blog.csdn.net/qq_43977829/article/details/125842799

版权

这篇博客介绍了如何在Vue项目中结合Echarts和Liquidfill库创建动态填充的圆形进度图。首先在package.json中添加echarts和echarts-liquidfill依赖，然后通过npm安装。接着在组件中导入这两个库，数据获取后利用$nextTick确保DOM渲染完成，设置图表配置项，包括系列、颜色、背景样式、标签等，最后调用setOption更新图表。

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

html

  <div class="chart" id="myChart" style="width:100%;height:100%"></div>

js

先在package.json里加入 “echarts”: “^4.2.0-rc.2”, “echarts-liquidfill”: “^2.0.6”,然后 npm i

import echarts from "echarts";
import "echarts-liquidfill";
export default {
  data() {
    return {
       value:null
    };
  },
  created() {},
  mounted() {
    this.getData();
  },
  methods: {
    getData() {
    ......
   //这里省略调用自己接口并计算百分比的方法
   //然后将百分比赋值给value
      
     this.$nextTick(() => {
          this.setEchart();
        });
    },
    setEchart() {
      var chartDom= document.getElementById("myChart");
      this.myChart= echarts.init(chartDom);
      var option= {
        series: [
          {
            type: "liquidFill",
            radius: "75%",
            center: ["50%", "50%"],
            color: ["#ecf6ff"],
            data: [this.value/100], 
            backgroundStyle: {
              borderWidth: 1,
              color: "rgba(236,246,255,0.1)",
            },
            label: {
              normal: {
                formatter:
                  this.value+ "%",
                textStyle: {
                  fontSize: 20,
                  color: "#2397f6",
                  fontWeight: 400,
                },
              },
            },
            outline: {
              show: false,
            },
          },
        ],
      };
      this.myChart.setOption(option);
    },
  },
};