开发者社区> 问答> 正文

ECharts报错:pie has not been required.?报错

<!DOCTYPE html>
<head>
    <meta charset="utf-8">
    <title>ECharts</title>
</head>
<body>
    <!-- 为ECharts准备一个具备大小(宽高)的Dom -->
    <div id="main" style="height:400px"></div>
    <!-- ECharts单文件引入 -->
    <script src="http://echarts.baidu.com/build/dist/echarts.js"></script>
    <script type="text/javascript">
        // 路径配置
        require.config({
            paths: {
                echarts: 'http://echarts.baidu.com/build/dist'
            }
        });
        
        // 使用
        require(
            [
                'echarts',
                'echarts/chart/bar' // 使用柱状图就加载bar模块,按需加载
            ],
            function (ec) {
                // 基于准备好的dom,初始化echarts图表
                var myChart = ec.init(document.getElementById('main')); 
                
                option = {
                   title : {
                       text: '浏览器占比变化',
                       subtext: '纯属虚构',
                       x:'right',
                       y:'bottom'
                   },
                   tooltip : {
                       trigger: 'item',
                       formatter: "{a} <br/>{b} : {c} ({d}%)"
                   },
                   legend: {
                       orient : 'vertical',
                       x : 'left',
                       data:['Chrome','Firefox','Safari','IE9+','IE8-']
                   },
                   toolbox: {
                       show : true,
                       feature : {
                           mark : {show: true},
                           dataView : {show: true, readOnly: false},
                           restore : {show: true},
                           saveAsImage : {show: true}
                       }
                   },
                   calculable : false,
                   series : (function (){
                       var series = [];
                       for (var i = 0; i < 30; i++) {
                           series.push({
                               name:'浏览器(数据纯属虚构)',
                               type:'pie',
                               itemStyle : {normal : {
                                   label : {show : i > 28},
                                   labelLine : {show : i > 28, length:20}
                               }},
                               radius : [i * 4 + 40, i * 4 + 43],
                               data:[
                                   {value: i * 128 + 80,  name:'Chrome'},
                                   {value: i * 64  + 160,  name:'Firefox'},
                                   {value: i * 32  + 320,  name:'Safari'},
                                   {value: i * 16  + 640,  name:'IE9+'},
                                   {value: i * 8  + 1280, name:'IE8-'}
                               ]
                           })
                       }
                       series[0].markPoint = {
                           symbol:'emptyCircle',
                           symbolSize:series[0].radius[0],
                           effect:{show:true,scaleSize:12,color:'rgba(250,225,50,0.8)',shadowBlur:10,period:30},
                           data:[{x:'50%',y:'50%'}]
                       };
                       return series;
                   })()
                };
               // 为echarts对象加载数据 
               myChart.setOption(option); 
               
                setTimeout(function (){
                   var _ZR = myChart.getZrender();
                   var TextShape = require('zrender/shape/Text');
                   // 补充千层饼
                   _ZR.addShape(new TextShape({
                       style : {
                           x : _ZR.getWidth() / 2,
                           y : _ZR.getHeight() / 2,
                           color: '#666',
                           text : '恶梦的过去',
                           textAlign : 'center'
                       }
                   }));
                   _ZR.addShape(new TextShape({
                       style : {
                           x : _ZR.getWidth() / 2 + 200,
                           y : _ZR.getHeight() / 2,
                           brushType:'fill',
                           color: 'orange',
                           text : '美好的未来',
                           textAlign : 'left',
                           textFont:'normal 20px 微软雅黑'
                       }
                   }));
                   _ZR.refresh();
                }, 2000);


        


            }
        );
    </script>

</body>

运行代码就会报错:pie has not been required.   图片出不来



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

    你把pie加入到require中啊,你的require只要bar,也就是只支持bar图

    现在也是同样的问题,你那也算回答???回复 @宝宝鸡:多个div就可以放多副图了我想一个页面做几个不同的图形!我该怎么做!如果我想支持多种类型的图,请问应该怎么加类型把!如:pie和bar两种? 如果我想支持多种类型的图,请问应该怎么加类型把!如:pie和bar两种?回复 @xinyin025:现在就是在type中加了pie类型,报错series内数据组有个type属性,将其设置成你需要的类型即可toolbox属性下的magicType属性,文档里有

     require(
          [
            'echarts',
            'echarts/chart/pie',
            'echarts/chart/bar'
          ]

    2020-06-12 15:07:58
    赞同 展开评论 打赏
问答分类:
问答地址:
问答排行榜
最热
最新

相关电子书

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