1
回答
EChart(版本1.3.8)使用模块化单文件引入是线图的展现问题
百度AI开发者大赛带你边学边开发,赢100万奖金,加群:418589053   
<script type="text/javascript">
            require.config({
                paths: { echarts: './Scripts/echarts/echarts-original',
                    'echarts/chart/line': './Scripts/echarts/echarts-original',
                    'echarts/chart/bar': './Scripts/echarts/echarts-original',
                    'echarts/chart/scatter': './Scripts/echarts/echarts-original',
                    'echarts/chart/k': './Scripts/echarts/echarts-original',
                    'echarts/chart/pie': './Scripts/echarts/echarts-original',
                    'echarts/chart/radar': './Scripts/echarts/echarts-original',
                    'echarts/chart/chord': './Scripts/echarts/echarts-original',
                    'echarts/chart/force': './Scripts/echarts/echarts-original'
                }
            });
            //--- 折柱 ---
            require(
                ['echarts',
                'echarts/chart/line',
                'echarts/chart/bar',
                'echarts/chart/scatter',
                'echarts/chart/k',
                'echarts/chart/pie',
                'echarts/chart/radar',
                'echarts/chart/force',
                'echarts/chart/chord'], 
                function (ec) {
                    var myChart = ec.init(document.getElementById('main'));
                    var option = {
                        title : {
                            text: '未来一周气温变化',
                            subtext: '纯属虚构'
                        },
                        tooltip : {
                            trigger: 'axis'
                        },
                        legend: {
                            data:['最高气温','最低气温']
                        },
                        toolbox: {
                            show : true,
                            feature : {
                                mark : {show: true},
                                dataView : {show: true, readOnly: false},
                                magicType : {show: true, type: ['line', 'bar']},
                                restore : {show: true},
                                saveAsImage : {show: true}
                            }
                        },
                        calculable : true,
                        xAxis : [
                            {
                                type : 'category',
                                boundaryGap : false,
                                data : ['周一','周二','周三','周四','周五','周六','周日']
                            }
                        ],
                        yAxis : [
                            {
                                type : 'value',
                                axisLabel : {
                                    formatter: '{value} °C'
                                },
                                splitArea : {show : true}
                            }
                        ],
                        series : [
                            {
                                name:'最高气温',
                                type:'line',
                                itemStyle: {
                                    normal: {
                                        lineStyle: {
                                            shadowColor : 'rgba(0,0,0,0.4)',
                                            shadowBlur: 5,
                                            shadowOffsetX: 3,
                                            shadowOffsetY: 3
                                        }
                                    }
                                },
                                data:[11, 11, 15, 13, 12, 13, 10],
                                markPoint : {
                                    data : [
                                        {type : 'max', name: '最大值'},
                                        {type : 'min', name: '最小值'}
                                    ]
                                },
                                markLine : {
                                    data : [
                                        {type : 'average', name: '平均值'}
                                    ]
                                }
                            },
                            {
                                name:'最低气温',
                                type:'line',
                                itemStyle: {
                                    normal: {
                                        lineStyle: {
                                            shadowColor : 'rgba(0,0,0,0.4)',
                                            shadowBlur: 5,
                                            shadowOffsetX: 3,
                                            shadowOffsetY: 3
                                        }
                                    }
                                },
                                data:[1, -2, 2, 5, 3, 2, 0],
                                markPoint : {
                                    data : [
                                        {name : '周最低', value : -2, xAxis: 1, yAxis: -1.5}
                                    ]
                                },
                                markLine : {
                                    data : [
                                        {type : 'average', name : '平均值'}
                                    ]
                                }
                            }
                        ]
                    };

                    myChart.setOption(option,true);
            });

    </script>

在使用模块化单文件引入,定义折线图的Option的时候。在series中的数据中,定义了markPoint和markLine属性,结果就出现不显示折线的情况,不知道为什么?但是如果使用模块包引入的时候,这个问题就消失了,不知道是什么原因。

即使是在官方文档里面,只要把echartsExample.js中的developMode改成false,在运行第一个折线图时,问题也是如此

举报
WillieLiu
发帖于4年前 1回/795阅
顶部