你的位置:首页 > 软件开发 > Java > echarts仪表盘如何设置图例(legend)

echarts仪表盘如何设置图例(legend)

发布时间:2017-06-14 00:00:56
echarts 图表中经常需要对不同的颜色设置图例标识不同的意义,而仪表盘的指针只存在一个值,如何表示不同颜色的意义,官网配置项并未给出该功能;不同段的颜色是通过axisLine->lineStyle->color来设置的;搜索了很多的资料都没有找到用来标识各颜色段的 ...

echarts仪表盘如何设置图例(legend)

echarts 图表中经常需要对不同的颜色设置图例标识不同的意义,而仪表盘的指针只存在一个值,如何表示不同颜色的意义,官网配置项并未给出该功能;

不同段的颜色是通过axisLine->lineStyle->color来设置的;

搜索了很多的资料都没有找到用来标识各颜色段的图例;

反复琢磨,可不可以使用有图例的图来强制加上这个图例呢?

这里熟悉echarts的童鞋可能想到解决方法了;

那我们就来使用一招“移花接木”**;

echarts仪表盘如何设置图例(legend)

主要思想:使用柱状图的legend图例,然后设置柱状图和仪表图的层级,然后再隐藏柱状图,禁用legend的点击事件;

注意点:

  1.series中既有type为‘gauge’的配置项,也有type为‘bar’的配置项,而'bar'类型的配置项只要关注其legend的颜色即可;

  2.对于柱状图要隐藏的项较多,必须全部设置成不显示,其中包括轴线和分割线等;

  3.防止奇怪的体验最好将legend的点击事件禁用掉;

 var option = {         legend: {   //配置legend,这里的data,要对应type为‘bar’的series数据项的‘name’名称,作为图例的说明           data:['预热期','导入期','成长期','成熟期','衰退期'],           selectedMode:false, //图例禁止点击           top:20,           itemWidth:23,           itemHeight:6,           textStyle: {             color: '#707070',             fontStyle: 'normal',             fontWeight: 'normal',             fontFamily: 'sans-serif',             fontSize: 11,           },         },         grid: {           z:1,  //grid作为柱状图的坐标系,其层级要和仪表图层级不同,同时隐藏           show:false,           left: '-30%',           right: '4%',           bottom: '3%',           containLabel: true,           splitLine:{             show: false  //隐藏分割线           },         },         xAxis : [  //这里有很多的show,必须都设置成不显示           {             type : 'category',             data : [],             axisLine: {               show: false             },             splitLine:{               show: false             },             splitArea: {               interval: 'auto',               show: false             }           }         ],         yAxis : [ //这里有很多的show,必须都设置成不显示           {             type : 'value',             axisLine: {               show: false             },             splitLine:{               show: false             },           }         ],         toolbox: {            show: false,         },        series : [              {            name:'刻度盘',            type: 'gauge',            startAngle: 180,            endAngle: 0,            "center": ["50%", "80%"], //整体的位置设置            z: 3,            min: min,            max: max+min,            splitNumber: max,            radius: '110%',            axisLine: {      // 坐标轴线              lineStyle: {    // 属性lineStyle控制线条样式                width: 10,                color:optionUsedColors              }            },            axisTick: {      // 坐标轴小标记              length: 19,    // 属性length控制线长              splitNumber: 2,              lineStyle: {    // 属性lineStyle控制线条样式                color: '#cdcdcd'              }            },            splitLine: {      // 分隔线               length: 20,     // 属性length控制线长               lineStyle: {    // 属性lineStyle(详见lineStyle)控制线条样式                 color: 'auto'               }            },            axisLabel: {              textStyle: {                color:'#454A57'              }            },            pointer: {              show: true,              length: '70%',              width: 5,            },            itemStyle:{              normal:{                color:'#454A57',                borderWidth:0              }            },            title: {  //仪表盘标题              show: true,              offsetCenter: ['0', '20'],              textStyle: {                color: '#444A56',                fontSize: 12,                fontFamily: 'Microsoft YaHei'              }            },            detail: {              textStyle: {                fontSize: 12,                color: '#707070'              },              offsetCenter: offsetConfig,              formatter: function(){                return '上市时间\n'+time;              }            },            data:[{value: (status/100*max || 0), name: '当前阶段'}]          },             {            name: '灰色内圈',            type: 'gauge',            z:2,            radius: '110%',            startAngle: 180,            endAngle: 0,            "center": ["50%", "80%"], //整体的位置设置            splitNumber: 4,            axisLine: { // 坐标轴线              lineStyle: { // 属性lineStyle控制线条样式                color: [                  [1, '#F2F4F8']                ],                width: 24,                opacity: 1,              }            },            splitLine: { //分隔线样式              show: false,            },            axisLabel: { //刻度标签              show: false,            },            axisTick: { //刻度样式              show: false,            },            detail : {              show:false,              textStyle: {    // 其余属性默认使用全局文本样式,详见TEXTSTYLE                fontWeight: 'bolder',                fontSize:12              }            },          },             {               name:'预热期',               type:'bar',               barWidth: '60%', //不显示,可以随便设置               data:[0],               itemStyle: {                 normal: {                   color: '#41C468', //这里的图例要注意,颜色设置和仪表盘的颜色对应起来                 }               }             },             {               name:'导入期',               type:'bar',               barWidth: '60%',               data:[0],               itemStyle: {                 normal: {                   color: '#70C1B3',                 }               }             },             {              name:'成长期',              type:'bar',              barWidth: '60%',              data:[0],              itemStyle: {                normal: {                  color: '#00A1E9',                }              }            },             {               name:'成熟期',               type:'bar',               barWidth: '60%',               data:[0],               itemStyle: {                 normal: {                   color: '#EE4444',                 }               }             },             {               name:'衰退期',               type:'bar',               barWidth: '60%',               data:[0],               itemStyle: {                 normal: {                   color: '#DCF2C4',                 }               }             }        ]      }  

原标题:echarts仪表盘如何设置图例(legend)

关键词:

*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。

可能感兴趣文章

我的浏览记录