Echarts 颜色管理

1.Echarts的颜色设计

Echarts的颜色的设置分为两种：色盘和具体颜色
色盘适合做全局设置，因为他里面有多个颜色，通俗的说色盘就是颜色预设值列表，色盘统一使用color属性进行配置。
而具体元素或者具体系列只有一个颜色时，可以单独为其进行设置，他的值为单个颜色值，但是具体元素和具体系列的类别不一样，没有统一的配置项名称，需要用时按文档进行配置。
当某个系列需要多种颜色支持时，请使用色盘。当某个系列或者元素只有一个颜色时，且不项使用默认的颜色时，这时候可以进行具体的配置

2.色盘的介绍

色盘就是一个数组，每个元素是一个颜色值，每个系列的数据按照先后顺序从色盘数组中依次取色，例如：
不同版本默认的色盘可能不一致，这是V4的默认效果：

3.设置全局色盘

option下面的color节点用来设置全局色盘的颜色,每个系列根据先后顺序从色盘取色，全局色盘适用于折线图，直方图这种图表，因为他们每个系列只有一种颜色。

option: {
   color:["#ff0000","#00ff00","#0000ff"],//红绿蓝
｝

4.设置系列的色盘

有时候只希望设置的色盘只在某个系列里面生效，可以将color属性写入到相应的系列里面
色盘是多颜色预设列表，如果设置在某个系列里面，需要这个系列支持多颜色，例如饼图，饼图一个系列需要多种颜色支持。而折线图，直方图这种图表本身只有一个颜色，所以为其设置系列色盘时只有第一个颜色才有效，所以这种图表不推荐设置色盘。
方法：在serise的元素中配置color属性

option3: {
     series: [
          {
               color: ["#ff0000", "#00ff00", "#0000ff"],//红绿蓝
               name: '访问来源',
               type: 'pie',    // 设置图表类型为饼图
               radius: '55%',  // 饼图的半径，外半径为可视区尺寸（容器高宽中较小一项）的 55% 长度。
               data: [          // 数据数组，name 为数据项名称，value 为数据项值
                   { value: 235, name: '视频广告' },
                   { value: 274, name: '联盟广告' },
                   { value: 310, name: '邮件营销' },
              ]
         }
    ]
}

注意：系列色盘的优先级高于全局色盘

4.设置具体系列或元素的颜色 itemStyle

为某个系列设置单个颜色时，可以使用itemStyle.color为其配置颜色，他的好处在于只在当前系列生效，不影响全局颜色分配

series: [
    { type: 'bar', name: "1", data: [20, 15, 10, 75, 85, 20] ,itemStyle:{color:'#ff0000'}},
    { type: 'bar', name: "2", data: [15, 25, 20, 85, 45, 50] ,itemStyle:{color:'#00ff00'}},
    { type: 'bar', name: "3", data: [10, 35, 40, 45, 25, 30] ,itemStyle:{color:'#0000ff'}},
]

series: [
    { type: 'line', name: "1", data: [20, 15, 10, 75, 85, 20] ,itemStyle:{color:'#ff0000'}},
    { type: 'line', name: "2", data: [15, 25, 20, 85, 45, 50] ,itemStyle:{color:'#00ff00'}},
    { type: 'line', name: "3", data: [10, 35, 40, 45, 25, 30] ,itemStyle:{color:'#0000ff'}},
]

itemStyle中的color属性值可以是一个函数，data中每个数据渲染时都会执行一遍，通过参数可以返回不同的颜色值，从而让每个数据代表的元素拥有不同的颜色

itemStyle:{
       color:function(e){
           //e.dataIndex
           var colorArr = ['red','yellow','green']
           return colorArr[e.dataIndex]
      }
}

5.渐变色生成函数

前面使用的颜色都是单一的颜色值，Echarts还支持渐变色，渐变色设置有2中方法：

(1)配置法：将color属性的值设置为对象，通过相应的配置来生成渐变色
(2)api调用法：通过调用相应的api，传入配置项来返回想要的渐变色。

渐变有两个因素：颜色和角度。
在Echarts中，角度由四个坐标决定，即: (x2 - x)会有一个横向的向量距离，(y2 - y)会有一个纵向的向量距离,这两个向量连接起来的角度就是渐变的角度

下面两种效果是一致的

series: [{
    type: 'bar',
    name: "1",
    data: [20, 15, 10, 75, 85, 20],
    itemStyle: {
        color: {
            type: 'linear',//渐变类型 线性渐变
            x: 0,y: 0,x2: 0,y2: 1,
            //四个坐标决定渐变的角度
            colorStops: [{
                offset: 0,
                color: '#ff0000' // 0% 处的颜色
            },
            {
                offset: 1,
                color: '#00ff00' // 100% 处的颜色
            }],
            globalCoord: false // false表示四个坐标值使用比例 true则表示四个坐标值是绝对的像素位置
        }
    }
},
{
    type: 'bar',
    name: "1",
    data: [20, 15, 10, 75, 85, 20],
    itemStyle: {
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, //四个坐标决定渐变的角度    
        [{
            offset: 0,
            color: '#ff0000' ,// 0% 处的颜色
        },
        {
            offset: 1,
            color: '#00ff00',// 100% 处的颜色
        },
        ])
    }
},
]

将四个坐标设置成下面

x: 0,y: 0,x2: 1,y2: 1,

posted @ 2021-01-27 18:51 ---空白--- 阅读(5131) 评论(0) 编辑收藏举报

刷新页面返回顶部

---空白---