visualMap
组件可以将数据映射到不同的颜色,并将颜色与文字描述关联起来。下面是一个示例代码,演示如何使用 visualMap
生成一段文字描述:
// 假设你已经有一个 ECharts 实例 myChart
// 假设你的数据如下
var data = [
{ value: 10, name: '数据1' },
{ value: 20, name: '数据2' },
{ value: 30, name: '数据3' },
{ value: 40, name: '数据4' },
{ value: 50, name: '数据5' }
];
// 创建 visualMap 组件并配置颜色范围和文字描述
var visualMap = {
type: 'piecewise',
min: 0,
max: 50,
splitNumber: 5,
pieces: [
{ min: 0, max: 10, label: '很低' },
{ min: 11, max: 20, label: '较低' },
{ min: 21, max: 30, label: '中等' },
{ min: 31, max: 40, label: '较高' },
{ min: 41, max: 50, label: '很高' }
],
color: ['#00FF00', '#FFFF00', '#FF0000'], // 颜色范围,可以根据需要自定义
textStyle: {
color: '#333' // 文字颜色
}
};
// 将 visualMap 组件配置应用到 ECharts 实例
myChart.setOption({
visualMap: visualMap,
series: [
{
type: 'bar',
data: data
}
]
});
在上述示例中,我们创建了一个 visualMap
组件,并配置了颜色范围、文字描述和颜色。然后,将 visualMap
组件应用到 ECharts 实例中,并通过 series
配置项传入数据。根据数据的值,visualMap
会自动将颜色和文字描述映射到对应的图表元素上。
你可以根据实际需求调整代码中的数据、颜色范围和文字描述,以及图表类型和其他样式配置
实例代码
function getEcharts(data) {
var chartDom = document.getElementById('echarts');
var myChart = echarts.init(chartDom);
var nameMap = '地图数据';
var mapData = []
echarts.registerMap(nameMap, data);
/*获取地图数据*/
myChart.showLoading();
var mapFeatures = echarts.getMap(nameMap).geoJson.features;
myChart.hideLoading();
mapFeatures.forEach(function (v, index) {
// 地区名称
mapData.push({
name: v.properties.name,
value: Math.random() * 100
});
});
var serverdata = [
{ // 地图块的相关信息
type: 'map',
map: nameMap,
zoom: 1.2,
roam: false,
selectedMode: "single",
showLegendSymbol: false,
visibility: "off",
label: {
show: false,
normal: {
show: true,
textStyle: {
fontSize: 12,
fontWeight: 400,
color: '#fff'
}
}
},
data: mapData
}
]
var optionMap = {
toolbox: {
show: true,
feature: {
saveAsImage: {
show: true,
excludeComponents: ['toolbox'],
pixelRatio: 1
}
}
},
visualMap: {
type: "piecewise",
pieces: [
{max: 30, label: "安全", color: "#2c9a42"},
{min: 30, max: 60, label: "警告", color: "#d08a00"},
{min: 60, label: "危险", color: "#c23c33"},
],
color: "#fff",
textStyle: {
color: "#fff",
},
visibility: "off",
},
geo: {
map: nameMap,
show: false,
roam: true,
label: {
normal: {
show: true
},
emphasis: {
show: false
}
}
},
series: serverdata
};
myChart.setOption(optionMap);
}