Echarts如何默认显示折线平铺图

心路独舞 发布于 2015/02/03 21:26
阅读 4K+
收藏 0

【开源中国 APP 全新上线】“动弹” 回归、集成大模型对话、畅读技术报告”

@i6ma 你好,想跟你请教个问题:如图,我该如何设置,请指教,谢谢。


如图代码require.config({
            paths: {
                 echarts: 'http://echarts.baidu.com/build/dist'
            }
        });
        require(
            [
                'echarts',
                'echarts/chart/line', // 使用折线图就加载bar模块
                 //'echarts/chart/bar' // 使用折线图就加载bar模块,按需加载
            ],
            ///DSR评分趋势
            function (ec) {
                // 基于准备好的dom,初始化echarts图表
                var myChart = ec.init(document.getElementById('main'));


                option1 = {
                    tooltip: {
                        trigger: 'axis',
                    },
                    //图表标题
                    title: {
                        text: "DSR评分趋势",
                        x: '238',
                        y: '30',
                    },
                    //图例配置  
                    legend: {
                        data: ['描述相符', '服务态度', '发货速度'],
                    },
                    //工具箱配置 
                    toolbox: {
                        show: true,
                        feature: {
                            mark: { show: true },// 辅助线标志,上图icon左数1/2/3,分别是启用,删除上一条,删除全部  
                            magicType: { show: true, type: ['line', 'bar', 'stack', 'tiled'] },//, 'stack', 'tiled'
                            restore: { show: true }, // 还原,复位原始图表,上图icon左数9,还原  
                            saveAsImage: { show: true },// 保存为图片,上图icon左数10,保存  
                        }
                    },
                    calculable: true,
                    xAxis: [
                        {
                            axisLabel: {
                                rotate: 40,
                            },//时间倾斜
                            grid: { x: 80, y: 60, x2: 80, y2: 60 },
                            type: 'category',
                            boundaryGap: true,
                            data: [<%=Date%>],
                            name: "日期",
                        }
                    ],
                    yAxis: [
                        {
                            type: 'value',
                            scale: false,
                            splitNumber: 20,
                            boundaryGap:[0.0001,0.001],
                         
                            axisTick: { show: true },
                            splitArea: { show: true },
                            name: "数值"
                        }
                    ],
                    //图表Series数据序列配置 
                    series: [
                        {
                            name: '描述相符',
                            type: 'line',
                            stack: '总量',
                            smooth: false,
                            data: [<%=Litm %>],
                           // symbol : 'none',
                        },
                        {
                            name: '服务态度',
                            type: 'line',
                            stack: '总量',
                            smooth: false,
                            data: [<%=Lits %>],
                           // symbol: 'none',
                        },
                        {
                            name: '发货速度',
                            type: 'line',
                            stack: '总量',
                            smooth: false,
                            data: [<%=Litc %>],
                          //  symbol: 'none',


                        },
                    ]
                };
                myChart.setOption(option1);

加载中
0
i6ma
i6ma

代码中缺少数据,不能运行。

但从截图来看,应该是说,三条线几乎平直,没有波动。

可以试下,只放一条线,并设置 yAxis.scale = true; 应该会有 y 轴自适应数据。

如果一定要三条线同时显示,可以试试将数据归一化,将三条线的基线拉到同一水平。

OSCHINA
登录后可查看更多优质内容
返回顶部
顶部