vue大屏中的水球图

深碍√TFBOYSˉ_ 2021-07-25 20:32 637阅读 0赞

参考：[https://www.makeapie.com/editor.html?c=xr1NbmrIZQ][https_www.makeapie.com_editor.html_c_xr1NbmrIZQ]

## 一、下载 ##

cnpm i -S echarts-liquidfill

注意：这个水球图中的echarts版本为5.0.1 。如果用4.9.0是显示不出的

##  二、main.js中引入 ##

import 'echarts-liquidfill'

## 三、效果图： ##

![20210317194212375.gif][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70][]![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70 1][]![20210317195811786.png][]![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70 2][]

chart.vue:

<template>
      
      <Echart :options="options" height="4.5rem"></Echart>
    </template>
    
    <script>
    import Echart from "@/common/echart";
    export default {
      data() {
        return {
          options: {},
        };
      },
      components: {
        Echart,
      },
      props: {
        cdata: {
          type: Object,
          default: () => ({}),
        },
      },
      watch: {
        cdata: {
          handler(newData) {
            this.options = {
              series: [
                {
                  type: "liquidFill",
                  radius: "85%",
                  waveAnimation: true,
                  shape: "circle", //rect|roundRect|pin|diamond|circle
                  data: [
                    {
                      value: newData.data,
                      direction: "right", //波浪方向
                      itemStyle: {
                        normal: {
                          //这里就是根据不同的值显示不同球体的颜色。下面用箭头函数不能成功
                          color: eval(
                            "if(newData.data<0.3){'rgb(254,85,85)'}else if(newData.data<0.7){'rgba(250, 173, 20, 1)'}else{'rgba(73,208,136, 1)'}"
                          ),
                        },
                      },
                    },
                  ],
                  outline: {
                    show: true, //是否显示轮廓 布尔值
                    borderDistance: 7, // 外部轮廓与图表的距离 数字
                    itemStyle: {
                      //这里就是根据不同的值显示不同边框的颜色
                      borderColor: eval(
                        "if(newData.data<0.3){'rgb(254,85,85)'}else if(newData.data<0.7){'rgba(250, 173, 20, 1)'}else{'rgba(73,208,136, 1)'}"
                      ), // 边框的颜色
                      borderWidth: 7, // 边框的宽度
                    },
                  },
                  // 内图 背景色 边
                  backgroundStyle: {
                    color: "rgba(19, 25, 47, 0.6)",
                  },
                  label: {
                    // 数据展示样式
                    show: true,
                    color: "white",
                    insideColor: "#fff",
                    fontSize: 50,
                    fontWeight: "bold",
                    align: "center",
                    baseline: "middle",
                  },
                },
              ],
            };
          },
          immediate: true,
          deep: true,
        },
      },
    };
    </script>

index.vue:

<template>
      <Chart :cdata="cdata" />
    </template>
    
    <script>
    import Chart from "./chart.vue";
    export default {
      data() {
        return {
          cdata: {
            data: 0,
          },
        };
      },
      components: {
        Chart,
      },
      mounted() {
        this.setData();
      },
      methods: {
        // 根据自己的业务情况修改
        setData() {
          setInterval(() => {
            this.cdata.data += 0.1;
            if (this.cdata.data >= 1) {
              this.cdata.data = 0;
            }
          }, 1000);
        },
      },
    };
    </script>

[https_www.makeapie.com_editor.html_c_xr1NbmrIZQ]: https://www.makeapie.com/editor.html?c=xr1NbmrIZQ
[20210317194212375.gif]: /images/20210725/b4441f04fe214f8d9450467ab9d8d346.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20210317195654390.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20210317195746208.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2,size_16,color_FFFFFF,t_70
[20210317195811786.png]: https://img-blog.csdnimg.cn/20210317195811786.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70 2]: /images/20210725/b33779c442d445ee81e709598cd02b9f.png