自定义tooltip，条形图样式

自定义tooltip

这是用在一个折线图与条形图联动的图表里，因为要在滑动上去时显示出这一区域内的所有信息，但是有两种数据，单位不一样，而这个项目之前所使用的echarts版本是5.1.2，在新版本5.3以上可以在每个series对象里面的tooltip加上不一样单位可以显示出来，但是目前使用的这个版本并不支持这个语法，所以找了一下其他方法，发现在fomatter写函数，返回的语句里面加html标签和css样式等都可以识别且在页面上展示。刚好可以达到目前使用不同单位的需求。

 tooltip: {
            backgroundColor: "rgba(0, 0, 0, .8)",
            borderColor: "rgba(0, 0, 0, 0)",
            textStyle: {
              color: "#fff"
            },
            trigger: 'axis',
            formatter: function(value) {
              let str = value[0].axisValue +'<br/>'
              value.forEach((item,index) =>{
                if(index == 0){
                  str += '<span style="width:10px;height:10px;border-radius:50%;display:inline-block;background-color:#77D9FF"></span>'+
                    '  ' + item.seriesName + ':' + parseInt(item.value*10000) + '人' +'<br/>'
                }else{
                  str += '<span style="width:10px;height:10px;border-radius:50%;display:inline-block;background-color:'+item.color+'"></span>'+ '  ' + item.seriesName + ':' + item.value + '%' + '<br/>'
                }
              })
              return str
            }
          },

效果图如下

 条状图背景渐变

效果图

 

itemStyle: {
                normal: {
                  borderColor:'#77D9FF',
                  backgroundColor:'rgba(119, 217, 255, 0.15)',
                  color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                    {
                      offset: 1,
                      color: 'rgba(119, 217, 255, 0.3)',
                    },
                    {
                      offset: 0.7,
                      color: 'rgba(119, 217, 255, 0.1)',
                    },
                    {
                      offset: 0.6,
                      color: 'rgba(119, 217, 255, 0.1)',
                    },
                    {
                      offset: 0.4,
                      color: 'rgba(119, 217, 255, 0.1)',
                    },
                    {
                      offset: 0.3,
                      color: 'rgba(119, 217, 255, 0.1)',
                    },
                    {
                      offset: 0.1,
                      color: 'rgba(119, 217, 255, 0.3)',
                    },
                  ]),
                },
              },