当前位置：首页 > news >正文

echarts不根据传入参数，自定义 legend 的内容（视觉映射）

news 2025/10/11 5:54:45

文章目录

注意：以下均来自于echarts官网示例，在示例基础上修改的，如需要看效果，自行复制代码，到示例里运行。

效果图

option = {legend: {},xAxis: {type: 'category',data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']},yAxis: {type: 'value'},series: [{name:"图例",data: [120, 200, 150, 80, 70, 110, 130],type: 'bar'}]
};

比如期望使用多个图例更直观的来控制数据的展示情况，但使用legend: {},的话只能展示一个图例，并不能满足需求
#1 使用视觉映射实现

option = {visualMap:{ // 视觉映射type: 'piecewise', // 'continuous'（连续型）'piecewise'（分段型）。splitNumber: 10, // 数据分割几份left: "center", // 位置top: 0, // 边距orient: "horizontal", // 布局朝向 'horizontal'（横向）'vertical'（纵向）// text:['High', 'Low'], // 两端文本min: 0, // 最小区间值max: 200, // 最大区间值itemHeight:10,itemWidth:10,align:'left', // 图例位置inverse: true, // 控制视觉映射组件的排列方向, 当设置为true时，会使视觉映射组件的排列方向颠倒，即最小值显示在最右边，最大值显示在最左边。pieces: [ // 使用 pieces 属性来精确定义每个分段的取值范围和颜色{ min: 0, max: 19, label: "图例1", color: '#E7BCF3' },{ min: 20, max: 39, label: "图例2", color: '#E690D1' },{ min: 40, max: 69, label: "图例3", color: '#E062AE' },{ min: 60, max: 89, label: "图例4", color: '#FB7293' },{ min: 80, max: 99, label: "图例5", color: '#FF9F7F' },{ min: 100, max: 119, label: "图例6", color: '#FFDB5C' },{ min: 120, max: 149, label: "图例7", color: '#9FE6B8' },{ min: 140, max: 159, label: "图例8", color: '#67E0E3' },{ min: 160, max: 179, label: "图例9", color: '#32C5E9' },{ min: 180, max: 200, label: "图例10", color: '#37A2DA' },] }, dataZoom: {}, // 动态滚动条xAxis: {type: 'category',data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']},yAxis: {type: 'value'},series: [{data: [120, 200, 150, 80, 70, 110, 130],type: 'bar'}]
};