echarts 实现简单的图表_睡客智能ercharts-优快云博客

本文介绍了如何使用echarts这个JavaScript图表库来创建图表，包括基本框架、基础选项、option常用属性的设置，以及样式的调整，如主题和堆叠效果。还涉及动态更新图表的事件监听和触发，以及地图的使用。

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

echarts是基于javascript的图表插件(canvas)百度开发捐赠给apache基金会开源

基本框架

<script src="./js/echarts.min.js"></script>
<div id="app">
	//定义盒子大小		
</div>
//初始化
var echart = echarts.init(document.getElementById('app'));

基础的选项

var option = {
    title:{text:'小吴的睡眠时间'}, // 标题文本
    legend:{data:['睡眠时长','作业耗时','成绩']},  // 图例
	tooltip:{},  // 鼠标提示
	yAxis:{},  // y轴线
	xAxis:{data:['20日','21日','22日','23日','24日','25日','26日']},// x轴线
	series:[ // 系列数据
		   {name:'睡眠时长',type:'bar',data:[8,5,4,7,3,12,14]}, // 数据
		   {name:'作业耗时',type:'line',data:[1,2,4,3,5,1,0],smooth:true},
		   {
			  name:'成绩',
			  type:'pie',
			  data:[
					{name:'html',value:90},
					{name:'js',value:80},
					{name:'nodejs',value:60},
					],
					radius:[100,60], //半径
					left:0,          //左偏移
					top:-200,        //顶部偏移
					
		   }
        ]
}
//设置新选项
echart.setOption(option)

option 常用属性

属性名	属性含义
title	标题
tooltip	鼠标经过提示
xAxis	x轴线
yAxis	y轴线
series	系统数据

样式：

主题

默认的主题有两种：light dark
也可以自己在官方网站中设置自定义样式

var echart = echarts.init(document.getElementById('app'),'light);

调色盘 color:["#f30"]

data:[15,{value:20,itemStyle:{}}]

itemStyle

itemStyle:{
		normal:{color:'#12f8e9'},  //正常状态
		emphasis:{color:'#00ffb3'}, // 强调状态
}

图案类型(type:" ")：

bar 柱状图 line 折线图 pie 饼型图

stack 堆叠

var option = {
	color:['#1cffce',' #2ef5ff'],
	title:{text:'郑州人口留存'},
	legend:{data:['新增','流失']},
	yAxis:{data:['2019','2020','2021']},
	xAxis:{},
	tooltip:{},
	series:[
			{name:'新增',data:[30,50,10],type:'bar',stack:true,
			label:{show:true,position:'insideRight',formatter:'{a}:{c}'},
			},
			{name:'流失',data:[30,20,100],type:'bar',stack:true,
			label:{show:true,position:'insideRight',formatter:'{a}:{c}'},
			},
	]
}

一图多表

var option = {
				color:['#1cffce',' #2ef5ff'],
				title:{text:'使用分布'},
				legend:{data:['手机使用时长','编码时间']},
				grid: [
				    { left: '7%', top: '7%',width:'50%',height: '38%' },
				    { left: '7%', bottom: '7%',width:'50%',height: '38%' },
				  ],
				yAxis:[
					{gridIndex:0,min:0,max:10},
					{gridIndex:1,min:0,max:10},
				],
				xAxis:[
					{data:['周一','周二','周三','周四','周五','周六','周日',],
					gridIndex:0
					},
					{data:['周一','周二','周三','周四','周五','周六','周日',],
					gridIndex:1
					},
				],
				tooltip:{
					
				},
				series:[
					{name:'手机使用时长',data:[3,2,4,3,2,5,10],type:'bar',
					xAxisIndex:0,
					yAxisIndex:0,
					type:'bar',
					itemStyle:{
						normal:{color:'#12f8e9'},  //正常状态
						emphasis:{color:'#00ffb3'}, // 强调状态
					}
					},
					{name:'编码时间',data:[10,5,6,4,7,4,1],type:'bar',
					xAxisIndex:0,
					yAxisIndex:0,
					type:'bar',
					itemStyle:{
						normal:{color:'#00ffb3'},  //正常状态
						emphasis:{color:'#12f8e9'}, // 强调状态
					}
					},
					{name:'编码时间',data:[10,5,6,4,7,4,1],type:'bar',
					xAxisIndex:1,
					yAxisIndex:1,
					type:'bar',
					itemStyle:{
						normal:{color:'#00ffb3'},  //正常状态
						emphasis:{color:'#12f8e9'}, // 强调状态
					}
					},
					{name:'手机使用时长',data:[3,2,4,3,2,5,10],type:'bar',
					xAxisIndex:1,
					yAxisIndex:1,
					type:'bar',
					itemStyle:{
						normal:{color:'#12f8e9'},  //正常状态
						emphasis:{color:'#00ffb3'}, // 强调状态
					}
					},
				]
			}

动态更新

var echart = echarts.init(document.getElementById('container'));
			var list = data.data.feiyan.beijingTrends.sort((a,b)=>a.day-b.day);
			var option = {
				title:{text:'2020北京新冠肺炎趋势'},
				legend:{data:['累计确诊']},
				xAxis:{data:list.slice(0,10).map(item=>String(item.day).slice(-4))},
				yAxis:{},
				series:[
					{name:'累计确诊',type:'bar',data:list.slice(0,10).map(item=>item.rest_sure_cnt)}
				]
			};
			
			echart.setOption(option)
			
			function auto(){
				var first = list.shift();
				list.push(first);
				option.xAxis.data = list.slice(0,10).map(item=>String(item.day).slice(-4));
				option.series[0].data = list.slice(0,10).map(item=>item.rest_sure_cnt);
				echart.setOption(option);
			}
			var id = null;
			id = setInterval(auto,1000);
			
			var box = document.getElementById('container');
			box.addEventListener('mouseover',function(){
				clearInterval(id)
			})
			box.addEventListener('mouseout',function(){
				id = setInterval(auto,1000);
			})

事件：事件监听事件触发

echart.on(事件名,function(e){})
echart.off()

echart.dispatchAction({})
type:"showTip"
seriesIndex:系列下标
dataIndex:数据下标

地图

// 初始化
		 var echart = echarts.init(document.querySelector("#container"));
		 // 选项
		 var option = {
			 // 标题
			 title:{text:"中国地图"},
			 tooltip:{},
			 // 系统数据
			 series:[{
				 // 地图类型
				 type:"map",
				 // 数据
				 data:[
					 {name:"河南",value:"200",en:"henan"},
					 {name:"湖南",value:"180",en:"hunan"},
					 ]
				 
			 }]
		 };
		 
		 function getMap(obj={en:"china"}){
			 // h5的内置api  fetch 自学内容(ES6新增ajax内置方法)
			 fetch(`./js/map/json/province/${obj.en}.json`)
			 .then(res=>res.json())//把获取的数据转换为json  res.text()转换为文本
			 .then(res=>{
				 // 注册地图
				 echarts.registerMap(obj.en,res);
				 // 设置地图的类型
				 option.series[0].mapType = obj.en; 
				 // 更新选项
				 echart.setOption(option);
			 })
			 .catch(err=>console.error(err))
			 
		 }
		 getMap();