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>

posted @ 2021-08-17 22:44  南风晚来晚相识  阅读(1708)  评论(0)  编辑  收藏  举报