echarts更改x和y轴的颜色-阿里云开发者社区

echarts更改x和y轴的颜色

2022-05-14 365

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： echarts更改x和y轴的颜色

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>第一个 ECharts 实例</title>
    <!-- 引入 echarts.js -->
    <script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
</head>
<body>
    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="main" style="width: 800px;height:400px; background: #fff;"></div>
    <script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));
        // 指定图表的配置项和数据
        var option = {
            title: {
                text: '第一个 ECharts 实例'
            },
            tooltip: {},
            legend: {
                data: ['销量']
            },
            xAxis: {
                data: ["土地、房屋及建筑物", "遇用设备", "遇用设备", "裤子", "家具、用具、装具及动植物", "袜子"],
                axisLabel : {//坐标轴刻度标签的相关设置。
                    interval:0,
                    rotate:"45", //表示的角度倾斜45度
                    // 更改x轴文字颜色的配置
                    textStyle: {
                        color: '#ffb6c1 ',//处理x轴的文字颜色【粉色】
                    }
                },
                // 更改x轴线的颜色
                axisLine:{
                    lineStyle:{
                        color:'#d9d9d9',
                        width:1, //x轴线的宽度
                    }
                }
            },
            yAxis: {
                // 更改y轴线的颜色
                // axisLine:{
                //     lineStyle:{
                //     color:'#d9d9d9',
                //     width:1, //x轴线的宽度
                //     }
                // }
                // 将y轴的线去除掉
                // axisLine:{
                //     show:false
                // },
            },
            series: [{
                name: '销量',
                type: 'bar',
                itemStyle: {
                    normal: {
                        // 这里就可以实现，配置柱状图的颜色
                        color: function (params) {
                            var colorList = [ '#ccc', '#c101c1', '#FCCE10', '#E87C25', '#27727B', '#D7504B'];
                            return colorList[params.dataIndex]
                        },
                    }
                },
                data: [5, 20, 36, 10, 10, 20]
            }]
        };
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    </script>
</body>
</html>

echarts更改x和y轴的颜色

热门文章

最新文章

相关电子书