1. 主题

1.1 内置的主题

init方法有两个参数，第一个参数代表的是一个dom节点，第二个参数代表你需要使用哪一套主题

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

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="lib/echarts.min.js"></script>
</head>
<body><div style="width: 600px;height: 400px;"></div><script>// 使用内置主题var mCharts = echarts.init(document.querySelector('div'),'light')//var mCharts = echarts.init(document.querySelector('div'),'dark')var xDataArr = ['张三', '李四', '王五', '钱七', '孙八', '赵九']var yDataArr = [88, 45, 48, 89, 99, 77]var option = {xAxis: {type: 'category',data: xDataArr},yAxis: {type: 'value',},series: [{name: '语文',type: 'bar',barWidth: '50%',data: yDataArr}]}mCharts.setOption(option)</script>
</body>
</html>

不设置主题

内置主题light

内置主题dark

1.2 自定义主题

①在主题编辑器中编辑主题，去官网

主题编辑器 - Apache ECharts
②下载主题，是一个js文件

③引入主题js文件

我这里命名为theme.js

④在init方法中使用主题

在init方法中之所以用'theme'来引入，要看theme.js中的registerTheme方法

<!DOCTYPE html>
<html lang="en">
<head>...    //其它代码不变<script src="theme/theme.js"></script>
</head>
<body><div style="width: 600px;height: 400px;"></div><script>// 使用自定义主题var mCharts = echarts.init(document.querySelector('div'),'theme')...    //其它代码不变</script>
</body>
</html>

2. 调色板

调色板就是一组颜色，图形、系列会自动从其中选择颜色

2.1 主题调色板

在下载的theme.js主题中的registerTheme方法中设置

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="lib/echarts.min.js"></script>//引入自定义主题<script src="theme/theme.js"></script>
</head>
<body><div style="width: 600px;height: 400px;"></div><script>//使用自定义主题中的调色盘var mCharts = echarts.init(document.querySelector('div'),'theme')var pieData = [{name: '淘宝',value: 11231},{name: '京东',value: 22673},{name: '唯品会',value: 6123},{name: '聚美优品',value: 6700}]var option = {series: [{type: 'pie',data: pieData,selectedMode: 'multiple',selectedOffset: 30,}]}mCharts.setOption(option)</script>
</body>
</html>

不使用主题调色板

使用主题调色板

2.2 全局调色板

使用全局调色盘会覆盖主题调色盘

<!DOCTYPE html>
<html lang="en">
<head>...        //原代码不变
</head>
<body><div style="width: 600px;height: 400px;"></div><script>...    //原代码不变var option = {// 使用全局调色盘color: ['red','blue','skyblue','yellow'],series: [{type: 'pie',data: pieData,selectedMode: 'multiple',selectedOffset: 30,}]}mCharts.setOption(option)</script>
</body>
</html>

2.3 局部调色板

使用局部调色盘会覆盖全局调色盘

var option = {// 使用全局调色盘color: ['red','blue','skyblue','yellow'],series: [{type: 'pie',// 使用局部调色盘color: ['black','green','pink','orange'],data: pieData,selectedMode: 'multiple',selectedOffset: 30,}]}

3. 颜色渐变

3.1 线性渐变

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="lib/echarts.min.js"></script>
</head>
<body><div style="width: 600px;height: 400px;"></div><script>var mCharts = echarts.init(document.querySelector('div'))var xDataArr = ['张三', '李四', '王五', '钱七', '孙八', '赵九']var yDataArr = [88, 45, 48, 89, 99, 77]var option = {xAxis: {type: 'category',data: xDataArr},yAxis: {type: 'value',},series: [{type: 'bar',data: yDataArr,itemStyle:{color: {type: 'linear',  //线性渐变x: 0,y: 0,x2: 0,y2: 1,colorStops: [{offset: 0, color: 'red'   //0%处的颜色为红色},{offset: 1, color: 'blue'   //100%处的颜色为蓝色}]}}}]}mCharts.setOption(option)</script>
</body>
</html>

3.2 径向渐变

      var option = {xAxis: {type: 'category',data: xDataArr},yAxis: {type: 'value',},series: [{type: 'bar',data: yDataArr,itemStyle:{color: {type: 'radial',  //径向渐变x: 0.5,y: 0.5,r: 0.5,colorStops: [{offset: 0, color: 'red'   //0%处的颜色为红色},{offset: 1, color: 'blue'   //100%处的颜色为蓝色}]}}}]}

ECharts的高级使用(主题、调色板、颜色渐变)相关推荐

pyecharts 主题：颜色渐变实例（线性渐变）
效果配置项:pyecharts官网--ItemStyleOpts:图元样式配置项代码位置完整代码 from pyecharts import options as opts from pyech ...
C语言调色板颜色渐变,【多选题】使用调色板可以对矢量图添加什么变化? A. 纯色 B. 线性渐变 C. 径向渐变 D. 透明度 E. 位图填充...
[多选题]使用调色板可以对矢量图添加什么变化? A. 纯色 B. 线性渐变 C. 径向渐变 D. 透明度 E. 位图填充更多相关问题分式方程xx-1=32x-2-2的解是()A．76B．-16C． ...
C语言调色板颜色渐变,VC++实现的OpenGL线性渐变色绘制操作示例
本文实例讲述了VC++实现的OpenGL线性渐变色绘制操作.分享给大家供大家参考,具体如下: 用到的思路就是在应力的最大值和最小值之间划分区间,每个区间的标识点对应不同的颜色值. 然后在区间内的应力值 ...
echarts象形柱图整体颜色渐变
@独孤求败12138 象形柱图整体颜色渐变 echarts中的象形柱图颜色渐变只能局部内部渐变,但是我想要实现整体渐变,怎么做呢?经过我大量的搜索和官方文档及API的研究,好像并不提供这一功能,那只能 ...
Echarts主题和调色盘以及颜色渐变
默认主题: <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF- ...
eCharts——柱状图中的柱体颜色渐变
柱状图中的柱体颜色渐变详细说明先来看一下柱体颜色渐变的效果以下是实现渐变效果的代码: series: [{data: [18, 16, 8, 10, 5, 24],type: 'bar',show ...
ECharts（三）：柱状图柱体颜色渐变（每个柱体不同渐变色）
前提: 会简单的绘制柱状图主要内容: 渐变的主要使用在https://efe.baidu.com/blog/echarts-3.2.0/中有介绍到: itemStyle: { normal: ...
echarts柱状图颜色渐变样式
option: {title: {text: ''},color: [{type: 'linear',x: 0,y: 0,x2: 0,y2: 1,colorStops: [{ offset: 0, c ...
Echarts饼图实现颜色渐变
linear 实现伪弧形渐变 https://gallery.echartsjs.com/editor.html?c=xB1oW7WWbQ Echarts饼图实现颜色渐变 ...

ECharts的高级使用(主题、调色板、颜色渐变)