代码:

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);
}
}

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

  1. echarts横向柱状图Demo

    echarts链接:http://gallery.echartsjs.com/editor.html?c=xByfdMz7mM 代码: option = { backgroundColor: 'bla ...

  2. echarts —— 绘制横向柱状图(圆角、无坐标轴)

    UI给了设计图,看了一眼觉得简单,不就是无序列表布局嘛(ul,li),后来才知道那是echarts图,好吧,样式如下: 代码如下:(渐变色没做) <!DOCTYPE html> <h ...

  3. echarts实现饼图及横向柱状图的绘制

    项目中需要绘制饼图,因此简单学习了下echarts的基本使用.head中引入js文件: <script src="/static/frame/echarts/echarts.min.j ...

  4. iOS 打电话、发短信、邮件、打开网址、调用应用等合集

    iOS中的很多功能都是非常简单的,几行代码就搞定了,比如打电话.打开网址.发邮件.发短信等,这里总结几个比较常用的: 1.打电话 方式一:最简单最直接的方式:直接跳到拨号界面 NSURL *url = ...

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

    横向柱状图主要配置x位置x轴类型y轴类型(轴的类型分两种 1.category(类别)2.value(值)),代码简单(里面有注释)效果如下: var myChart = echarts.init(d ...

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

    常用小功能 小功能简介 iOS中的很多小功能都是非常简单的,几行代码就搞定了,比如打电话.打开网址.发邮件.发短信等 打电话-方法1 最简单最直接的方式:直接跳到拨号界面 NSURL *url = [ ...

  7. AJ学IOS(45)之常用的小功能比如打电话、打开网址、发邮件、发短信打开其他应用。

    AJ分享,必须精品 简介 iOS中的很多小功能都是非常简单的,几行代码就搞定了,比如打电话.打开网址.发邮件.发短信.打开其他应用等. 打电话 方法1 最简单最直接的方式:直接跳到拨号界面 NSURL ...

  8. 2015.1.25 Delphi打开网址链接的几种方法

    Delphi打开网址链接的几种方法1.使用shellapi打开系统中默认的浏览器              首先需在头部引用 shellapi单元即在uses中添加shellapi,这里我们需要知道有 ...

  9. IOS 开发,调用打电话,发短信,打开网址

    IOS 开发,调用打电话,发短信,打开网址   1.调用 自带mail [[UIApplication sharedApplication] openURL:[NSURL URLWithString: ...

随机推荐

  1. 使用linux的shell脚本实现在当前行重复动态显示时间等字符串信息(不另起新行)

    ###本脚本在Suse11sp2当中验证正确 #!/bin/sh )) do echo -ne "\r$(date)" sleep 0.3 done ###关键在 echo 的 & ...

  2. WDA-6-EP系统管理/内容管理/用户管理

    主要是将EP端系统管理.内容管理.用户管理相关内容进行下梳理. 1.系统管理 1.1系统前景 1.2对象锁定 解锁相关对象 2.内容管理 2.1基本介绍 门户桌面-组件: 四大内容: iViews:可 ...

  3. Nexus3忘记admin密码时的解决办法

    其实具体步骤官网上也已经说的挺清楚了-- https://support.sonatype.com/hc/en-us/articles/213467158-How-to-reset-a-forgott ...

  4. Haskell语言学习笔记(79)lambda演算

    lambda演算 根据维基百科,lambda演算(英语:lambda calculus,λ-calculus)是一套从数学逻辑中发展,以变量绑定和替换的规则,来研究函数如何抽象化定义.函数如何被应用以 ...

  5. Redis进阶实践之二如何在Linux系统上安装安装Redis(转载)(2)

    Redis进阶实践之二如何在Linux系统上安装安装Redis 一.引言 上一篇文章写了“如何安装VMware Pro虚拟机”和在虚拟机上安装Linux操作系统.那是第一步,有了Linux操作系统,我 ...

  6. ASP.NET HTTP 协议

    http是无状态的,不会记得“上个请求***”,所以哪怕是同一个页面中的js.css.jpg也都要重复的提交Accept-Language.Accept-Encoding.Cookie等. 一般情况下 ...

  7. LINUX系统一一CentOS6.5之tomcat安装

    一 准备工作建立好文件夹 tomcat文件夹地址  二 下载并解压 当然是下载了 1.centos6.5系统里面下载 解压 2.本机下载 然后利用Xftp复制到目标文件加载解压(我用的是这种,随意啦) ...

  8. arcgis python arcpy add data script添加数据脚本

    arcgis python arcpy add data script添加数据脚本mxd = arcpy.mapping.MapDocument("CURRENT")... df ...

  9. IE 11中 onpropertychange失效

    https://msdn.microsoft.com/zh-cn/library/ie/dn265032(v=vs.85).aspx 将突变事件和属性更改事件迁移到突变观察者 Internet Exp ...

  10. 学JS的心路历程 -物件与原型(二)

    昨天有提到说Object.setPrototypeOf可以指定一个物件为另一个物件的原型,但有想过到底这个原型,也就是[[Prototype]]最终会到何处吗? 答案是Object.prototype ...