ECharts5.x--堆叠柱状图并自定义数据和图例的颜色

废话不多说,先直接上一张图,如下:
01.png

现在我们要做堆叠的柱状图,并且可以自己设置柱状图和图例的颜色

1.设置单个数据的颜色

ECharts在设置数据的时候是可以设置单个数据的颜色的,在itemStyle属性中可以设置颜色,示例如下:

{
   "value":12,
   "itemStyle":{
      "color":"#dfddff"
   }
}

2.产生堆叠的效果

如果要产生堆叠的效果,需要将多个series的stack属性设置成一样的,如下:

series: [
    {
        name: '邮件营销',
        type: 'bar',
        stack: '广告',
        data: [
            {value:100,itemStyle:{color:'#22ddff'},name:'报纸广告'},
            132,
            101,
            134,
            90,
            230,
            210]
    },
    {
        name: '联盟广告',
        type: 'bar',
        stack: '广告',
        data: [220, 182, 191, 234, 290, 330, 310]
    }
]

这样邮件营销和联盟广告就会堆叠在一个柱状图上,type:"bar"表示使用柱状图,堆叠是按数据series数据中的顺序来的。

3.设置图例颜色

在legend的对象的data属性的itemStyle的color属性可以设置图例的颜色,如下:

legend: {
    data: [ '邮件营销', '联盟广告', '视频广告',
      {name:'报纸广告',itemStyle:{color:'#22ddff'}}]
}

如上图,设置了多个图例,但是报纸广告是自定义的颜色(#22ddff),其他使用的是默认的颜色。还有就算这里设置了多个图例,但是也不一定能全部展示出来,这里的图例的名称需要和series属性的name属性对应,图例才会展示出来。

所以如果需要让自己设置的图例全部展示出来,就需要将图例的名称全部加到series数组中,但是又不是所有的series元素在每个X轴上的点都有值,这是可以将没有值得数据设置为0,就不会显示出来。

4.修改鼠标放到柱状图上的提示信息

通过tooltip的formatter可以修改鼠标的悬浮提示,formatter可以是字符串或者函数,如下:

 tooltip: {
     formatter:function(param){
       return param.name + ':' + param.data.value;
     }
  }

效果如下:
Image.png
其中,param则是series中每个元素的对象

5.设置右上角的工具

在toolbox的feature属性中,如下图(增加下载工具)

   toolbox:{
      feature:{
          saveAsImage:{
              type:'png',//设置图片格式
              name:"test",//设置下载图片的名称
          }
      }
   }

ECharts内置了很多工具,具体可以参照官方文档,还可以自定义工具,自定义的必须以my开头,如下:

    toolbox:{
      feature:{
        saveAsImage:{},
        myHelp:{
            show:true,//是否展示工具图标
            title:'鼠标悬浮的提示',
            icon:'path://M432.45,595.444c0,2.177-4.661,6.82-11.305,6.82c-6.475,0-11.306-4.567-11.306-6.82s4.852-6.812,11.306-6.812C427.841,588.632,432.452,593.191,432.45,595.444L432.45,595.444z M421.155,589.876c-3.009,0-5.448,2.495-5.448,5.572s2.439,5.572,5.448,5.572c3.01,0,5.449-2.495,5.449-5.572C426.604,592.371,424.165,589.876,421.155,589.876L421.155,589.876z M421.146,591.891c-1.916,0-3.47,1.589-3.47,3.549c0,1.959,1.554,3.548,3.47,3.548s3.469-1.589,3.469-3.548C424.614,593.479,423.062,591.891,421.146,591.891L421.146,591.891zM421.146,591.891',//图标的图片,可以是svg或者image://base64或者image://http://echarts.baidu.com/images/favicon.png
            click:function(){
                //点击图标触发的事件
            }
        }
      }
   }

全部的option参数如下:

option = {
  tooltip: {
     formatter:function(param){
         return param.name + ':' + param.data.value;
     }
  },
legend: {
    data: [ '邮件营销', '联盟广告', '视频广告',
    {name:'报纸广告',itemStyle:{color:'#22ddff'}}]
},
grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
},
toolbox:{
    feature:{
        saveAsImage:{}
    }
},
xAxis: [
    {
        type: 'category',
        data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
    }
],
yAxis: [{ type: 'value'}],
series: [
    {
        name: '邮件营销',
        type: 'bar',
        stack: '广告',
        emphasis: {
        },
        data: [
            {value:100,itemStyle:{color:'#22ddff'},name:'报纸广告'},
            132,
            101,
            134,
            90,
            230,
            210]
    },
    {
        name: '联盟广告',
        type: 'bar',
        stack: '广告',
        emphasis: {
        },
        data: [220, 182, 191, 234, 290, 330, 310]
    },
    {
        name: '视频广告',
        type: 'bar',
        stack: '广告',
        emphasis: {
        },
        data: [150, 232, 201, 154, 190, 330, 410]
    },{
        name: '报纸广告',
        type: 'bar',
        stack: '广告',
        emphasis: {
        },
        data: []
    }
 ]
};
原创文章,作者:纸飞机-JAVA追梦,如若转载,请注明出处:https://www.zfjsec.com/696.html
-- 展开阅读全文 --
老洞新谈:Exchange渗透利用
« 上一篇 05-28

发表评论