echarts——颜色控制

主题theme的使用
调色盘
渐变色

主题的使用

内置主题

echarts默认内置了两套主题：light 、dark

// echarts初始化init()方法，有两个参数，第一个为放置图表的dom元素，第二个为主题名称
this.barChart = this.$echarts.init(this.$refs.bar,'light');

自定义主题

echarts官网——下载——主题下载——定制主题——自定义配置（修改名称）
方法一：下载主题（ququ.js）——放入项目——script标签引入js文件
方法二：复制json代码 —— vue项目新建theme.js(public/static/theme/theme.js)

 //theme.jsconst theme = 你复制的jsonexport default theme//引入主题并注册import theme from '....../theme' // 引入主题this.$echarts.registerTheme('theme', theme) // 注册主题let myChart = this.$echarts.init(document.getElementById('Line'),'theme') //使用主题

调色盘：一组颜色集合，图表会自动去集合中选取颜色(就近原则)

主题调色盘
在主题js文件中有一个方法：echarts.registerTheme( ‘主题名称’ , { color:[ ‘主题调色盘颜色集合’ ] })
全局调色盘
在配置项option的第一层定义的颜色color集合：let option = { color:[ ‘主题调色盘颜色集合’ ] }
局部调色盘
在配置项option中的series数组中每一项定义的color

// 1、主题
import { ququ } from "../../public/static/theme/ququ";
init() {this.$echarts.registerTheme("ququ", ququ);this.barChart = this.$echarts.init(this.$refs.bar, "ququ");// 监听鼠标移入移出事件this.barChart.on("mouseover", (params) => {console.log(params);clearInterval(this.timerId);});this.barChart.on("mouseout", () => {this.openTimer();});
},// 全局和局部let option = {color: ["red", "yellow", "green", "blue"],  //2、全局调色盘xAxis: {type: "value",},yAxis: {type: "category",data: barDataY,},series: [{type: "bar",data: barDataX,color: ["#ccc"], // 3、局部调色盘},{type: "bar",data: barDataX1,color: ["pink"],}],};

渐变色：线性渐变、径向渐变

        series: [{// 每一个条目的样式配置itemStyle: {barBorderRadius: [0, 34, 34, 0], // 圆角// 1、简写——渐变色  1、指明颜色渐变的方向  2、指明不同百分比之下颜色的值color: new this.$echarts.graphic.LinearGradient(0, 0, 1, 0, [{ offset: 0, color: "#5050ee" },{ offset: 1, color: "#ab6ee5" },]),// 2、 线性渐变color: {type: "linear",x: 0,y: 0,X2: 1,y2: 0,colorStops: [{offset: 0,color: "red",},{offset: 1,color: "blue",},],},// 3、径向渐变color: {type: "radial",x: 0,y: 0,r: 1,colorStops: [{offset: 0,color: "red",},{offset: 1,color: "blue",},],},},},],

echarts——颜色控制相关推荐

树莓派c语言led,用树莓派实现RGB LED的颜色控制——C语言版本号
用树莓派实现RGB LED的颜色控制 RGB色彩模式是工业界的一种颜色标准.是通过对红(R).绿(G).蓝(B)三个颜色通道的变化以及它们相互之间的叠加来得到各式各样的颜色的,RGB即是代表红.绿. ...
python rgb led控件_Raspberry Pi-用树莓派实现RGB LED的颜色控制——Python版本-电路城论坛 - 电子工程师学习交流园地...
用树莓派实现RGB LED的颜色控制 RGB色彩模式是工业界的一种颜色标准,是通过对红(R).绿(G).蓝(B)三个颜色通道的变化以及它们相互之间的叠加来得到各式各样的颜色的,RGB即是代表红.绿. ...
GPU Gems1 - 22 颜色控制（Color Controls）
这章将在游戏中图像处理的讨论,扩展到技术和艺术上控制颜色的方法和应用,包括将图像从一些的色彩空间中移入移出,以及快速地给任何2D或3D场景加上精美的色调. 色彩校正(Color Correction) ...
课时66.颜色控制属性下（理解）
今天来讲解十六进制控制属性的方法,其实用十六进制表示的方式本质就是rgb,只不过它们的格式不一样而已,十六进制中是通过每两位表示一种颜色的方式来给颜色赋值. 如 #FF0000 FF----r 00- ...
html字体颜色代码属性,HTML文本属性颜色控制属性的实现
一.文本装饰的属性 1.格式:text-decoration:underline; 2.取值: (1)underline代表下划线 (2)line-through代表删除线 (3)overline代表 ...
MATLAB中的颜色控制
1.色图颜色调配命令在MATLAB中,控制及实现颜色调配的主要命令为colormap,它的使用格式如下: 调用格式说 ...
printf颜色控制c语言,C语言中控制printf的打印颜色实例及vt100的控制符文档
转自:http://blog.csdn.net/evimacsl/archive/2010/01/18/5206836.aspx 为了给printf着色方便, 我们可以定义一些宏: #define N ...
matlab让一个点变为指定颜色,MATLAB中的颜色控制
1.色图颜色调配命令在MATLAB中,控制及实现颜色调配的主要命令为colormap,它的使用格式如下: 调用格式说 ...
matlab 判断颜色程序,MATLAB中的颜色控制
1.色图颜色调配命令在MATLAB中,控制及实现颜色调配的主要命令为colormap,它的使用格式如下: 调用格式说 ...

echarts——颜色控制

主题的使用

调色盘：一组颜色集合，图表会自动去集合中选取颜色(就近原则)

渐变色：线性渐变、径向渐变

echarts——颜色控制相关推荐

最新文章

热门文章