开发者社区> 问答> 正文

Echarts 中的CLICK事件?报错

@Kener-林峰   你好!我实在饼图中给添加了click事件,只不过是调用的方法还是执行的生成饼图,就会报错~~也不知道错在哪了,找了好久,只能麻烦你喽!

<script type="text/javascript" src="../../Scripts/jquery-1.4.1.min.js"></script>
    <script src="../../echarts/esl.js" type="text/javascript"></script>   
    <h2>饼图-实现点击事件+提示框样式</h2><input type="button" value="请点击我" />
     <!-- 为ECharts准备一个具备大小(宽高)的Dom -->
    <div id="main" style="height:600px;width:800px;border:1px solid #e1e1e1;"></div>
    <div id="main1" style="height:600px;width:800px;border:1px solid #e1e1e1; display:none;"></div>
    
    <script type="text/javascript">
        $(document).ready(function () {

            $("input").click(function () {
                test1(1);
            });

        });
        function test1(n) {
            alert(n);
            test();
        }

        function test() {


            require.config({
                paths: {
                    echarts: '../../echarts/echarts',
                    'echarts/chart/map': '../../echarts/echarts-map'
                }
            });

            require(
                    [
                        'echarts',
                        'echarts/chart/map'
                    ],
                function (ec) {

                    // 基于准备好的dom,初始化echarts图表
                    var myChart = ec.init(document.getElementById('main'));
                    var myChart2 = ec.init(document.getElementById('main1'));

                    option = {
                        tooltip: {
                            trigger: 'item',
                            formatter: "{a} <br/>{b} : {c} ({d}%)",
                            borderWidth: 1,
                            borderColor: 'red',
                            borderRadius: 4,
                            backgroundColor: '#f1f1f1',
                            textStyle: {
                                color: 'green',
                                fontFamily: 'Arial',
                                fontSize: 14

                            }
                        },
                        legend: {
                            orient: 'vertical',
                            x: 'left',
                            data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎']
                        },
                        toolbox: {
                            show: true,
                            feature: {
                                mark: { show: true },
                                dataView: { show: true, readOnly: false },
                                restore: { show: true },
                                saveAsImage: { show: true }
                            }
                        },
                        calculable: true,
                        series: [
                                    {
                                        name: '访问来源',
                                        type: 'pie',
                                        radius: ['50%', '70%'],
                                        itemStyle: {
                                            normal: {
                                                label: {
                                                    show: false
                                                },
                                                labelLine: {
                                                    show: false
                                                }
                                            },
                                            emphasis: {
                                                label: {
                                                    show: true,
                                                    position: 'center',
                                                    textStyle: {
                                                        fontSize: '30',
                                                        fontWeight: 'bold'
                                                    }
                                                }
                                            }
                                        },
                                        data: [
                                            { value: 335, name: '直接访问' },
                                            { value: 310, name: '邮件营销' },
                                            { value: 234, name: '联盟广告' },
                                            { value: 135, name: '视频广告' },
                                            { value: 1548, name: '搜索引擎' }
                                        ]
                                    }
                                ]
                    };

                    var ecConfig = require('echarts/config');
                    function eConsole(param) {
                        var str = param.name + ":" + param.value;
                        alert(str);
                        $("#main1").css({ "display": "block" });
                        test1(3);
                    }


                    myChart.on(ecConfig.EVENT.CLICK, eConsole);
                    //myChart.on(ecConfig.EVENT.PIE_SELECTED, eConsole2);

                    myChart.setOption(option,true);

                });
        }
    </script>


下面是报错的地方:

