小程序-echarts-之 水球图展示

效果图：

具体操作：

水球图插件  git地址：https://github.com/ecomfe/echarts-liquidfill#api

下载后，将echarts-liquidfill.min.js 这个文件放在小程序里面引入的echarts组件目录下，

如下：

文件这样放 就可以用了

小程序页面代码 

 wxss代码：

/**index.wxss**/
.container {width: 100%;height: 100vh;display: flex;justify-content: center;align-items: center;/* background-color: pink; */
}.canvasArea {width: 300rpx;height: 300rpx;
}.canvasArea canvas {width: 300rpx;height: 300rpx;
}

wxml 文件代码;

<!--index.wxml-->
<view class="container"><view class="canvasArea"><ec-canvas id="dispace_charts" canvas-id="dispace_charts" ec="{{ ec_dispace_charts }}"></ec-canvas></view>
</view>

js文件代码

import * as echarts from '../../ec-canvas/echarts';
import * as liquidFill from '../../ec-canvas/echarts-liquidfill.min';
const app = getApp()
Page({data: {ec_dispace_charts: {lazyLoad: true},},onLoad: function () {// 获取组件this.ecComponent = this.selectComponent('#dispace_charts');this.initCharts(0.7);},initCharts: function (value) {this.ecComponent.init((canvas, width, height, dpr) => {// 获取组件的 canvas、width、height 后的回调函数// 在这里初始化图表const chart = echarts.init(canvas, null, {width: width,height: height,devicePixelRatio: dpr // new});// let data = [value, value, value, ];chart.setOption(setOption(value));// 将图表实例绑定到 this 上，可以在其他成员函数（如 dispose）中访问this.chart = chart;// 注意这里一定要返回 chart 实例，否则会影响事件处理等return chart;});}
})function setOption(value, data) {const option = {title: {// text: (value * 100).toFixed(0),textStyle: {fontFamily: 'Microsoft Yahei',fontWeight: 'normal',color: '#fff',rich: {a: {fontSize: 18,}}},x: 'center',y: '40%'},grid:{left: 0,top: 0,bottom: 0},series: [{type: 'liquidFill',waveAnimation: true,animation: true,data: [value],   // 波浪label: {formatter: data,    //  值fontSize: 30,fontFamily: 'Lobster Two',},radius: '90%',}]};return option
}

json

{"usingComponents": {"ec-canvas": "../../ec-canvas/ec-canvas"}
}

这样基本就能用了，具体的参数值，直接去看水球图的参数设置吧！这里只是简单的出现效果！