Echarts 雷达图指示器名称rich使用
echarts社区 https://www.makeapie.com/expl...
'radar.name': {
textStyle: {
color: '#5a4b66'
},
formatter: (str) => {
let obj = _.find(personalityChart, (pc: any) => pc.image === str) || {};
let percent = obj.percent ? `${Math.round(obj.percent * 100)}%` : '-';
return `{b|${percent}}{c|${str}}`;
},
rich: {
b: {
color: '#F78A89'
}
}
【Echarts 雷达图指示器名称rich使用】},
'**tooltip.formatter': (opts) => {
let indicator = _.get(opts, 'radar.indicator');
return (obj) => {
let {
name,
value
} = obj.data;
let contentArr = indicator.map((key, inx) => `${key.name}: ${value[inx]}`);
contentArr.unshift(obj.marker + name);
return contentArr.join('
');
};
}
let personalityChart = [{
"celebrity": "",
"celebrity_code": "12345",
"id": 17,
"image": "人品",
"negative": 553,
"percent": 0.6545,
"positive": 4492,
"total": 6018,
"x": "人品",
"name": "王俊凯",
"value": 6018
}, {
"celebrity": "",
"celebrity_code": "12345",
"id": 21,
"image": "品味",
"negative": 157,
"percent": 0.6256,
"positive": 2974,
"total": 4503,
"x": "品味",
"name": "王俊凯",
"value": 4503
}, {
"celebrity": "",
"celebrity_code": "12345",
"id": 22,
"image": "声音",
"negative": 3,
"percent": 0.9225,
"positive": 777,
"total": 839,
"x": "声音",
"name": "王俊凯",
"value": 839
}];
percent来自原始数据personalityChart,str来自echarts渲染后数据
在tooltip格式化处理系列名,画图字段为value,效果图:
![Echarts 雷达图指示器名称rich使用](https://img.it610.com/image/info9/335036ea93b94011ab78d16195d9ab99.jpg)
文章图片
问题二:echarts-series中label的backgroundColor无效
一开始我是像上面那样写的 发现图片出不来,不能用本地的图片
所以我把图片放到服务器上通过http去请求获取,但是发现图片长宽不是我设置的长宽
查看配置文档发现
如果不定义 rich 属性,则不能指定 width 和 height。
![Echarts 雷达图指示器名称rich使用](https://img.it610.com/image/info9/89de06137d174ce4af77a38a676a6b1e.jpg)
文章图片
https://www.makeapie.com/explore.html
官网上面的某个例子,也可以拿图片当背景,满足
const weatherIcons = {
Sunny: ROOT_PATH + '/data/asset/img/weather/sunny_128.png',
Cloudy: ROOT_PATH + '/data/asset/img/weather/cloudy_128.png',
Showers: ROOT_PATH + '/data/asset/img/weather/showers_128.png'
};
option = {
color: ['#67F9D8', '#FFE434', '#56A3F1', '#FF917C'],
title: {
text: 'Customized Radar Chart'
},
legend: {},
radar: [
{
indicator: [
{ text: 'Indicator1' },
{ text: 'Indicator2' },
{ text: 'Indicator3' },
{ text: 'Indicator4' },
{ text: 'Indicator5' }
],
center: ['25%', '50%'],
radius: 120,
startAngle: 90,
splitNumber: 4,
shape: 'circle',
name:{
formatter:['{B1|}{value}'].join('\n'),
rich: {
B1: {
backgroundColor: {
image: 'https://image.lx1999.cn/images/cf/36/4e/478c4546e1ffa3135caa5ce070618fed53f71b02.jpg'
},
height: 40
}
},
},
// axisName: {
//formatter:['{B1|}{value}'].join('\n'),
//color: '#428BD4',
//rich:{
//B1: {
//backgroundColor: {
//image: weatherIcons.Sunny
//},
//height: 40
//},
//}
// },
splitArea: {
areaStyle: {
color: ['#77EADF', '#26C3BE', '#64AFE9', '#428BD4'],
shadowColor: 'rgba(0, 0, 0, 0.2)',
shadowBlur: 10
}
},
axisLine: {
lineStyle: {
color: 'rgba(211, 253, 250, 0.8)'
}
},
splitLine: {
lineStyle: {
color: 'rgba(211, 253, 250, 0.8)'
}
}
}
],
series: [
{
type: 'radar',
emphasis: {
lineStyle: {
width: 4
}
},
data: [
{
value: [100, 8, 0.4, -80, 2000],
name: 'Data A'
}
]
}
]
};
推荐阅读
- 开始你的第一个Echarts图表(分享自知乎网)
- echarts插件-从后台请求的数据在页面显示空白的问题
- Pyecharts|Pyecharts 猎聘招聘数据可视化
- 可视化图形制作之关系图
- pyecharts可视化大屏
- Echarts 学习
- 我是如何控制1000|我是如何控制1000 个 Echarts 实例同时渲染 最大并发的
- 数据转pdf(包含echarts图表)
- Vue传数据到ECharts时,数据响应式更新了,但地图没渲染(??)
- echarts实现多层不等距x轴,支持框选缩放功能