前言
- 本篇来学习下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 ，则
该四个值是绝对的像素位置
<!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 和半径，取值同线性渐变
<!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>
- 效果
