echarts 调色盘、渐变色

1、主题调色盘在使用echarts.registerTheme中定义的color:['xx',...]2、全局调色盘定义后会覆盖主题调色盘,即颜色的取色从这里取和series同级设置color:['颜色',...];  3、局部调色盘会覆盖全局调色盘series:[{color:['颜色',...];   当前图表的颜色从此处取}]渐变色:线性渐变color:{type: 'linear',x: 0,   范围从 0 - 1，相当于在图形包围盒中的百分比，用于确定方向和范围y: 0,x2: 0,y2: 1,colorStops: [{offset: 0, color: 'red' // 0% 处的颜色}, {offset: 1, color: 'blue' // 100% 处的颜色}],global: false,  缺省为false,true表示x、y为绝对的像素位置}方式二:new echarts.graphic.LinearGradient(x1, y1, x2, y2, [    {offset: 0,color: '#5052EE'},{offset: 1,color: '#AB6EE5'}])径向渐变color: {type: 'radial',x: 0.5,y: 0.5,r: 0.5,colorStops: [{offset: 0, color: 'red' // 0% 处的颜色}, {offset: 1, color: 'blue' // 100% 处的颜色}],global: false,     缺省为 false}

效果图:

方向示意图:

代码示例:
调色盘:

export default {name: 'App',mounted:async function(){var myMap=echarts.init(document.querySelector('.map'));var xData=['张三','彭万里','高大山','谢大海','马宏宇','林莽','黄强辉','章汉夫']var yData1=[88,92,63,77,94,80,72,86];var yData2=[80,90,60,70,90,70,62,76];var pieData=[{name:'淘宝',value:'11231'},{name:'京东',value:'22673'},{name:'唯品会',value:'6123'},{name:'1号店',value:'8989'},{name:'聚美优品',value:'6700'}]var radaData=[{name: '华为手机1',value: [80, 90, 80, 82, 90]},{name: '中兴手机1',value: [70, 82, 75, 70, 78]}]var dataMax = [{name: '易用性',max: 100},{name: '功能',max: 100},{name: '拍照',max: 100},{name: '跑分',max: 100},{name: '续航',max: 100}]var option = {color:['orange','green','blue','purple','skyblue'],series:[{type:'pie',data:pieData,color:['pink','yellow','red']}],};myMap.setOption(option);}
}

渐变色:

export default {name: 'App',mounted:async function(){var myMap=echarts.init(document.querySelector('.map'));var xData=['张三','彭万里','高大山','谢大海','马宏宇','林莽','黄强辉','章汉夫']var yData1=[88,92,63,77,94,80,72,86];var yData2=[80,90,60,70,90,70,62,76];var pieData=[{name:'淘宝',value:'11231'},{name:'京东',value:'22673'},{name:'唯品会',value:'6123'},{name:'1号店',value:'8989'},{name:'聚美优品',value:'6700'}]var radaData=[{name: '华为手机1',value: [80, 90, 80, 82, 90]},{name: '中兴手机1',value: [70, 82, 75, 70, 78]}]var dataMax = [{name: '易用性',max: 100},{name: '功能',max: 100},{name: '拍照',max: 100},{name: '跑分',max: 100},{name: '续航',max: 100}]var option = {color:['orange','green','blue','purple','skyblue'],series:[{type:'pie',data:pieData,color:['pink','yellow','red'],itemStyle:{color: {type: 'linear',x: 0,y: 0,x2: 0,y2: 0.5,colorStops: [{offset: 0, color: 'red' // 0% 处的颜色}, {offset: 1, color: 'blue' // 100% 处的颜色}],global: false // 缺省为 false}}}],};myMap.setOption(option);}
}

echarts 调色盘、渐变色相关推荐

Echarts调色盘
<template><div><h2>调色盘</h2><div id="canvas3" style="width: ...
echarts（一）下载引入，调色盘，[标题、图例组件、坐标轴]
一个简单的例子 1. 下载并引入 (1)npm install echarts --save (2)import echarts from 'echarts' //main.js引入echarts 或 ...
Echarts主题和调色盘以及颜色渐变
默认主题: <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF- ...
34-Vue之ECharts高级-调色盘
ECharts高级-调色盘前言调色盘主题调色盘全局调色盘局部调色盘渐变颜色前言本篇来学习下ECharts中调色盘的使用调色盘它是一组颜色,图形.系列会自动从其中选择颜色, 不断的循 ...
ECharts学习--调色盘
(一)调色盘它是一组颜色.图形.系列会自动从其中选择颜色. (1)主题调色盘 (2)全局调色盘 (覆盖主题调色盘) 在option下直接设置color属性 color : ['red','pink' ...
echarts的学习（六）调色盘的学习
调色盘调色盘是什么调色盘的分类主题的调色盘全局的调色盘局部的调色盘颜色渐变线性渐变径向渐变调色盘是什么我们之前的饼图的样式是这样的以上我们也没有自己配置颜色,他就有自己的颜色了, ...
009_调色盘和高亮样式
1. color调色盘 1.1. 调色盘, 可以在option中设置.它给定了一组颜色, 图例.系列会自动从其中选择颜色.可以设置全局的调色盘, 也可以设置系列自己专属的调色盘. option = { ...
python画图怎么调色_Python气象数据处理与绘图(19)：如何使用NCL色板(调色盘思路相同)...
一. 使用NCL色板(使用调色盘文件思路相同) NCL的色板十分丰富,几乎可以涵盖平常所需.详见:传送门那么我们能否将NCL的色板用在python中呢?答案当然是可以的. 我在气象家园发现了个帖子, ...
03-echarts主题和调色盘
主题 1.内置主题在初始化对象方法 init 中可以指明 var chart = echarts.init(dom, 'light') var chart = echarts.init(dom, ' ...

echarts 调色盘、渐变色

echarts 调色盘、渐变色相关推荐

最新文章

热门文章