展开
收起
爱吃鱼的程序员 2020-06-20 16:58:07 684 0
1 条回答
写回答
取消 提交回答
  • https://developer.aliyun.com/profile/5yerqm5bn5yqg?spm=a2c6h.12873639.0.0.6eae304abcjaIB

    <scripttype="text/javascript"src="http://echarts.baidu.com/doc/asset/js/jquery.js"></script>
      <scriptsrc="http://echarts.baidu.com/doc/asset/js/esl/esl.js"type="text/javascript"></script>  
      <h2>饼图-实现点击事件+提示框样式</h2><inputtype="button"value="请点击我"/>
       <!--为ECharts准备一个具备大小(宽高)的Dom-->
      <divid="main"style="height:600px;width:800px;border:1pxsolid#e1e1e1;"></div>
      <divid="main1"style="height:600px;width:800px;border:1pxsolid#e1e1e1;display:none;"></div>
       
      <scripttype="text/javascript">
        $(document).ready(function(){


          $("input").click(function(){
            test1(1);
          });


        });
        functiontest1(n){
          alert(n);
          test();
        }


        functiontest(){


          require.config({
            paths:{
              echarts:'http://echarts.baidu.com/doc/example/www/js/echarts-map',
              'echarts/chart/pie':'http://echarts.baidu.com/doc/example/www/js/echarts-map',
              'echarts/chart/map':'http://echarts.baidu.com/doc/example/www/js/echarts-map'
            }
          });


          require(
              [
                'echarts',
                'echarts/chart/pie',
                'echarts/chart/map'
              ],
            function(ec){


              //基于准备好的dom,初始化echarts图表
              varmyChart=ec.init(document.getElementById('main'));
              varmyChart2=ec.init(document.getElementById('main1'));


              option={
                tooltip:{
                  trigger:'item',
                  formatter:"{a}<br/>{b}:{c}({d}%)",
                  borderWidth:1,
                  borderColor:'red',
                  borderRadius:4,
                  backgroundColor:'#f1f1f1',
                  textStyle:{
                    color:'green',
                    fontFamily:'Arial',
                    fontSize:14


                  }
                },
                legend:{
                  orient:'vertical',
                  x:'left',
                  data:['直接访问','邮件营销','联盟广告','视频广告','搜索引擎']
                },
                toolbox:{
                  show:true,
                  feature:{
                    mark:{show:true},
                    dataView:{show:true,readOnly:false},
                    restore:{show:true},
                    saveAsImage:{show:true}
                  }
                },
                calculable:true,
                series:[
                      {
                        name:'访问来源',
                        type:'pie',
                        radius:['50%','70%'],
                        itemStyle:{
                          normal:{
                            label:{
                              show:false
                            },
                            labelLine:{
                              show:false
                            }
                          },
                          emphasis:{
                            label:{
                              show:true,
                              position:'center',
                              textStyle:{
                                fontSize:'30',
                                fontWeight:'bold'
                              }
                            }
                          }
                        },
                        data:[
                          {value:335,name:'直接访问'},
                          {value:310,name:'邮件营销'},
                          {value:234,name:'联盟广告'},
                          {value:135,name:'视频广告'},
                          {value:1548,name:'搜索引擎'}
                        ]
                      }
                    ]
              };


              varecConfig=require('echarts/config');
              functioneConsole(param){
                varstr=param.name+":"+param.value;
                alert(str);
                $("#main1").css({"display":"block"});
                <spanstyle="background-color:#FF9900;">setTimeout(function(){test1(3);},200);
              }




              myChart.on(ecConfig.EVENT.CLICK,eConsole);
              //myChart.on(ecConfig.EVENT.PIE_SELECTED,eConsole2);


              myChart.setOption(option,true);


            });
        }
      </script>
    3q,你上面的回答;在同一个div标签上切换饼图和折线图,就会报错,错误是:行:30错误:无法获取属性“removeChild”的值;对象为null或未定义这个错误是什么原因呢??

    2020-06-20 16:58:25
    赞同 展开评论 打赏
问答排行榜
最热
最新

相关电子书

更多
低代码开发师(初级)实战教程 立即下载
冬季实战营第三期:MySQL数据库进阶实战 立即下载
阿里巴巴DevOps 最佳实践手册 立即下载