本文主要是介绍小程序-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"}
}
这样基本就能用了，具体的参数值，直接去看水球图的参数设置吧！这里只是简单的出现效果！
这篇关于小程序-echarts-之 水球图展示的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
