如何解决如何使用echarts在树形图中获取渐变
我有一个层次结构,并且基于值,因此我希望基于地图上的值进行渐变。我为此使用了echarts。他们的示例中给出的解决方案很难获得梯度。我已经使用React JS实现了这一点。这是我的代码以及json-
import React,{useEffect} from 'react';
// import the core library.
import ReactEchartscore from 'echarts-for-react/lib/core';
import ReactEcharts from "echarts-for-react";
// then import echarts modules those you have used manually.
import echarts from 'echarts/lib/echarts';
import 'echarts/lib/chart/treemap';
import 'echarts/lib/component/tooltip';
import 'echarts/lib/component/title';
var treemapData = [
{
"name": "abcdaaaaaaaaaaaaaaaaa","value": 250,},{
"name": "xyzxyzxyzxyzxyzzz","value": 525,{
"name": "mnopmnopmnop","value": 1120,{
"name": "vsuuuuuuuuuvu","value": 216,{
"name": "1232342343434","value": 400,{
"name": "timetimetime","value": 297,{
"name": "placeplaceplace","value": 208,{
"name": "countrycountry","value": 1203,}
];
function TreemapEcharts() {
return (
<ReactEcharts
option={{
series: [{
type: 'treemap',data: treemapData,label: {
normal: {
textStyle: {
ellipsis: true
},position: 'insideCenter',formatter: function (params) {
var arr = [
'{name|' + params.name + '}','{value|' + params.value + '}'
];
return arr.join('\n');
},rich: {
name: {
fontSize: 14,color: '#fff'
},value: {
fontSize: 14,}
}
},levels: [
{
itemStyle: {
normal: {
borderWidth: 2,borderColor: '#fff',gapWidth: 2
}
}
},],}]
}}
style={{ height: '300px',width: '50%' }}
/>
)
}
export default TreemapEcharts
请让我知道如何在这里添加一种颜色从最暗的阴影到最亮的阴影变化的渐变。
解决方法
如果有人仍然想知道,您应该查看他们关于 level
: https://echarts.apache.org/en/option.html#series-treemap.levels 的文档。
基本上,您需要配置一个颜色范围并将 colorMappingBy
设置为“值”。您的 level
配置应该是这样的:
{
color: ["#942e38","#aaa","#269f3c"],colorMappingBy: "value",itemStyle: { ... }
}
要微调可视化效果,您可以将值转换为数组,数组中的第二个元素是缩放到所需饱和度的值,并通过将 visualDimension
设置为 { 将颜色映射到该值{1}}(数组元素的索引值),并手动设置 1
和 visualMin
值。
你也可以看看他们的例子:https://echarts.apache.org/examples/zh/editor.html?c=treemap-visual。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。