Asia华 2017-07-21 09:03 采纳率: 0%
浏览 8291

Echarts中柱状图与折线的中心位置偏移

这是我目前实现的
我想要的
http://gallery.echartsjs.com/editor.html?c=xByIZomkL-&v=2 (Echarts的在线调试 可以保存后告诉我 )
现在折线的点都在一个位置始终居中,想咨询怎么把每个折线点平移到对应的柱状图上。

就是一个分组中有分类 分类里有两个类别 第一个折线在第1,3,5的柱状图中心位置 第二条折线在2,4,6的柱状图中心位置
谢谢 什么感谢

代码附下:

 <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>ECharts</title>
    <!-- 引入 echarts.js -->
    <script src="echarts.min.js"></script>
</head>
<body>
    <!-- 为ECharts准备一个具备大小(宽高)的Dom -->
    <div id="main" style="width: 100%;height:600px;"></div>
    <script type="text/javascript">
        // 基于准备好的dom,初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));

        // 指定图表的配置项和数据
        var option = {

            tooltip : {
                show:false,
                trigger: 'axis',
                axisPointer : {            // 坐标轴指示器,坐标轴触发有效
                    type : 'shadow'        // 默认为直线,可选为:'line' | 'shadow'
                }
            },
            legend: {
                data:['WIFI','内置应用','系统设置','建议与咨询','用户反馈率']
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis : [
                {
                    type : 'category',
                    data : ['最新版本-2','最新版本-1','最新版本']
                }
            ],
            yAxis : [
                {
                    type : 'value',
                    axisLabel: {
                        formatter: '{value}%'
                    }
                },
            ],
            series : [
                {
                    name:'WIFI',
                    type:'bar',
                    stack: 'one',
                    itemStyle: {
                        normal: {
                            label: {
                                show: true,
                                position: 'inside',
                                formatter:function(params){
                                    return params.seriesName+'\n'+params.value+"%";
                                }
                            }
                        }
                    },
                    barWidth:80,
                    data:[100, 90, 70]
                },
                {
                    name:'内置应用',
                    type:'bar',
                    stack: 'one',
                    itemStyle: {
                        normal: {
                            label: {
                                show: true,
                                position: 'inside',
                                formatter:function(params){
                                    return params.seriesName+'\n'+params.value+"%";
                                }
                            }
                        }
                    },
                    data:[80, 70, 50]
                },
                {
                    name:'系统设置',
                    type:'bar',
                    stack: 'one',
                    itemStyle: {
                        normal: {
                            label: {
                                show: true,
                                position: 'inside',
                                formatter:function(params){
                                    return params.seriesName+'\n'+params.value+"%";
                                }
                            }
                        }
                    },
                    barWidth:80,
                    data:[70, 50, 30]
                },
                {
                    name:'建议与咨询',
                    type:'bar',
                    stack: 'one',
                    itemStyle: {
                        normal: {
                            label: {
                                show: true,
                                position: 'inside',
                                formatter:function(params){
                                    return params.seriesName+'\n'+params.value+"%";
                                }
                            }
                        }
                    },
                    barWidth:80,
                    data:[50, 40, 20]
                },
                {
                    name:'WIFI',
                    type:'bar',
                    stack: 'two',
                    itemStyle: {
                        normal: {
                            label: {
                                show: true,
                                position: 'inside',
                                formatter:function(params){
                                    return params.seriesName+'\n'+params.value+"%";
                                }
                            }
                        }
                    },
                    barWidth:80,
                    data:[90, 80, 60]
                },
                {
                    name:'内置应用',
                    type:'bar',
                    stack: 'two',
                    itemStyle: {
                        normal: {
                            label: {
                                show: true,
                                position: 'inside',
                                formatter:function(params){
                                    return params.seriesName+'\n'+params.value+"%";
                                }
                            }
                        }
                    },
                    barWidth:80,
                    data:[70, 60, 40]
                },
                {
                    name:'系统设置',
                    type:'bar',
                    stack: 'two',
                    itemStyle: {
                        normal: {
                            label: {
                                show: true,
                                position: 'inside',
                                formatter:function(params){
                                    return params.seriesName+'\n'+params.value+"%";
                                }
                            }
                        }
                    },
                    barWidth:80,
                    data:[50, 40, 30]
                },
                {
                    name:'建议与咨询',
                    type:'bar',
                    stack: 'two',
                    itemStyle: {
                        normal: {
                            label: {
                                show: true,
                                position: 'inside',
                                formatter:function(params){
                                    return params.seriesName+'\n'+params.value+"%";
                                }
                            }
                        }
                    },
                    barWidth:80,
                    data:[40, 30, 20]
                },
                {
                    name:'用户反馈率',
                    type:'line',
                    lineStyle: {
                        normal: {
                            type:'dashed'
                        }
                    },
                    smooth:false,
                    markPoint:{
                        symbolOffset:['70%', '90%']
                    },
                    data:[300, 250, 170],
                },
                {
                    name:'用户反馈率',
                    type:'line',
                    lineStyle: {
                        normal: {
                            type:'dashed'
                        }
                    },
                    smooth:false,
                    data:[250, 210, 150]
                }
            ]
        };

        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    </script>
</body>
</html>
  • 写回答

1条回答 默认 最新

  • devmiao 2017-07-22 15:58
    关注
    评论

报告相同问题?

悬赏问题

  • ¥15 shape_predictor_68_face_landmarks.dat
  • ¥15 slam rangenet++配置
  • ¥15 有没有研究水声通信方面的帮我改俩matlab代码
  • ¥15 对于相关问题的求解与代码
  • ¥15 ubuntu子系统密码忘记
  • ¥15 信号傅里叶变换在matlab上遇到的小问题请求帮助
  • ¥15 保护模式-系统加载-段寄存器
  • ¥15 电脑桌面设定一个区域禁止鼠标操作
  • ¥15 求NPF226060磁芯的详细资料
  • ¥15 使用R语言marginaleffects包进行边际效应图绘制