vue + Echarts项目中引用水波图效果

1、下载插件

npm install echarts --save
npm install echarts-liquidfill --save

2、在main.js中引入

import * as echarts from 'echarts';
import 'echarts-liquidfill'

3、添加容器

<div id="myChart"></div>

4、script部分

// 封装
            liquidCharts(id, data, borderC, color0, color100) {
                let dom = document.getElementById(id);
                let myChart = this.$echarts.init(dom);
                let app = {};
                let option = null;
                option = {
                    // 图表主标题
                    title: {
                        show: false,
                        text: "槽使用情况",
                        // x 设置水平安放位置，默认左对齐，可选值：'center' ¦ 'left' ¦ 'right' ¦ {number}（x坐标，单位px）
                        x: "10px",
                        // y 设置垂直安放位置，默认全图顶端，可选值：'top' ¦ 'bottom' ¦ 'center' ¦ {number}（y坐标，单位px）
                        y: "0px",
                        // itemGap设置主副标题纵向间隔，单位px，默认为10，
                        itemGap: 30,
                        backgroundColor: "#fff",

                        // 主标题文本样式设置
                        textStyle: {
                            fontSize: 16,
                            fontWeight: "500",
                            color: "#fff"
                        }
                        // 副标题文本样式设置
                    },
                    // 提示框组件
                    // tooltip: {
                    //     trigger: "item", // 触发类型, 数据项图形触发，主要在散点图，饼图等无类目轴的图表中使用。
                    //     textStyle: {
                    //         color: "#fff" // 文字颜色
                    //     },
                    //     // 提示框浮层内容格式器，支持字符串模板和回调函数两种形式
                    //     // 水球图: {a}（系列名称），{b}（无），{c}（数值）
                    //     // 使用函数模板   传入的数据值 -> value: number|Array,
                    //     formatter: function (value) {
                    //         return value.seriesName + ": " + value.data * 100 + "%";
                    //     }
                    // },
                    series: [
                        {
                            type: "liquidFill",
                            name: "已用槽", // 系列名称，用于tooltip的显示，legend 的图例筛选
                            radius: "89%", // 水球图的半径
                            center: ["52%", "55%"], // 水球图的中心（圆心）坐标，数组的第一项是横坐标，第二项是纵坐标
                            // 水填充图的形状 circle 默认圆形  rect 圆角矩形  triangle 三角形
                            // diamond 菱形  pin 水滴状 arrow 箭头状  还可以是svg的path
                            shape: "circle",
                            phase: 0, // 波的相位弧度 不设置  默认自动
                            direction: "right", // 波浪移动的速度  两个参数  left 从右往左 right 从左往右
                            outline: {
                                show: true,
                                borderDistance: 0, // 边框线与图表的距离 数字
                                itemStyle: {
                                    opacity: 0.9, // 边框的透明度   默认为 1
                                    borderWidth: 2, // 边框的宽度
                                    shadowBlur: 14, // 边框的阴影范围 一旦设置了内外都有阴影
                                    shadowColor: "#fff", // 边框的阴影颜色,
                                    borderColor: borderC // 边框颜色
                                }
                            },
                            // 图形样式
                            // itemStyle: {
                            //   color: borderC, // 水球显示的背景颜色
                            //   opacity: 0.4, // 波浪的透明度
                            //   shadowBlur: 10 // 波浪的阴影范围
                            // },
                            backgroundStyle: {
                                color: "transparent" // 水球未到的背景颜色
                            },
                            // 图形的高亮样式
                            emphasis: {
                                itemStyle: {
                                    opacity: 1 // 鼠标经过波浪颜色的透明度
                                }
                            },
                            // 图形上的文本标签
                            label: {
                                fontSize: 26,
                                fontWeight: 400,
                                color: borderC
                            },
                            color: [
                                {
                                    type: "linear",
                                    x: 0,
                                    y: 1,
                                    x2: 0,
                                    y2: 0,
                                    colorStops: [
                                        {
                                            offset: 1,
                                            color: color0 // 0% 处的颜色
                                        },
                                        {
                                            offset: 0,
                                            color: color100 // 100% 处的颜色
                                        }
                                    ],
                                    global: false // 缺省为 false
                                }
                            ],
                            data: data // 系列中的数据内容数组
                        }
                    ]
                };
                if (option && typeof option === "object") {
                    myChart.setOption(option, true);
                }
            },
            drawLine() {
                //基于准本好的DOM，初始化echarts实例
                this.liquidCharts(
                    "myChart", //参数1 id:加载的dom元素的id
                    [0.6],      //参数2 data:加入的数据,例如：[0.6]表示60%
                    ["#616174"],
                    ["rgba(6, 161, 74, 0.8)"],
                    ["rgba(255, 255, 255, 1)"]
                );
            },