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使用【调色】最基础的调色基础，教你调色的原理(转)