vue+echarts水球图制作

最新推荐文章于 2023-11-20 20:45:00 发布

士居坡东

最新推荐文章于 2023-11-20 20:45:00 发布

阅读量405

点赞数

文章标签： echarts vue.js 前端

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

版权

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);
    },
  },
};