android折线图点击事件,Echarts 折线统计图 在线上增添点击事件

当前位置:我的异常网» JavaScript » Echarts 折线统计图 在线上增添点击事件

Echarts 折线统计图 在线上增添点击事件

www.myexceptions.net  网友分享于：2014-11-13  浏览：0次

Echarts 折线统计图 在线上添加点击事件

js

// JavaScript Document

// 路径配置

require.config({

paths:{

'echarts' : 'build/echarts',

'echarts/chart/bar' : 'build/echarts'

}

});

// 作为入口

require(

[

'echarts',

'echarts/chart/line'

],

function(ec) {

// 基于准备好的dom，初始化echarts图表

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

option = {

tooltip : {

trigger: 'axis'

},

legend: {

data:['论坛','新闻','博客','全部']

},

toolbox: {

show : true,

feature : {

mark : {show: true},

dataView : {show: true, readOnly: false},

magicType : {show: true, type: ['line', 'bar', 'stack', 'tiled']},

restore : {show: true},

saveAsImage : {show: true}

}

},

calculable : true,

xAxis : [

{

type : 'category',

boundaryGap : false,

data : ['周一','周二','周三','周四','周五','周六','周日']

}

],

yAxis : [

{

type : 'value',

splitArea : {show : true}

}

],

series : [

{

name:'论坛',

type:'line',

stack: '总量',

data:[120, 132, 101, 134, 90, 230, 210]

},

{

name:'新闻',

type:'line',

stack: '总量',

data:[220, 182, 191, 234, 290, 330, 310]

},

{

name:'博客',

type:'line',

stack: '总量',

data:[150, 232, 201, 154, 190, 330, 410]

},

{

name:'全部',

type:'line',

stack: '总量',

data:[320, 332, 301, 334, 390, 330, 320]

}

]

};

// 为echarts对象加载数据

myChart.setOption(option);

}

);

最近刚刚学使用Echarts 作图 现在想对折线图中线 添加onclick事件 请问该怎天添加

------解决思路----------------------

var xList=eval(["2010.9.11","2012.11.14","2013.3.25","2013.4.14","2013.5.2","2013.6.26","2013.7.8","2013.8.27","2013.11.9","2013.12.20"]);

var yList=eval(["36","84","232","22.5","-239","365","-239","-50","81","373"]);

// 路径配置

require.config({

paths:{

'echarts' : 'js/echarts',

'echarts/chart/bar' : 'js/echarts'

}

});

option_line = {

title : {

text: '',

subtext: ''

},

tooltip : {

trigger: 'axis'

},

legend: {

data:['synthesize'],

},

toolbox: {

show : true,

feature : {

mark : {show: true},

dataZoom : {show: true},

dataView : {show: true},

magicType : {show: true, type: ['line', 'bar']},

restore : {show: true},

saveAsImage : {show: true}

}

},

calculable : false,

xAxis : [

{

type : 'category',

boundaryGap : false,

data : xList

}

],

yAxis : [

{

type : 'value',

axisLabel : {

formatter: '{value} '

},

splitArea : {show : true}

}

],

dataZoom : {

show : true,

realtime : true,

//x: 0,

y: 460,

//width: 400,

height: 20,

//backgroundColor: 'rgba(221,160,221,0.5)',

//dataBackgroundColor: 'rgba(138,43,226,0.5)',

//fillerColor: 'rgba(38,143,26,0.6)',

//handleColor: 'rgba(128,43,16,0.8)',

//xAxisIndex:[],

//yAxisIndex:[],

start : 0,

end : 100

},

series : [

{

name:'synthesize',

type:'line',

itemStyle: {

normal: {

lineStyle: {

color:'',

shadowColor : 'rgba(0,0,0,0.3)',

shadowBlur: 5,

shadowOffsetX: 3,

shadowOffsetY: 3

}

}

},

data:yList

}

]

};//end option

require(

[

'echarts',

'echarts/chart/line',

'echarts/chart/bar'

],

function (ec) {

myChart_line_main = ec.init(document.getElementById('main'));

myChart_line_main.setOption(option_line);

var ecConfig = require('echarts/config');//alert(ecConfig);

var zrEvent = require('zrender/tool/event');

myChart_line_main.on(ecConfig.EVENT.CLICK,function (param){

var temp="";

for(var i in param){

temp += i+":"+eval("param."+i)+"\n";

}alert(temp);

});

}

);

这段代码在X.html中其他用到的js文件都存到 js/   文件夹下   js文件夹与X.html在同一目录下。zrender.js   echarts.js  ....

文章评论