echarts图表绘制与样式控制指南-优快云博客

本文链接：https://blog.youkuaiyun.com/wushangnb/article/details/123804987

这篇博客详细介绍了如何使用echarts进行数据可视化，包括导入库、初始化、配置选项如title、legend、tooltip、xAxis、yAxis和series，以及如何设置颜色样式、创建不同类型的图表（柱状图、线图、饼状图）和实现动画效果。同时，还提到了自定义主题和调色板的使用方法。

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

echarts简介

百度开发团队制作，开源交个apache基金管理
制作图表的 javascript库
同类型产品 hightCharts  D3

一、echarts实现步骤

1.导入 echarts.min.js

 <script src="./js/echarts.min.js"></script>

二. 初始化

<div id="container" ></div>
<script type="text/javascript">
    //  初始化 获取dom节点
	var echart = echarts.init(document.getElementById("container")，
	"主题");
	// 设置参数 定义选项option
	var option = {
			title :{}, //标题
			legend:{}, //图例
			tooltip:{}, //鼠标提示
			xAxis:{}, //x轴线
			yAxis:{}, //y轴线
			series:[ ]  //系列数据
		}
		// 更新选项 option
		echart.setOption(option);

三、option（选项）

1、title（标题）

title :{text:"文本"},

2、 legend（图例）

{ data:["name1","name2"] }

3、tooltip（鼠标提示）

4、xAxis: //x轴线

{ data:["x1","x2",...] }

5、yAxis:{}, //y轴线

{ data:["y1","y2",...] }

6、series（系列数据）

bar 柱状图
{
name:“名称”,
type:“bar”,
data:[10,{value:10}],
itemStyle:{color:xxx}
}
line 线
{
name:“名称”，
type:“line”,
smooth:true, //平滑
areaStyle:面的样式,
lineStyle：线的样式
}
pie 饼状图
{
name:“名称”,
type:“pie”,
radius:[“10%”,“50%”],
data:[{name:“n1”,value:40},{name:“n2”,value:60}],
left
top
}

四、颜色样式控制

1、主题

默认 dark（深色） light （亮色）

2、自定义主题

https://echarts.apache.org/zh/theme-builder.html
下载并引用init(dom,“主题名称”)

3、调色板

color:[颜色数组]
itemStyle
具体数据
data:[{value:50,itemStyle:样式}]
系列数据
{name:“分析表”,data:[],itemStyle:{}}
normal:{正常样式}
emphasis:{强调样式}

五、实例

1.图标美化

<script type="text/javascript">
		var echart = echarts.init(document.getElementById("container"),"dark");
		// 渐变色
		var mycolor =  {
				type: 'linear',
			    x: 0,
			    y: 0,
			    x2: 0,
			    y2: 1,
			    colorStops: [{
			        offset: 0, color: 'rgba(0, 85, 255, 0.7)' // 0% 处的颜色
			    }, {
			        offset: .7, color: 'rgba(29, 249, 231, 0)' // 100% 处的颜色
			    }],
			    global: false // 缺省为 false
			}
			var mycolor2 =  {
					type: 'linear',
				    x: 0,
				    y: 0,
				    x2: 0,
				    y2: 1,
				    colorStops: [{
				        offset: 0, color: 'rgba(85, 241, 255, 1.0)' // 0% 处的颜色
				    }, {
				        offset: .7, color: 'rgba(68, 249, 243, 0.7)' // 100% 处的颜色
				    }],
				    global: false // 缺省为 false
				}
		// 设置参数
		var option = {
			title :{
				text:"特殊样式" //标题
			},
			legend:{data:["线","柱状图"]}, //图例
			tooltip:{}, //鼠标提示
			xAxis:{data:["3.1","3.2","3.3","3.4","3.5","3.6","3.7"]}, //x轴线
			yAxis:{}, //y轴线
			series:[ //图数据
				// name 名称注释和 legend 图例保持一致
				{name:"线",type:"line",data:[40,80,60,90,60,80,40],smooth:true,
				lineStyle:{width:5,cap:"round"}, //线的样式
				areaStyle:{color:mycolor}  //面的样式
				},
				{name:"柱状图",type:"bar",data:[60,90,100,120,110,90,50],
				itemStyle:{  //柱状图样式
					borderRadius:[20,20,20,20],//圆角
					color:mycolor2,
					}, 
				},
			]
		}
		// 更新 option
		echart.setOption(option);
	</script>

效果图：
在这里插入图片描述

2.特殊样式(堆叠图)

<script type="text/javascript">
		var echart = echarts.init(document.getElementById("container"),"dark");
		// 设置参数
		var option = {
			title :{
				text:"堆叠图" //标题
			},
			legend:{data:["ui","java","web","python"]}, //图例
			tooltip:{}, //鼠标提示
			//lable标签 show 显示  position 位置 formatter 格式化  {a} 系列名称 {b} 轴线名称 {c} 值
			label:{show:true,position:"inside",formatter:"{a}:{c}"}, //数据显示
			yAxis:{data:["2019","2020","2021","2022"]}, //x轴线
			xAxis:{}, //y轴线
			series:[ //图数据  name与图例保持一致
				{name:"ui",type:"bar",data:[60,90,120,100],stack:true},
				{name:"java",type:"bar",data:[40,70,100,90],stack:true},
				{name:"web",type:"bar",data:[50,80,120,110],stack:true},
				{name:"python",type:"bar",data:[60,90,100,90],stack:true},
			]
		}
		// 更新 option
		echart.setOption(option);
	</script>

效果图：
在这里插入图片描述

3.扇形图美化

<script type="text/javascript">
		var echart = echarts.init(document.getElementById("container"),"dark");
		// 设置参数
		var option = {
			title :{text:"网站信息来源"},
			tooltip:{}, //鼠标提示
			series:[ //图数据
				{name:"来源",type:"pie",
				radius:["30%","50%"],
				data:[
					{value:100,name:"百度",label:{
						show:true,
						position:"center",
						formatter:"{big|{d}}{small|%}\n{b}",
						rich:{
							big:{fontSize:"36px",fontWeight:900},
							small:{fontSize:"12px",color:"#00aaff"}
						}
					}},
					{value:20,name:"其他",label:{show:false}},
				]}
			]
		}
		// 更新 option
		echart.setOption(option);
	</script>

效果：
在这里插入图片描述

4.动画

<script type="text/javascript">
		var echart = echarts.init(document.getElementById("container"),"dark");
		var bj = data.data.feiyan.beijingTrends.sort((a,b)=>a.day-b.day);
		// 设置参数
		var option = {
			title :{text:"动画",left:"100px"},
			legend:{data:["北京新冠趋势"]}, 
			tooltip:{}, 
			xAxis:{data:bj.slice(0,20).map(item=>String(item.day).slice(-4))}, 
			yAxis:{},
			series:[ 
				{type:"bar",name:"北京新冠趋势",data:bj.slice(0,20).map(item=>({...item,value:item.rest_sure_cnt}))},
			],
			// 缓动函数
			animationEasing:'quinticInOut',
			// 动画时间
			animationDuration: function (idx) {
			    // 越往后的数据时长越大
			    return idx * 100;
			},
			// 动画延时
			animationDelay: function (idx) {
			    // 越往后的数据延迟越大
			    return idx * 100;
			}
		}
		// 更新 option
		echart.setOption(option);
</script>