echarts标题(title)配置

2020-05-24 08:10:18

参考地址 echarts标题(title)配置

 var myChart=echarts.init(document.getElementById('main'));

    //init初始化接口,返回ECharts实例,其中dom为图表所在节点

       

    var option = {

        //标题

        title : {

            show:true,//显示策略,默认值true,可选为:true(显示) | false(隐藏)

            text: '主标题',//主标题文本,'\n'指定换行

            link:'',//主标题文本超链接,默认值true

            target: null,//指定窗口打开主标题超链接,支持'self' | 'blank',不指定等同为'blank'(新窗口)

            subtext: '副标题',//副标题文本,'\n'指定换行

            sublink: '',//副标题文本超链接

            subtarget: null,//指定窗口打开副标题超链接,支持'self' | 'blank',不指定等同为'blank'(新窗口)

            x:'center'//水平安放位置,默认为'left',可选为:'center' | 'left' | 'right' | {number}(x坐标,单位px)

            y: 'top',//垂直安放位置,默认为top,可选为:'top' | 'bottom' | 'center' | {number}(y坐标,单位px)

            textAlign: null,//水平对齐方式,默认根据x设置自动调整,可选为: left' | 'right' | 'center

            backgroundColor: 'rgba(0,0,0,0)',//标题背景颜色,默认'rgba(0,0,0,0)'透明

            borderColor: '#ccc',//标题边框颜色,默认'#ccc'

            borderWidth: 0,//标题边框线宽,单位px,默认为0(无边框)

            padding: 5,//标题内边距,单位px,默认各方向内边距为5,接受数组分别设定上右下左边距

            itemGap: 10,//主副标题纵向间隔,单位px,默认为10

            textStyle: {//主标题文本样式{"fontSize": 18,"fontWeight": "bolder","color": "#333"}

                fontFamily: 'Arial, Verdana, sans...',

                fontSize: 12,

                fontStyle: 'normal',

                fontWeight: 'normal',

            },

            subtextStyle: {//副标题文本样式{"color": "#aaa"}

                fontFamily: 'Arial, Verdana, sans...',

                fontSize: 12,

                fontStyle: 'normal',

                fontWeight: 'normal',

            },

            zlevel: 0,//一级层叠控制。默认0,每一个不同的zlevel将产生一个独立的canvas,相同zlevel的组件或图标将在同一个canvas上渲染。zlevel越高越靠顶层,canvas对象增多会消耗更多的内存和性能,并不建议设置过多的zlevel,大部分情况可以通过二级层叠控制z实现层叠控制。

            z: 6,//二级层叠控制,默认6,同一个canvas(相同zlevel)上z越高约靠顶层。

        },





        //提示框,鼠标悬浮交互时的信息提示

        tooltip : {

            trigger: 'item',

            formatter: "{a} <br/>{b} : {c} ({d}%)"

        },

        //图例,每个图表最多仅有一个图例

        legend: {

            orient: 'vertical',

            left: 'left',

            data: ['第一部分','第二部分','第三部分','第四部分']

        },

        // 系列列表,每个系列通过 type 决定自己的图表类型

        series : [

            {

                name: '访问',

                type: 'pie',

                radius : '62%',

                center: ['50%', '65%'],/

                minAngle:'15',

                data:[

                    {name:"第一部分",value:4},

                    {name:"第二部分",value:7},

                    {name:"第三部分",value:3},

                    {name:"第四部分",value:1},

                ],

                itemStyle: {

                    normal:{

                        label:{

                            show:true,

                            formatter: "{b} :\n  {c} \n ({d}%)",

                            position:"inner"

                        }

                    }

                }

            }

        ],

    };

    myChart.setOption(option);// 为echarts对象加载数据

    var myChart=echarts.init(document.getElementById('main'));

    //init初始化接口,返回ECharts实例,其中dom为图表所在节点


  • 2020-11-17 10:13:16

    Vue.observable()进行状态管理

    随着组件的细化,就会遇到多组件状态共享的情况, Vuex当然可以解决这类问题,不过就像 Vuex官方文档所说的,如果应用不够大,为避免代码繁琐冗余,最好不要使用它,今天我们介绍的是 vue.js 2.6 新增加的 Observable API ,通过使用这个 api 我们可以应对一些简单的跨组件数据状态共享的情况。

  • 2020-11-17 10:17:18

    MongoDB日志文件查看

    默认情况下,MongoDB在此路径/var/log/mongodb/mongodb.log创建日志文件,如果找不到该日志文件,请检查MongoDB配置文件。

  • 2020-11-17 11:57:16

    app抓包无数据

    我们经常在wifi设置中 设置代理到我们的pc http代理软件上,多数情况下,此时我们开启的app流量都可以在代理软件上看到,比如charles , fiddler等等。 但是细心的人会发现 某些大厂的app 某些请求 在这些 http代理软件上就是抓不到, 给人的感觉就是 流量没从代理软件走一样。

  • 2020-11-17 11:57:55

    app抓不到包,解决很简单

    1.手机安装virtualXpost 并激活xpost 框架,如有问题自行百度。 2.安装justTrustMe,然后再virtualXpost中添加此模块 3.安装手机抓包神器packet capture 4.在virtualXpost中运行app,并打开packet capture抓包就行

  • 2020-11-17 16:50:16

    JS常见加密混淆方式

    目录 前端js常见混淆加密保护方式 eval方法等字符串参数 emscripten WebAssembly js混淆实现 JSFuck AAEncode JJEncode 代码压缩 变量名混淆 字符串混淆 自我保护,比如卡死浏览器 控制流平坦化 僵尸代码注入 对象键名替换 禁用控制台输出 调试保护,比如无限Debug,定时Debug 域名锁定

  • 2020-11-17 17:08:28

    用js编写WebAssembly ,WebAssembly 现状与实战

    自从 JavaScript 诞生起到现在已经变成最流行的编程语言,这背后正是 Web 的发展所推动的。Web 应用变得更多更复杂,但这也渐渐暴露出了 JavaScript 的问题:

  • 2020-11-17 17:28:06

    AssemblyScript 开发WebAssembly 教程

    WebAssembly 以及通过 AssemblyScript 的扩展,不会使每个网站都神奇地变得更快,但是这并不重要。 WebAssembly 之所以令人兴奋,是因为它可以使更多的应用在 Web 变得中可行。

  • 2020-11-17 21:15:48

    如何保障 API 接口的安全性?前端如何加密

    一、1. HTTP 请求中的来源识别 二、2. 数据加密 三、3. 数据签名 四、4. 时间戳 五、5. AppID 六、6. 参数整体加密 七、7. 限流 八、8. 黑名单 九、1. 压缩 十、2. 混淆 undefined、3. 加密