echarts怎么自定义Y轴的项?

WytheChan
  • 766

要达成的效果图:

图片描述

我根据echarts文档,写出来的实际效果:

图片描述

我的代码:

//指定图标的配置和数据
       var option = {
            title:{
                text:'2017年 下半年'
            },
            tooltip:{},
            legend:{
                data:['账单']
            },
            xAxis:{
                data:["7月","8月","9月","10月","11月","12月"]
            },
            yAxis:{
                // data:["0","5万","10万","15万","20万","25万","30万"]
                
            },
            series:[{
                name:'账单',
                type:'line',
                itemStyle:{
                    color:"#cc9966"
                },
                data: [22,25,20,18,29,25]
            }]
        };
        //初始化echarts实例
        var myChart = echarts.init(document.getElementById('chart'));

        //使用制定的配置项和数据显示图表
        myChart.setOption(option);

代码中的yAxis配置我是注释掉的,解除后的效果如下图:

图片描述

图表就变形了

我现在想做的就是在图2的基础上让Y轴的刻度加上万的单位,就想效果图的Y轴一样。
还有一个问题就是,我已经设置了标题,但是显示不出来。

回复
阅读 14.7k
2 个回答
✓ 已被采纳

看官方的文档介绍撸的

var option = {
    title:{
        text:'2017年 下半年'
    },
    tooltip:{
        trigger: 'axis',
        axisPointer: {//鼠标经过显示
            type: 'shadow'
        }
    },
    grid: {//图表间距
        left: '2%',
        right: '10%',
        bottom: '2%',
        containLabel: true
    },
    xAxis:{
        axisTick: {//去掉刻度
            show: false
        },
        data:["7月","8月","9月","10月","11月","12月"]
    },
    yAxis:{
        axisLabel:{
           formatter: '{value} 万'
        },
        splitLine:{//去掉网格线
            show:false
        },
        axisTick: {//去掉刻度
            show: false
        }
    },
    series:[{
        name:'账单',
        type:'line',
        symbol:'circle',//拐点样式
        symbolSize: 12,//拐点大小
        itemStyle:{
            color:"#cc9966"
        },
        data: [22,25,20,18,29,25]
    }]
};
es716
  • 2
新手上路,请多包涵
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
宣传栏