zoukankan      html  css  js  c++  java
  • echarts提示框,样式重写

    option = {
        title: {
            text: 'iphone销量',
            subtext: '纯属虚构'
            },
            tooltip: {
                trigger: 'axis',
                formatter: function (params, ticket, callback) {
                    var htmlStr = '';
                    for(var i=0;i<params.length;i++){
                        var param = params[i];
                        var xName = param.name;//x轴的名称
                        var seriesName = param.seriesName;//图例名称
                        var value = param.value;//y轴值
                        var color = param.color;//图例颜色
                        if(i===0){
                            htmlStr += xName + '<br/>';//x轴的名称
                            }
                        htmlStr +='<div>';
                        //为了保证和原来的效果一样,这里自己实现了一个点的效果
                        htmlStr += '<span style="margin-right:5px;display:inline-block;10px;height:10px;border-radius:5px;background-color:'+color+';"></span>';
                        //圆点后面显示的文本
                        htmlStr += seriesName + ':' + value + ' '+value+'%';
                        htmlStr += '</div>';
                        }
                        return htmlStr;
                        }
            },
            grid : {
                    left: '10%',//默认10%
                    top:100,//越大越靠下,默认60
                    right : '5%',//默认10% 
                    bottom : 500//默认60
            },
            legend: {
                    data:['iphone6','iphone7','iphone8']
            },
            xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data: ['周一','周二','周三','周四','周五','周六','周日']
            },
            yAxis: {
                    type: 'value'
            },
            series: [{
                    name: 'iphone6',
                    type: 'line',
                    smooth: true,
                    data: [10, 12, 21, 54, 260, 830, 710]
            },
            {
                name: 'iphone7',
                type: 'line',
                smooth: true,
                data: [30, 182, 434, 791, 390, 30, 10]
            },
            {
                name: 'iphone8',
                type: 'line',
                smooth: true,
                data: [1320, 1132, 601, 234, 120, 90, 20]
            }
        ]
        
    };
  • 相关阅读:
    VMWare:vSphere6 企业版参考序列号
    nginx1.14的安装
    nginx 编译安装时的编译参数说明(不建议看)
    yum 私有仓库
    linux 修改时区
    FreeFileSync 文件同步软件(windows)
    ansible 碎记录
    vsftp配置
    centos中,tomcat项目创建文件的权限
    EXI6.0的安装(找不到网卡、找不到磁盘)
  • 原文地址:https://www.cnblogs.com/PHP0222wangdong/p/12740353.html
Copyright © 2011-2022 走看看