echarts

WuWuII

已于 2022-08-08 23:32:54 修改

阅读量584

点赞数

分类专栏：前端 Echarts 文章标签： echarts

于 2021-01-29 10:05:18 首次发布

本文链接：https://blog.csdn.net/a3562323/article/details/113367824

版权

前端同时被 2 个专栏收录

13 篇文章 0 订阅

订阅专栏

Echarts

4 篇文章 0 订阅

订阅专栏

formatter

模板变量有 {a}, {b}，{c}，{d}，{e}，分别表示系列名，数据名，数据值等。在 trigger 为’axis’ 的时候，会有多个系列的数据，此时可以通过{a0}, {a1}, {a2} 这种后面加索引的方式表示系列的索引。不同图表类型下的{a}，{b}，{c}，{d}含义不一样。其中变量{a}, {b}, {c}, {d}在不同图表类型下代表数据含义为：

u 折线（区域）图、柱状（条形）图、K线图: {a}（系列名称），{b}（类目值），{c}（数值）, {d}（无）

u 散点图（气泡）图 : {a}（系列名称），{b}（数据名称），{c}（数值数组）, {d}（无）

u 地图 : {a}（系列名称），{b}（区域名称），{c}（合并数值）, {d}（无）

u 饼图、仪表盘、漏斗图: {a}（系列名称），{b}（数据项名称），{c}（数值）, {d}（百分比）
在这里插入图片描述
formatter就是红框圈出来的样式

legend

图例属性
在这里插入图片描述

使用rich给label加个图片

这里是加了个红圈的图片
在这里插入图片描述
以下是代码，直接复制拿过去测试就行

<!DOCTYPE html>
<html style="height: 100%">
	<head>
		<meta charset="utf-8">
	</head>
	<body style="height: 100%; margin: 0">
		<div id="container" style="height: 100%"></div>

		<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@5/dist/echarts.min.js"></script>

		<script type="text/javascript">
			var dom = document.getElementById("container");
			var myChart = echarts.init(dom);
			var app = {};
			var num=0;
			var option;



			option = {
				legend: {
					top: 'bottom'
				},
				toolbox: {
					show: true,
					feature: {
						mark: {
							show: true
						},
						dataView: {
							show: true,
							readOnly: false
						},
						restore: {
							show: true
						},
						saveAsImage: {
							show: true
						}
					}
				},
				series: [{
					name: '面积模式',
					type: 'pie',
					radius: '50%',
					center: ['50%', '50%'],
					roseType: 'area',
					itemStyle: {
						borderRadius: 8
					},
					data: [                {value: 40, name: 'rose 1'},
                {value: 38, name: 'rose 2'},
                {value: 32, name: 'rose 3'},
                {value: 30, name: 'rose 4'},
                {value: 28, name: 'rose 5'},
                {value: 26, name: 'rose 6'},
                {value: 22, name: 'rose 7'},
                {value: 18, name: 'rose 8'}
					],
					label: {
						formatter: '{a|}{b}{d}%',
/* 						formatter: function(value){
							var result='123';
							var eValue=eval(value.data); 
							num+=value.percent;
							console.log(num);
							if(num/2>50){
								return eValue.name+'{a|}';
							}else{
								return '{a|}'+eValue.name;
							}
							
						}, */
						rich: {
							a: {
								backgroundColor: {
									image:'./img/111.png'
								},
								height: 40,
							}
						}
					},
				}]
			};

			if (option && typeof option === 'object') {
				myChart.setOption(option);
			}
		</script>
	</body>
</html>