echarts color

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.dataIndexvar 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,

echarts color相关推荐

ECharts color属性设置（不透明度，透明度，线性渐变，径向渐变，扇形渐变，纹理填充）
1 不透明度 1.1 颜色英文名示例: color:'red' 1.2 十六进制格式有两种表示方式. 第一种为#+6位十六进制数,前2位表示红色,中间2位表示绿色,后2位表示蓝色. 第二种为#+3 ...
ECharts 使用xAxis.axisLine.lineStyle.color设置x坐标轴轴线颜色
1 使用详解 xAxis.axisLine.lineStyle.color 说明:刻度标签文字的颜色,支持回调函数. 默认值:'#333'. 参数类型:Color. 可选值:请参考以下博客. ECha ...
Baidu - Echarts 地图实例测试，并绘制平滑圆弧路径
百度Echarts实例地址: http://echarts.baidu.com/examples.html 同事想做一个地图,地图上的几个点通过动态的线连接起来.但是在实例里没找到类似的. 然后仔细分 ...
echarts中国地图（百度地图）
<script>var myChart = echarts.init(document.getElementById('map'));var data1 = {{map|safe}}; v ...
ECharts x坐标轴(xAxis)使用详解
xAxis 说明:直角坐标系 grid 中的 x 轴,一般情况下单个 grid 组件最多只能放上下两个 x 轴,多于两个 x 轴需要通过配置 offset 属性防止同个位置多个 x 轴的重叠. 1 x ...
Vue+Echarts+百度地图小例子
刚学完Echarts后,看到一些官方例子,粘贴代码下来却实现不了相应的效果,经过一番了解,发现还要引入百度地图,记录详细过程如下. 1.安装echarts(使用3.x,4.x) npm install ...
三维地图前端arcgis_【ArcGIS JS API + eCharts系列】实现二、三维网络路径图的绘制...
概述前面两篇文章通过扩展EchartsLayer.js这个图层类,实现了使用ArcGIS JS API和eCharts,在二维和三维场景下绘制迁徙图和散点图.这篇文章继续通过绘制网络路径图的例子,再 ...
jquery语法三ajax+echarts插件的使用
一.jquery ajax 下面代码 cros 跨域或者不跨域可以使用$.ajax({method:"post",url:"./data/student.txt" ...
echarts 散点地图
效果图数据格式转换 var convertData1 = function(data,index) {console.log('daft',data) var res = []; for (var ...