ECharts学习--调色盘

有一种陪伴叫做jay

于 2020-12-02 18:19:19 发布

阅读量792

点赞数 1

分类专栏： ECharts 文章标签：数据可视化

本文链接：https://blog.youkuaiyun.com/weixin_46198692/article/details/110493143

版权

ECharts 专栏收录该内容

15 篇文章

订阅专栏

本文介绍了ECharts中如何使用调色盘，包括主题、全局和局部调色盘的配置，以及颜色的线性渐变和径向渐变的实现方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

（一）调色盘

它是一组颜色、图形、系列会自动从其中选择颜色。

（1）主题调色盘

（2）全局调色盘（覆盖主题调色盘）

在option下直接设置color属性

color : ['red','pink','blue','purple','#333333'] ,

会按照数组总的顺序来显示

（3）局部调色盘（覆盖全局调色盘）

series : [{
    color:['blue','purple','#333333','red','pink',],
    type: 'pie',
    data: data,
}]

（二）颜色渐变

（1）线性渐变 type为'linear'

itemStyle:{
    color : {
        type:'linear', // 线性渐变
        x : 0, // x起始位置
        y : 0, // y起始位置
        x2: 0, // x结束位置
        y2: 1, // y结束位置
        colorStops:[
            {offset : 0,color:'red'}, // 百分之0处颜色为红色
            {offset : 1,color:'yellow'} // 百分之百处颜色为黄色
        ]
    }
}

（2）径向渐变 type为'radial'

itemStyle:{
    color : {
        type:'radial', // 径向渐变
        x : 0.5, 
        y : 0.5, 
        r: 0.5, 
        colorStops:[
            {offset : 0,color:'red'}, // 百分之0处颜色为红色
            {offset : 1,color:'yellow'} // 百分之百处颜色为黄色
        ]
    }
}