多颜色柱状图

参考：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>

 

posted @ 2017-05-16 19:18  Xiao|Deng  阅读(1343)  评论(0)  编辑  收藏  举报