34-Vue之ECharts高级-调色盘
Posted 爱学习de测试小白
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了34-Vue之ECharts高级-调色盘相关的知识，希望对你有一定的参考价值。
ECharts高级-调色盘
前言
- 本篇来学习下ECharts中调色盘的使用
调色盘
- 它是一组颜色，图形、系列会自动从其中选择颜色, 不断的循环从头取到尾, 再从头取到尾, 如此往复
- 主要分三种：主题调色盘、全局调色盘、局部调色盘
主题调色盘
echarts.registerTheme('myCustomTheme',
"color": [
"#893448",
"#d95850",
"#eb8146",
"#ffb248",
"#f2d643",
"#ebdba4"
],
"backgroundColor": "rgba(242,234,191,0.15)",
)
- 完整代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>ECharts高级-调色盘</title>
<!-- cdn方式 引入echarts.js文件 -->
<script src="https://cdn.jsdelivr.net/npm/echarts@5.4.1/dist/echarts.min.js"></script>
<script src="lib/CustomTheme.js"></script>
</head>
<body>
<div id='app' style="width: 600px;height:400px"></div>
<script>
// 主题调色盘
echarts.registerTheme('myCustomTheme',
"color": [
"#893448",
"#d95850",
"#eb8146",
"#ffb248",
"#f2d643",
"#ebdba4"
],
"backgroundColor": "rgba(242,234,191,0.15)",
)
var mCharts = echarts.init(document.getElementById("app"), 'myCustomTheme')
// var mCharts = echarts.init(document.getElementById("app"))
var pieData = [
name: 'pass',
value: 80
,
name: 'fail',
value: 10
,
name: 'skip',
value: 5
,
name: 'error',
value: 5
]
var option =
series: [
type: 'pie',
data: pieData,
label:
show: true,
formatter: function (arg)
console.log(arg)
return arg.data.name + '\\n' + arg.percent + '%'
,
selectedMode: 'multiple', // multiple 多选 single 单选
selectedOffset: 30,// 偏移距离
radius: ['50%', '80%']
]
mCharts.setOption(option)
</script>
</body>
</html>
- 效果
全局调色盘
- 全局调色盘：在 option 下增加一个 color 的数组
var option =
// 全局调色盘
color: ['red', 'green', 'blue', 'skyblue', 'purple']
- 完整代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>ECharts高级-调色盘</title>
<!-- cdn方式 引入echarts.js文件 -->
<script src="https://cdn.jsdelivr.net/npm/echarts@5.4.1/dist/echarts.min.js"></script>
<script src="lib/CustomTheme.js"></script>
</head>
<body>
<div id='app' style="width: 600px;height:400px"></div>
<script>
var mCharts = echarts.init(document.getElementById("app"))
var pieData = [
name: 'pass',
value: 80
,
name: 'fail',
value: 10
,
name: 'skip',
value: 5
,
name: 'error',
value: 5
]
var option =
// 全局调色盘
color: ['red', 'green', 'blue', 'skyblue', 'purple'],
series: [
type: 'pie',
data: pieData,
label:
show: true,
formatter: function (arg)
console.log(arg)
return arg.data.name + '\\n' + arg.percent + '%'
,
selectedMode: 'multiple', // multiple 多选 single 单选
selectedOffset: 30,// 偏移距离
radius: ['50%', '80%']
]
mCharts.setOption(option)
</script>
</body>
</html>
- 效果
局部调色盘
- 局部调色盘：在 series 下增加一个 color 的数组
- 说明：如果全局的调色盘和局部的调色盘都设置了, 局部调色盘会产生效果, 这里面遵循的是就近原则
var option =
// 全局调色盘
color: ['red', 'green', 'blue', 'skyblue', 'purple'],
series: [
type: 'pie',
data: pieData,
// 局部调色盘
color: ['pink', 'yellow', 'black', 'orange', 'red']
]
mCharts.setOption(option)
- 效果
渐变颜色
- 线性渐变
- 线性渐变的类型为 linear , 他需要配置线性的方向, 通过 x, y, x2, y2 即可进行配置
x , y , x2 , y2 , 范围从 0 - 1，相当于在图形包围盒中的百分比，如果 global 为 true ，则
该四个值是绝对的像素位置
- 线性渐变的类型为 linear , 他需要配置线性的方向, 通过 x, y, x2, y2 即可进行配置
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>线性渐变</title>
<script src="https://cdn.jsdelivr.net/npm/echarts@5.4.1/dist/echarts.min.js"></script>
</head>
<body>
<div id='app' style="width: 600px;height: 400px"></div>
<script>
var myCharts = echarts.init(document.getElementById('app'))
var option =
xAxis:
type: 'category', // 类目轴
data: ['测试', '研发', '产品']
,
yAxis:
type: 'value' // 数值轴
,
title:
text: '岗位', // 标题文本
link: 'https://blog.csdn.net/IT_heima', // 标题超链接
target: 'blank', // 打开新窗口， self: 当前窗口
textStyle: // 文字样式
color: 'pink', // 颜色
fontWeight: 'bold' // 字体粗细
,
series: [
name: '岗位',
type: 'bar', // 图表类型 bar:柱状图 line:折线图 pie:饼图
data: [10, 90, 20],
itemStyle:
color:
type: 'linear',
x: 0, // 0 0 0 1 意味着从上往下进行渐变
y: 0,
x2: 0,
y2: 1,
colorStops: [
offset: 0, color: 'pink' // 0%处的颜色(最高点)
,
offset: 1, color: 'red' // 100% 处的颜色(最低点)
]
]
myCharts.setOption(option)
</script>
</body>
</html>
- 效果
- 径向渐变
- 线性渐变的类型为 radial , 他需要配置径向的方向, 通过 x , y , r 即可进行配置
前三个参数分别是圆心 x , y 和半径，取值同线性渐变
- 线性渐变的类型为 radial , 他需要配置径向的方向, 通过 x , y , r 即可进行配置
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>线性渐变</title>
<script src="https://cdn.jsdelivr.net/npm/echarts@5.4.1/dist/echarts.min.js"></script>
</head>
<body>
<div id='app' style="width: 600px;height: 400px"></div>
<script>
var myCharts = echarts.init(document.getElementById('app'))
var option =
xAxis:
type: 'category', // 类目轴
data: ['测试', '研发', '产品']
,
yAxis:
type: 'value' // 数值轴
,
title:
text: '岗位', // 标题文本
link: 'https://blog.csdn.net/IT_heima', // 标题超链接
target: 'blank', // 打开新窗口， self: 当前窗口
textStyle: // 文字样式
color: 'pink', // 颜色
fontWeight: 'bold' // 字体粗细
,
series: [
name: '岗位',
type: 'bar', // 图表类型 bar:柱状图 line:折线图 pie:饼图
data: [10, 90, 20],
itemStyle:
color:
type: 'radial', // 径向渐变
x: 0.5,
y: 0.5,
r: 0.5,
colorStops: [
offset: 0, color: 'red' // 0%处的颜色为红色
,
offset: 1, color: 'pink' // 100%处的颜色为蓝
]
]
myCharts.setOption(option)
</script>
</body>
</html>
- 效果
以上是关于34-Vue之ECharts高级-调色盘的主要内容，如果未能解决你的问题，请参考以下文章