文档章节

echarts拓展

墨鱼拉面
 墨鱼拉面
发布于 2016/11/01 08:39
字数 281
阅读 12
收藏 0

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:'造字工房悦圆常规体'
                                }
                            },
                        },

 

© 著作权归作者所有

上一篇: css 应用
下一篇: 常用echart 套路
墨鱼拉面
粉丝 0
博文 17
码字总数 1757
作品 0
深圳
程序员
私信 提问
"echarts/util/mapData/params" is not exists!

@Kener-林峰 你好,想跟你请教个问题: Error: [MODULE_MISS]"echarts/util/mapData/params" is not exists! 请问为什么拓展地图的时候报这个错误!在这前面已经进行了 var fileLocation = '......

黄平
2014/03/31
6.1K
1
详解在vue中使用echarts图表实例代码

安装vue依赖 使用npm 使用yarn 使用国内的淘宝镜像: 引入ECharts 安装好的ECharts会放在node_modules目录下。 全部引入 1.直接在项目代码引入 可以直接在项目代码中 得到 ECharts。声明一个...

peakedness丶
2018/12/24
334
0
ECharts-X 0.1 发布,下一代的 ECharts

ECharts-X是 ECharts 团队推出的全新 3D 可视化库,它是基于 ECharts 的扩展,底层深度整合了 WebGL 库QTEK和 Canvas2D 库ZRender。 目前发布的 ECharts-X 0.1 包含 map3d,并且在 map3d 中提...

pissang
2015/02/05
6.6K
54
前端知识 | 浅谈在React中使用echarts

方法一: echarts-for-react 是一个非常简单的针对于 React 的 Echarts 封装插件。 和使用所有其他插件一样,首先,我们需要 install 它: 第一步: npminstall --save echarts(依赖) npmi...

海说软件
2018/06/26
0
0
react native中使用echarts

开发平台:mac pro node版本:v8.11.2 npm版本:6.4.1 react-native版本:0.57.8 native-echarts版本:^0.5.0 目标平台:android端收银机,android7.0+ 最近在使用react native进行app的开发...

索宁风尚
03/14
0
0

没有更多内容

加载失败,请刷新页面

加载更多

75、GridFS

GridFS是MongoDB提供的用于持久化存储文件的模块,CMS使用Mongo DB存储数据,使用FGridFS可以快速集成开发。 工作原理: 在GridFS存储文件是将文件分块存储,文件会按照256KB的大小分割成多个...

lianbang_W
19分钟前
2
0
js bind 绑定this指向

本文转载于:专业的前端网站➱js bind 绑定this指向 1、示例代码 <!DOCTYPE html><html lang="zh"> <head> <meta charset="UTF-8" /> <title>bind函数绑定this指向......

前端老手
21分钟前
2
0
CentOS Linux 7上将ISO映像文件写成可启动U盘

如今,电脑基本上都支持U盘启动,所以,可以将ISO文件写到U盘上,用来启动并安装操作系统。 我想将一个CentOS Linux 7的ISO映像文件写到U盘上,在CentOS Linux 7操作系统上,执行如下命令: ...

大别阿郎
28分钟前
3
0
深入vue-公司分享ppt

组件注册 全局注册 注册组件,传入一个扩展过的构造器 Vue.component('my-component', Vue.extend({/*...*/})) 注册组件,传入一个选项对象(自动调用Vue.extend) Vue.component('my-comp...

莫西摩西
29分钟前
2
0
gitlab重置管理员密码

登录gitlab服务器 [root@localhost bin]# sudo gitlab-rails console productionLoading production environment (Rails 5.2.3)irb(main):001:0> u = User.where(email: 'admin@example.co......

King华仔o0
39分钟前
3
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部