码迷,mamicode.com
首页 > 其他好文 > 详细

多颜色柱状图

时间:2017-05-16 20:08:24      阅读:385      评论:0      收藏:0      [点我收藏+]

标签:style   bsp   nbsp   document   offsetx   bar   引入   set   data   

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

 

多颜色柱状图

标签:style   bsp   nbsp   document   offsetx   bar   引入   set   data   

原文地址:http://www.cnblogs.com/dengyg200891/p/6863165.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!