echarts 水波图

在这里插入图片描述

安装

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

引入

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

html

<div id="chart1" ref="chart1" class="chart1"></div>

.chart1 {width: 120px;height: 120px;position: relative;
}/* 外圈 */
.chart1::before {position: absolute;top: 5px;left: 5px;content: '';border: 2px solid #344974;width: 90%;height: 90%;border-radius: 100%;
}

		getPieData1() {const myChart = echarts.init(this.$refs.chart1);let list = [];let value = 0.5;for (let i = 0; i < 2; i++) {if (value - 0.1 > 0) {value -= 0.1;list.push({ name: '111', value: value });}}const option = {// 提示框组件tooltip: {show: false,trigger: 'item', // 触发类型, 数据项图形触发，主要在散点图，饼图等无类目轴的图表中使用。textStyle: {color: '#000', // 文字颜色},formatter: function (value) {return value.seriesName + ': ' + parseInt(value.value * 100) + '%';},},series: [{type: 'liquidFill',name: '',radius: '80%',center: ['51%', '51%'],shape: 'circle',phase: 0,direction: 'right',outline: {show: true,borderDistance: 0, // 边框线与图表的距离 数字itemStyle: {opacity: 1,borderWidth: 0,borderColor: '#2bf9ed',},},// 图形样式itemStyle: {color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: '#00FFF4' }, //柱图渐变色{ offset: 0.5, color: '#3B8DF2' }, //柱图渐变色                 //柱图渐变色]),opacity: 0.5,shadowBlur: 10,},backgroundStyle: {color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'rgba(0,255,244,0.72)' }, //柱图渐变色{ offset: 0.4, color: 'rgba(59,141,242,0.72)' }, //柱图渐变色                 //柱图渐变色]),opacity: 0.72,},// 图形的高亮样式emphasis: {itemStyle: {opacity: 1,},},// 图形上的文本标签label: {fontSize: 30,fontWeight: 600,color: '#fff',},data: list,},{name: 'Access From',type: 'pie',radius: ['90%', '100%'],center: ['50%', '50%'],startAngle: 340,avoidLabelOverlap: false,itemStyle: {borderRadius: 10,},label: {show: false,position: 'center',},emphasis: {label: {show: true,fontSize: '40',fontWeight: 'bold',},},labelLine: {show: false,},data: [{value: 0.4,name: 'Direct',itemStyle: {color: 'rgba(39,233,247,1)',},},{value: 0.6,name: 'Direct',itemStyle: {color: 'rgba(240, 248, 255, 0)',},},],emphasis: {disabled: true,},tooltip: {show: false,},},],};myChart.setOption(option);window.addEventListener('resize', function () {myChart.resize();});},