Echarts柱状图的相关设置

最新推荐文章于 2024-08-27 12:00:00 发布

memoryI

最新推荐文章于 2024-08-27 12:00:00 发布

阅读量1.5k

点赞数

分类专栏：技术文章标签： Echarts柱状图

本文链接：https://blog.csdn.net/memoryI/article/details/80909194

版权

本文详细介绍了如何使用Echarts库创建柱状图，包括三个关键步骤：初始化echarts实例，制定图表配置项和数据，以及使用配置项显示图表。

摘要由CSDN通过智能技术生成

第一步：基于准备好的dom，初始化echarts实例

var myChart = echarts.init(document.getElementById('插入图表的id名'));

第二步：制定图表的配置项和数据

var option = {

//设置图表的标题
    title: [{
        //设置标题的内容
        text: '年龄比例',
        //设置标题的位置
        textAlign: 'center',
        textStyle: {
            //设置标题字体的颜色
            color: '#53e3fb'
        }

    }],
//设置柱状图x轴的信息

    xAxis: [{  
        type: 'category',//设置category类型可以自定义x轴的文字信息     
        data: ['30岁以下', '30-40', '40-50', '50-60', '60以上'],//设置x轴需要显示的数据信息    
        axisTick: {show: false},//设置x轴刻度线不显示
        axisLabel:{  
              //x轴的信息都显示                                           
              interval:0,
              //-30度交倾斜显示x轴的内容
              // rotate:-30
              //x轴文字颜色的变化
              color:'#ccc',
              //x轴字体大小的设置
              fontSize: