多颜色柱状图

Posted 2020-09-18 Xiao|Deng

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了多颜色柱状图相关的知识，希望对你有一定的参考价值。

参考：http://www.cnblogs.com/bubbleStar/p/6070166.html

<!DOCTYPE html>
<html>
<header>
    <meta charset="utf-8">
    <!--引入 ECharts 文件-->
    <script src="echarts.js"></script>
</header>
<body>

<!--为 ECharts 准备一个具备大小（宽高）的 DOM-->
<div id="main" style="width: 600px;height:400px;"></div>
<script type="text/javascript">

    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById(\'main\'));

    option = {
        //x轴
        xAxis: {
            data: ["苹果", "小米", "华为", "其他"]
        },
        //y轴
        yAxis: {
            splitLine: {show: false}  //改设置不显示坐标区域内的y轴分割线
        },

        //数据
        series: [{
            name: \'手机品牌\',
            type: \'bar\',
            data: [19, 15, 40, 32],
            //设置柱子的宽度
            barWidth: 30,
            //配置样式
            itemStyle: {
                //通常情况下：
                normal: {
                    //每个柱子的颜色即为colorList数组里的每一项，如果柱子数目多于colorList的长度，则柱子颜色循环使用该数组
                    color: function (params) {
                        var colorList = [\'rgb(164,205,238)\', \'rgb(42,170,227)\', \'rgb(25,46,94)\', \'rgb(195,229,235)\'];
                        return colorList[params.dataIndex];
                    }
                },
                //鼠标悬停时：
                emphasis: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: \'rgba(0, 0, 0, 0.5)\'
                }
            }
        }],


        //控制边距　
        grid: {
            left: \'0%\',
            right: \'10%\',
            containLabel: true,
        }
    };

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

以上是关于多颜色柱状图的主要内容，如果未能解决你的问题，请参考以下文章

在c# chart柱状图中，怎么根据数值的大小动态控制单个柱体的颜色