echarts 水波图

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>

• css

.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%;
}

• js

		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();
			});
		},