多顏色柱狀圖

時間 2019-11-06

標籤顏色柱狀简体版

原文原文鏈接

參考：http://www.cnblogs.com/bubbleStar/p/6070166.htmljavascript

<!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>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。