ECharts报错:pie has not been required.

宝宝鸡 发布于 2015/08/19 17:20
阅读 7K+
收藏 0
<!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.   图片出不来



加载中
0
xinyin025
xinyin025

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

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

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

返回顶部
顶部