1. 程式人生 > >echarts橫向柱狀圖如果想打開網址

echarts橫向柱狀圖如果想打開網址

ota aci -- UNC tooltip 網址 ech right ==

代碼:

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橫向柱狀圖如果想打開網址