基于echarts的背景色渐变和图例渐变的实例

最新推荐文章于 2025-07-11 10:20:42 发布

楚雁潮_YXS

最新推荐文章于 2025-07-11 10:20:42 发布

阅读量3.8w

点赞数 11

CC 4.0 BY-SA版权

分类专栏： echarts3 文章标签： web 报表 echarts html5

本文链接：https://blog.youkuaiyun.com/u013808809/article/details/59634694

本文展示了如何使用Echarts库创建具有背景渐变和图例颜色渐变效果的图表。通过调整LinearGradient和RadialGradient属性，分别实现了饼图和柱状图的图例颜色从红到蓝、绿到黄的平滑过渡，以及背景从紫到绿的径向渐变。示例代码包括了饼图和柱状图的完整配置，帮助读者理解并应用到自己的Echarts项目中。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

图例渐变的效果如下图所示：

代码结构入下：

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>图例渐变</title>
<script src="js/echarts.js"></script>

</head>
<body>
<div id="pie1" class="bb" >
</div>
<script src="js/PieCharts/pieOne.js"></script>

</body>

</html>

js代码如下（红色字体为改变的方法）：

var pie1= echarts.init(document.getElementById('pie1'));
var option1 = {
backgroundColor: '#111947',
title: {
text: '新增装机容量',
left: 'center',
textStyle: {
color: '#fff'
}
},
tooltip: {
trigger: 'item',
formatter: "{a} <br/>{b}: {c} ({d}%)"
},
legend: {
orient: 'vertical',
x: 'left',
data:['华能','大唐','国电','华电','中电投','