你正在使用的浏览器版本过低，将不能正常浏览和使用知乎。javascript（25）
最近在学习ECharts，关于ECharts的鼠标右键事件可以看官网ECharts3文档的API,网址： 如下：
在 ECharts 中主要通过 on 方法添加事件处理函数，如下：
myChart.on('contextmenu', function (params) {
console.log("右键事件");
console.log(params);
怎么还是会出现默认的右击事件？
可以发现出来了效果，但遗憾的是还是会出现默认的右击事件，保存图片等，于是：
可以先屏蔽浏览器的右击事件，再调用ECharts的右击事件，如下：
document.oncontextmenu = function () { return false; };
myChart.on('contextmenu', function (params) {
console.log("右键事件");
console.log(params);
PS:在我做的练习里，是画地图的，加载的是geoJSON格式的数据，我用params.data.name去访问我鼠标右击时具体对应的是我的geoJSON里的数据，再去后台获取更多的数据传递到前台里。
&&相关文章推荐
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：7281次
排名：千里之外
原创：40篇
(9)(11)(4)(4)(1)(8)(3)温馨提示！由于新浪微博认证机制调整，您的新浪微博帐号绑定已过期，请重新绑定！&&|&&
就算没有倾城的美貌,也要具有摧毁一切的骄傲！
LOFTER精选
网易考拉推荐
用微信&&“扫一扫”
将文章分享到朋友圈。
用易信&&“扫一扫”
将文章分享到朋友圈。
?&!DOCTYPE html&&head&& & &meta charset="utf-8"&& & &title&ECharts&/title&&/head&&body&& & &!-- 为ECharts准备一个具备大小（宽高）的Dom --&& & &div id="main" style="height:400px"&&/div&& & &!-- ECharts单文件引入 --&& & &script src="../dist/echarts.js"&&/script&& & &script type="text/javascript"&& & & & // 路径配置& & & & require.config({& & & & & & paths: {& & & & & & & & echarts: '../dist'& & & & & & }& & & & });& & & &&& & & & // 使用& & & & require(& & & & & & [& & & & & & & & 'echarts',& & & & & & & & 'echarts/chart/gauge'& & & & & & ],& & & & & & function (ec) {& & & & & & & & // 基于准备好的dom，初始化echarts图表& & & & & & & & var myChart = ec.init(document.getElementById('main'));&& & & && & & & & & & & option = {& & backgroundColor: '#1b1b1b',& & tooltip : {& & & & formatter: "{a} &br/&{c} {b}"& & },& & toolbox: {& & & & show : true,& & & & feature : {& & & & & & mark : {show: true},& & & & & & restore : {show: true},& & & & & & saveAsImage : {show: true}& & & & }& & },& & series : [& & & & {& & & & & & name:'速度',& & & & & & type:'gauge',& & & & & & min:0,& & & & & & max:220,& & & & & & splitNumber:11,& & & & & & axisLine: { & & & & & &// 坐标轴线& & & & & & & & lineStyle: { & & & // 属性lineStyle控制线条样式& & & & & & & & & & color: [[0.09, 'lime'],[0.82, '#1e90ff'],[1, '#ff4500']],& & & & & & & & & & width: 3,& & & & & & & & & & shadowColor : '#fff', //默认透明& & & & & & & & & & shadowBlur: 10& & & & & & & & }& & & & & & },& & & & & & axisLabel: { & & & & & &// 坐标轴小标记& & & & & & & & textStyle: { & & & // 属性lineStyle控制线条样式& & & & & & & & & & fontWeight: 'bolder',& & & & & & & & & & color: '#fff',& & & & & & & & & & shadowColor : '#fff', //默认透明& & & & & & & & & & shadowBlur: 10& & & & & & & & }& & & & & & },& & & & & & axisTick: { & & & & & &// 坐标轴小标记& & & & & & & & length :15, & & & &// 属性length控制线长& & & & & & & & lineStyle: { & & & // 属性lineStyle控制线条样式& & & & & & & & & & color: 'auto',& & & & & & & & & & shadowColor : '#fff', //默认透明& & & & & & & & & & shadowBlur: 10& & & & & & & & }& & & & & & },& & & & & & splitLine: { & & & & & // 分隔线& & & & & & & & length :25, & & & & // 属性length控制线长& & & & & & & & lineStyle: { & & & // 属性lineStyle（详见lineStyle）控制线条样式& & & & & & & & & & width:3,& & & & & & & & & & color: '#fff',& & & & & & & & & & shadowColor : '#fff', //默认透明& & & & & & & & & & shadowBlur: 10& & & & & & & & }& & & & & & },& & & & & & pointer: { & & & & & // 分隔线& & & & & & & & shadowColor : '#fff', //默认透明& & & & & & & & shadowBlur: 5& & & & & & },& & & & & & title : {& & & & & & & & textStyle: { & & & // 其余属性默认使用全局文本样式，详见TEXTSTYLE& & & & & & & & & & fontWeight: 'bolder',& & & & & & & & & & fontSize: 20,& & & & & & & & & & fontStyle: 'italic',& & & & & & & & & & color: '#fff',& & & & & & & & & & shadowColor : '#fff', //默认透明& & & & & & & & & & shadowBlur: 10& & & & & & & & }& & & & & & },& & & & & & detail : {& & & & & & & & backgroundColor: 'rgba(30,144,255,0.8)',& & & & & & & & borderWidth: 1,& & & & & & & & borderColor: '#fff',& & & & & & & & shadowColor : '#fff', //默认透明& & & & & & & & shadowBlur: 5,& & & & & & & & offsetCenter: [0, '50%'], & & & // x, y，单位px& & & & & & & & textStyle: { & & & // 其余属性默认使用全局文本样式，详见TEXTSTYLE& & & & & & & & & & fontWeight: 'bolder',& & & & & & & & & & color: '#fff'& & & & & & & & }& & & & & & },& & & & & & data:[{value: 40, name: 'km/h'}]& & & & },& & & & {& & & & & & name:'转速',& & & & & & type:'gauge',& & & & & & center : ['25%', '55%'], & &// 默认全局居中& & & & & & radius : '50%',& & & & & & min:0,& & & & & & max:7,& & & & & & endAngle:45,& & & & & & splitNumber:7,& & & & & & axisLine: { & & & & & &// 坐标轴线& & & & & & & & lineStyle: { & & & // 属性lineStyle控制线条样式& & & & & & & & & & color: [[0.29, 'lime'],[0.86, '#1e90ff'],[1, '#ff4500']],& & & & & & & & & & width: 2,& & & & & & & & & & shadowColor : '#fff', //默认透明& & & & & & & & & & shadowBlur: 10& & & & & & & & }& & & & & & },& & & & & & axisLabel: { & & & & & &// 坐标轴小标记& & & & & & & & textStyle: { & & & // 属性lineStyle控制线条样式& & & & & & & & & & fontWeight: 'bolder',& & & & & & & & & & color: '#fff',& & & & & & & & & & shadowColor : '#fff', //默认透明& & & & & & & & & & shadowBlur: 10& & & & & & & & }& & & & & & },& & & & & & axisTick: { & & & & & &// 坐标轴小标记& & & & & & & & length :12, & & & &// 属性length控制线长& & & & & & & & lineStyle: { & & & // 属性lineStyle控制线条样式& & & & & & & & & & color: 'auto',& & & & & & & & & & shadowColor : '#fff', //默认透明& & & & & & & & & & shadowBlur: 10& & & & & & & & }& & & & & & },& & & & & & splitLine: { & & & & & // 分隔线& & & & & & & & length :20, & & & & // 属性length控制线长& & & & & & & & lineStyle: { & & & // 属性lineStyle（详见lineStyle）控制线条样式& & & & & & & & & & width:3,& & & & & & & & & & color: '#fff',& & & & & & & & & & shadowColor : '#fff', //默认透明& & & & & & & & & & shadowBlur: 10& & & & & & & & }& & & & & & },& & & & & & pointer: {& & & & & & & & width:5,& & & & & & & & shadowColor : '#fff', //默认透明& & & & & & & & shadowBlur: 5& & & & & & },& & & & & & title : {& & & & & & & & offsetCenter: [0, '-30%'], & & & // x, y，单位px& & & & & & & & textStyle: { & & & // 其余属性默认使用全局文本样式，详见TEXTSTYLE& & & & & & & & & & fontWeight: 'bolder',& & & & & & & & & & fontStyle: 'italic',& & & & & & & & & & color: '#fff',& & & & & & & & & & shadowColor : '#fff', //默认透明& & & & & & & & & & shadowBlur: 10& & & & & & & & }& & & & & & },& & & & & & detail : {& & & & & & & & //backgroundColor: 'rgba(30,144,255,0.8)',& & & & & & & &// borderWidth: 1,& & & & & & & & borderColor: '#fff',& & & & & & & & shadowColor : '#fff', //默认透明& & & & & & & & shadowBlur: 5,& & & & & & & & width: 80,& & & & & & & & height:30,& & & & & & & & offsetCenter: [25, '20%'], & & & // x, y，单位px& & & & & & & & textStyle: { & & & // 其余属性默认使用全局文本样式，详见TEXTSTYLE& & & & & & & & & & fontWeight: 'bolder',& & & & & & & & & & color: '#fff'& & & & & & & & }& & & & & & },& & & & & & data:[{value: 1.5, name: 'x1000 r/min'}]& & & & },& & & & {& & & & & & name:'油表',& & & & & & type:'gauge',& & & & & & center : ['75%', '50%'], & &// 默认全局居中& & & & & & radius : '50%',& & & & & & min:0,& & & & & & max:2,& & & & & & startAngle:135,& & & & & & endAngle:45,& & & & & & splitNumber:2,& & & & & & axisLine: { & & & & & &// 坐标轴线& & & & & & & & lineStyle: { & & & // 属性lineStyle控制线条样式& & & & & & & & & & color: [[0.2, 'lime'],[0.8, '#1e90ff'],[1, '#ff4500']],& & & & & & & & & & width: 2,& & & & & & & & & & shadowColor : '#fff', //默认透明& & & & & & & & & & shadowBlur: 10& & & & & & & & }& & & & & & },& & & & & & axisTick: { & & & & & &// 坐标轴小标记& & & & & & & & length :12, & & & &// 属性length控制线长& & & & & & & & lineStyle: { & & & // 属性lineStyle控制线条样式& & & & & & & & & & color: 'auto',& & & & & & & & & & shadowColor : '#fff', //默认透明& & & & & & & & & & shadowBlur: 10& & & & & & & & }& & & & & & },& & & & & & axisLabel: {& & & & & & & & textStyle: { & & & // 属性lineStyle控制线条样式& & & & & & & & & & fontWeight: 'bolder',& & & & & & & & & & color: '#fff',& & & & & & & & & & shadowColor : '#fff', //默认透明& & & & & & & & & & shadowBlur: 10& & & & & & & & },& & & & & & & & formatter:function(v){& & & & & & & & & & switch (v + '') {& & & & & & & & & & & & case '0' : return 'E';& & & & & & & & & & & & case '1' : return 'Gas';& & & & & & & & & & & & case '2' : return 'F';& & & & & & & & & & }& & & & & & & & }& & & & & & },& & & & & & splitLine: { & & & & & // 分隔线& & & & & & & & length :15, & & & & // 属性length控制线长& & & & & & & & lineStyle: { & & & // 属性lineStyle（详见lineStyle）控制线条样式& & & & & & & & & & width:3,& & & & & & & & & & color: '#fff',& & & & & & & & & & shadowColor : '#fff', //默认透明& & & & & & & & & & shadowBlur: 10& & & & & & & & }& & & & & & },& & & & & & pointer: {& & & & & & & & width:2,& & & & & & & & shadowColor : '#fff', //默认透明& & & & & & & & shadowBlur: 5& & & & & & },& & & & & & title : {& & & & & & & & show: false& & & & & & },& & & & & & detail : {& & & & & & & & show: false& & & & & & },& & & & & & data:[{value: 0.5, name: 'gas'}]& & & & },& & & & {& & & & & & name:'水表',& & & & & & type:'gauge',& & & & & & center : ['75%', '50%'], & &// 默认全局居中& & & & & & radius : '50%',& & & & & & min:0,& & & & & & max:2,& & & & & & startAngle:315,& & & & & & endAngle:225,& & & & & & splitNumber:2,& & & & & & axisLine: { & & & & & &// 坐标轴线& & & & & & & & lineStyle: { & & & // 属性lineStyle控制线条样式& & & & & & & & & & color: [[0.2, 'lime'],[0.8, '#1e90ff'],[1, '#ff4500']],& & & & & & & & & & width: 2,& & & & & & & & & & shadowColor : '#fff', //默认透明& & & & & & & & & & shadowBlur: 10& & & & & & & & }& & & & & & },& & & & & & axisTick: { & & & & & &// 坐标轴小标记& & & & & & & & show: false& & & & & & },& & & & & & axisLabel: {& & & & & & & & textStyle: { & & & // 属性lineStyle控制线条样式& & & & & & & & & & fontWeight: 'bolder',& & & & & & & & & & color: '#fff',& & & & & & & & & & shadowColor : '#fff', //默认透明& & & & & & & & & & shadowBlur: 10& & & & & & & & },& & & & & & & & formatter:function(v){& & & & & & & & & & switch (v + '') {& & & & & & & & & & & & case '0' : return 'H';& & & & & & & & & & & & case '1' : return 'Water';& & & & & & & & & & & & case '2' : return 'C';& & & & & & & & & & }& & & & & & & & }& & & & & & },& & & & & & splitLine: { & & & & & // 分隔线& & & & & & & & length :15, & & & & // 属性length控制线长& & & & & & & & lineStyle: { & & & // 属性lineStyle（详见lineStyle）控制线条样式& & & & & & & & & & width:3,& & & & & & & & & & color: '#fff',& & & & & & & & & & shadowColor : '#fff', //默认透明& & & & & & & & & & shadowBlur: 10& & & & & & & & }& & & & & & },& & & & & & pointer: {& & & & & & & & width:2,& & & & & & & & shadowColor : '#fff', //默认透明& & & & & & & & shadowBlur: 5& & & & & & },& & & & & & title : {& & & & & & & & show: false& & & & & & },& & & & & & detail : {& & & & & & & & show: false& & & & & & },& & & & & & data:[{value: 0.5, name: 'gas'}]& & & & }& & ]};clearInterval(timeTicket);timeTicket = setInterval(function (){& & option.series[0].data[0].value = (Math.random()*100).toFixed(2) - 0;& & option.series[1].data[0].value = (Math.random()*7).toFixed(2) - 0;& & option.series[2].data[0].value = (Math.random()*2).toFixed(2) - 0;& & option.series[3].data[0].value = (Math.random()*2).toFixed(2) - 0;& & myChart.setOption(option,true);},2000)& & & & & & & & & & & & & & & & &&& & & & & & & & // 为echarts对象加载数据&& & & & & & & & myChart.setOption(option);&& & & & & & }& & & & );& & &/script&&/body&2、在编码器Brackets.exe中运行（或者直接用Google浏览器打开文件），会出现以下这种或者其它种的错误（运行不出来，白页面）然后面对这种错误，单击右键出现，点击审查元素，后出现红色警告，则这就是运行不出来的原因。Uncaught ReferenceError: timeTicket is not defined，显然警告说timeTicke函数没有被定义，所以就理所应当的在代码中加上timeTicke函数的定义。Var&timeTicke；之后运行则成功：&&&&&
阅读(612)|
用微信&&“扫一扫”
将文章分享到朋友圈。
用易信&&“扫一扫”
将文章分享到朋友圈。
历史上的今天
在LOFTER的更多文章
loftPermalink:'',
id:'fks_',
blogTitle:'Echarts中怎么简单的找错误？',
blogAbstract:'& & &1、在记事本中写好代码eg：（写的是你没有发现的错误的代码）?&!DOCTYPE html&&head&& & &meta charset=\"utf-8\"&& & &title&ECharts&/title&&/head&&body&& & &!-- 为ECharts准备一个具备大小（宽高）的Dom --&& & &div id=\"main\" style=\"height:400px\"&&/div&& & &!-- ECharts单文件引入 --&& & &script src=\"../dist/echarts.js\"&&/script&& & &script type=\"text/javascript\"&',
blogTag:'echarts中错误？,echarts,var,timeticke,echarts图表',
blogUrl:'blog/static/',
isPublished:1,
istop:false,
modifyTime:6,
publishTime:5,
permalink:'blog/static/',
commentCount:0,
mainCommentCount:0,
recommendCount:0,
bsrk:-100,
publisherId:0,
recomBlogHome:false,
currentRecomBlog:false,
attachmentsFileIds:[],
groupInfo:{},
friendstatus:'none',
followstatus:'unFollow',
pubSucc:'',
visitorProvince:'',
visitorCity:'',
visitorNewUser:false,
postAddInfo:{},
mset:'000',
remindgoodnightblog:false,
isBlackVisitor:false,
isShowYodaoAd:false,
hostIntro:'就算没有倾城的美貌,也要具有摧毁一切的骄傲！',
hmcon:'-1',
selfRecomBlogCount:'0',
lofter_single:''
{list a as x}
{if x.moveFrom=='wap'}
{elseif x.moveFrom=='iphone'}
{elseif x.moveFrom=='android'}
{elseif x.moveFrom=='mobile'}
${a.selfIntro|escape}{if great260}${suplement}{/if}
{list a as x}
推荐过这篇日志的人：
{list a as x}
{if !!b&&b.length>0}
他们还推荐了：
{list b as y}
转载记录：
{list d as x}
{list a as x}
{list a as x}
{list a as x}
{list a as x}
{if x_index>4}{break}{/if}
${fn2(x.publishTime,'yyyy-MM-dd HH:mm:ss')}
{list a as x}
{if !!(blogDetail.preBlogPermalink)}
{if !!(blogDetail.nextBlogPermalink)}
{list a as x}
{if defined('newslist')&&newslist.length>0}
{list newslist as x}
{if x_index>7}{break}{/if}
{list a as x}
{var first_option =}
{list x.voteDetailList as voteToOption}
{if voteToOption==1}
{if first_option==false},{/if}&&“${b[voteToOption_index]}”&&
{if (x.role!="-1") },“我是${c[x.role]}”&&{/if}
&&&&&&&&${fn1(x.voteTime)}
{if x.userName==''}{/if}
网易公司版权所有&&
{list x.l as y}
{if defined('wl')}
{list wl as x}{/list}echarts 工具条点击事件控制
1.echarts 工具条中切换图形时需要进行嵌入事件.不知怎么控制,查询下资料()
2.第一步,添加一个方法如下
var ecConfig = require('echarts/config');
function eConsole(param) {
&&&&if(param.type=="magicTypeChanged"){
&&&&&&&&if(param.magicType.bar==true){
&&&&&&&&&&&&console.log("你需要滴事件");
&&&&&&&&}else{
&&&&&&&&&&&&console.log("你不需要滴事件");
2.添加echarts滴点击事件
myChart.on(ecConfig.EVENT.CLICK, eConsole);
由最后编辑于：2年前
内容均为作者独立观点，不代表八零IT人立场，如涉及侵权，请及时告知。
评论努力加载中...
是否采纳当前回复为最佳答案？采纳后不可再次编辑。
下载附件将扣除您个80币，是否继续下载？[转载]echarts&柱状图&如何添加点击事件
我现在已经用echarts 绑定了一组数据 出现了这样的一个图
<img ALT=""
TITLE="[转载]echarts&柱状图&如何添加点击事件" />
如何点击柱子 跳转到响应的页面呢？
只需要 在这个方法里面加上几句代码就行：
//这个是数据绑定的方法
// option 是绑定的数据源
function refresh(isBtnRefresh) {
&&& if (myChart
&& myChart.dispose) {
myChart.dispose();
&&& myChart =
echarts.init(domMain);
window.onresize = myChart.
myChart.setOption(option, true);
ecConfig = require('echarts/config');
&&& function
eConsole(param) {
switch (param.dataIndex) {
&&&&&&&&&&&
case 0:&&&
&&&&&&&&&&&&&&&
window.location.href = ".cn/eul";
&&&&&&&&&&&&&&&
&&&&&&&&&&&
case 1:& //柱子2
&&&&&&&&&&&&&&&
window.location.href = "/desc/4778";
&&&&&&&&&&&&&&&
&&&&&&&&&&&
case 2:& //柱子3
&&&&&&&&&&&&&&&
window.location.href = "/desc/4778";
&&&&&&&&&&&&&&&
&&&&&&&&&&&
&&&&&&&&&&&&&&&
&&&&&&&&&&&&&&&
myChart.on(ecConfig.EVENT.CLICK, eConsole);
domMessage.innerHTML = '';
这样就可以实现了。
以上网友发言只代表其个人观点，不代表新浪网的观点或立场。