echarts調色盤的使用

本文轉載自查看原文 2020-12-28 16:53 492 Echarts顯示相關配置

（1）調色盤：它是一組顏色，圖形、系列會自動從其中選擇顏色。

調色盤原則：就近原則。

主題的調色盤：是引入的js文件中 echarts.registerTheme 中的color

全局的調色盤：

　　option:{
　　　　color:['red','green','blue',...],

　　}

    <script src="lib/echarts.min.js"></script>
    <script src="./roma.js"></script>
</head>

<body>
    <div id="main" style="width: 700px;height:400px;"></div>
    <script type="text/javascript">
        var myChart = echarts.init(document.getElementById('main'), 'roma');
        var pieData = [{
                value: 11231,
                name: "淘寶",
            },
            {
                value: 22673,
                name: "京東"
            },
            {
                value: 6123,
                name: "唯品會"
            },
            {
                value: 8989,
                name: "1號店"
            },
            {
                value: 6700,
                name: "聚美優品"
            }
        ]
        var option = {
            color:['red','green','blue','pink','purple'], // 全局的調色盤會覆蓋主題的調色盤
            series: [{
                type: "pie",
                data: pieData
            }]
        }
        myChart.setOption(option);
    </script>
</body>

如圖：

局部調色盤：在series中進行配置

　　var option = {
　　　　series: [{
　　　　　　type: "pie",
　　　　　　data: pieData,
　　　　　　color:['pink','yellow','black','red','orange']
　　　　}]
　　}

如圖：

（2）顏色漸變

線性漸變（linear）：

 <script src="lib/echarts.min.js"></script>
<script src="./roma.js"></script>

<body>
    <div id="main" style="width: 700px;height:400px;"></div>
    <script type="text/javascript">
        var myChart = echarts.init(document.getElementById('main'), 'roma');
        var xDataArr = ['張三', '李四', '王五', '閏土', '小明', '茅台', '二妞', '大強']
        var yDataArr = [88, 92, 63, 77, 94, 80, 72, 86]
        var option = {
            xAxis: {
                type: "category",
                data: xDataArr
            },
            yAxis: {
                type: 'value'
            },
            series: [{
                type: 'bar',
                data: yDataArr,
                itemStyle: {
                    color: {
                        type: 'linear', //線性漸變(方向從上往下)
                        x: 0,
                        y: 0,
                        x2: 0,
                        y2: 1,
                        colorStops: [{
                                offset: 0, // 0%處的顏色為紅色
                                color: 'red'
                            },
                            {
                                offset: 1, // 0%處的顏色為紅色
                                color: 'blue'
                            },

                        ]
                    }
                }
            }]
        }
        myChart.setOption(option);
    </script>
</body>

如圖：

徑向漸變（radial）：

<script src="lib/echarts.min.js"></script>
<script src="./roma.js"></script>

    <div id="main" style="width: 700px;height:400px;"></div>
    <script type="text/javascript">
        var myChart = echarts.init(document.getElementById('main'), 'roma');
        var xDataArr = ['張三', '李四', '王五', '閏土', '小明', '茅台', '二妞', '大強']
        var yDataArr = [88, 92, 63, 77, 94, 80, 72, 86]
        var option = {
            xAxis: {
                type: "category",
                data: xDataArr
            },
            yAxis: {
                type: 'value'
            },
            series: [{
                type: 'bar',
                data: yDataArr,
                itemStyle: {
                    color: {
                        type: 'radial', //徑向漸變
                        x: 0.5,
                        y: 0.5,
                        r: 0.5,
                        colorStops: [{
                                offset: 0, // 0%處的顏色為紅色
                                color: 'red'
                            },
                            {
                                offset: 1, // 0%處的顏色為紅色
                                color: 'blue'
                            },

                        ]
                    }
                }
            }]
        }
        myChart.setOption(option);
    </script>

如圖：

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 Seaborn調色盤設置 Matplotlib 的默認顏色以及使用調色盤調整顏色 [原創工具] ListView 調色盤 (Free) 使用 ggplot2 和 RColorBrewer 擴展調色板什么是Echarts？Echarts如何使用？ pyqt5學習筆記3: 使用QPalette(調色板) Echarts使用 echarts的基本使用 echarts&&ngx-echarts使用【調色】最基礎的調色基礎，教你調色的原理(轉)