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>

如图：

posted on 2020-12-28 16:53 稳住别慌阅读(1396) 评论(0) 编辑收藏举报