echarts横向柱状图如果想打开网址

代码:

var data = eval(data);
var xList = new Array();
var yList = new Array();
var urlList = new Array();
for (var j = data.length - 1; j > -1; j--) {
    var url = data[j].url;
    xList.push(url.substr(0, 1) + "**" + url.substr(3, url.length));
    urlList.push(url);
    yList.push(data[j].cnt);
}
var dom = document.getElementById("id");
var myChart = echarts.init(dom);
option = {
    color: [‘#51ffff‘],
    title: {
        x: ‘center‘,
        textStyle: {
            color: ‘green‘
        }
    },
    tooltip: {
        trigger: ‘axis‘,
        axisPointer: { // 坐标轴指示器,坐标轴触发有效
            type: ‘shadow‘ // 默认为直线,可选为:‘line‘ | ‘shadow‘
        }
    },
    grid: {
        top: ‘1%‘,
        left: ‘3%‘,
        right: ‘12%‘,
        bottom: ‘9%‘,
        containLabel: true
    },
    yAxis: [{
        type: ‘category‘,
        data: xList,
        axisLine: {
            lineStyle: {
                color: ‘#fff‘,
                width: 1, //这里是为了突出显示加上的
            }
        }
    }],
    xAxis: [{
        type: ‘value‘,
        splitLine: {
            show: true,
            lineStyle: {
                color: ["#fff"],
                type: ‘shadow‘
            }
        },
        axisLine: {
            lineStyle: {
                color: ‘#fff‘,
                width: 1, //这里是为了突出显示加上的
            }
        },
        axisLabel: {
            interval: 1, //横轴信息全部显示
            rotate: -30, //-15度角倾斜显示
        },
    }],
    series: [{
        name: ‘访问量‘,
        type: ‘bar‘,
        data: yList
    }]
};
myChart.setOption(option, true);

myChart.on("click", eConsole);
function eConsole(capacity) {
    var name = ‘‘;
    for (var j = data.length - 1; j > -1; j--) {
        if (data[j].cnt == capacity.value) {
            name = data[j].url;
            break;
        }
    }
    var re = /^(\d+)\.(\d+)\.(\d+)\.(\d+)$/; //是否为IP
    if (re.test(name)) {
        window.open("http://" + name);
    } else {
        window.open("http://www." + name);
    }
}

原文地址:https://www.cnblogs.com/raitorei/p/9934741.html

时间: 2024-10-08 12:31:39

echarts横向柱状图如果想打开网址的相关文章

echarts横向柱状图Demo

echarts链接:http://gallery.echartsjs.com/editor.html?c=xByfdMz7mM 代码: option = { backgroundColor: 'black', tooltip: { trigger: 'axis', backgroundColor: 'rgba(255,255,255,0.8)', extraCssText: 'box-shadow: 0 0 8px rgba(0, 0, 0, 0.3);', textStyle: { color

iOS中打电话、打开网址、发邮件、发短信等

常用小功能 小功能简介 iOS中的很多小功能都是非常简单的,几行代码就搞定了,比如打电话.打开网址.发邮件.发短信等 打电话-方法1 最简单最直接的方式:直接跳到拨号界面 NSURL *url = [NSURL URLWithString:@"tel://10010"]; [[UIApplication sharedApplication] openURL:url]; 缺点 电话打完后,不会自动回到原应用,直接停留在通话记录界面 打电话-方法2 拨号之前会弹框询问用户是否拨号,拨完后能

ECharts系列 - 柱状图(条形图)实例一

ECharts主页:  http://echarts.baidu.com/index.html ECharts-2.1.8下载地址:  http://echarts.baidu.com/build/echarts-2.1.8.zip ECharts官方实例:  http://echarts.baidu.com/doc/example.html ECharts官方API文档:  http://echarts.baidu.com/doc/doc.html ECharts系列 - 柱状图(条形图)实例

echarts_部分图表配置简介_横向柱状图

横向柱状图主要配置x位置x轴类型y轴类型(轴的类型分两种 1.category(类别)2.value(值)),代码简单(里面有注释)效果如下: 1 var myChart = echarts.init(document.getElementById('thisId')); 2 /*指定图表的配置项和数据*/ 3 option = { 4 textStyle:{ 5 color:'#fff', 6 fontSize:'16' 7 }, 8 title: { 9 textStyle:{ 10 col

猫猫学iOS(四十五)之常用的小功能比如打电话、打开网址、发邮件、发短信打开其他应用。

猫猫分享,必须精品 原创文章,欢迎转载.转载请注明:翟乃玉的博客 地址:http://blog.csdn.net/u013357243?viewmode=contents 简介 iOS中的很多小功能都是非常简单的,几行代码就搞定了,比如打电话.打开网址.发邮件.发短信.打开其他应用等. 打电话 方法1 最简单最直接的方式:直接跳到拨号界面 NSURL *url = [NSURL URLWithString:@"tel://10010"]; [[UIApplication sharedA

微信打开网址添加在浏览器中打开提示 http://caibaojian.com/weixin-tip.html

原文链接:http://caibaojian.com/weixin-tip.html#t2 使用微信打开网址时,无法在微信内打开常用下载软件,手机APP等.网上流传的各种微信打开下载链接,微信已更新基本失效,最新的一个是使用链接跳转方式: http://mp.weixin.qq.com/mp/redirect?url=http://caibaojian.com/test.apk#weixin.qq.com#wechat_redirect. 将链接文本中的http://caibaojian.com

iOS打电话,发短信,发邮件,打开网址

//调用自带mail [[UIApplication sharedApplication] openURL:[NSURL URLWithString:@"mailto://[email protected]"]]; //调用电话 [[UIApplication sharedApplication] openURL:[NSURL URLWithString:@"tel://8008808888"]]; //调用sms [[UIApplication sharedApp

Echarts调整图表上下左右的间距,Echarts调整柱状图左右的间距

Echarts调整图表上下左右的间距,Echarts调整柱状图左右的间距 >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> ?Copyright 蕃薯耀 2017年5月5日 http://www.cnblogs.com/fanshuyao/ 做了个柱状图的报表,如下: 但是图和下面的表格没有对齐,需要

从浏览器打开网址到请求到网页内容超细原理过程详解(免费)

从浏览器打开网址到请求到网页内容超细原理过程详解 史上最牛逼相关知识学员讲解! 看完了不服来战! http://edu.51cto.com/course/course_id-6075.html 长江后浪来了...100米高大浪! 最牛逼老男孩教育28期学员开班2个月左右的分享讲解,不看不知道,一看吓尿你! 运维Q群385168604 架构师Q群390642196 PythonQ群29215534大数据Q群421358633