echarts拓展

最新推荐文章于 2024-04-25 16:41:54 发布

chengshang2264

最新推荐文章于 2024-04-25 16:41:54 发布

阅读量534

点赞数

文章标签： javascript ViewUI

原文链接：https://my.oschina.net/u/2400119/blog/778930

版权

1：tooltip扩展

tooltip: {
trigger: 'item',
textStyle:{
       color:'#33bced'
       },
       padding:0,
       margin:0,
       backgroundColor:'none',
       border:'none',
formatter: function (params,ticket,callback){
var name = params.name;
var value = params.value;
var res ='<div style="margin:0;background:url(images/tooltip.png)no-repeat;background-size: 100% 100% ;text-align:center;padding:0;width:150%;padding-top:20%;box-shadow: 2px 2px 10px #32bbec;z-index:4">'
   +'<p style="background:#32bbec;color:#FFF;padding:0;margin:0;width:70%;margin-left:auto;margin-right:auto;font-size:1px;font-family:"造字工房悦圆常规体", Arial, Helvetica, sans-serif;">'+name+'</p><p style="margin:0;color:#32bced;padding:0;">人数</p><p style="margin:0;padding:0;color:#11d320;font-family:digital-7__mono, Arial, Helvetica, sans-serif; ">'+value[2].toFixed(0)+'</p></div>';
//设置自定义数据的模板，这里的模板是图片
console.log(res);
/* setTimeout(function (){
// 仅为了模拟异步回调
callback(ticket, res);//回调函数，这里可以做异步请求加载的一些代码
}, 1000)
return 'loading';*/
return res;
},alwaysShowContent:false
},

itemStyle:{
           normal:{
               color:new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
               offset: 0, color: '#32bbec' // 0% 处的颜色
               }, {
               offset: 1, color: '#0054a8' // 100% 处的颜色
               }], false)
           }
       },

2：添加自定义数据可以塞进series-data里面

3： label扩展

{
           name: '',
           type: 'bar',
           stack: 1,
           barMinHeight:1,
           zlevel:10086,
           label:{
               normal:{
                   show:true,
                   position:['100%', '10%'],
                   formatter : function(params){
                       //alert(a,b,c);
                       //return datalist[b];
                       return datalist[1][params.name];
                   },
                   textStyle: {
                       color:'#FFF',
           fontSize: '12',
           fontWeight: 'normal',
           fontFamily:'造字工房悦圆常规体'
           }
               },
           },