ECharts

最新推荐文章于 2024-07-31 16:33:32 发布

Scshan

最新推荐文章于 2024-07-31 16:33:32 发布

阅读量360

点赞数 1

文章标签： javascript html5 css 前端 echarts

本文链接：https://blog.csdn.net/Scshan/article/details/121655357

版权

ECharts

一、关于ECharts

基本信息

-JavaScript的图表库
-百度捐给Apache基金会
-比较符合中国人的习惯
-highCharts,D3为同行
官网: link.
核心概览
常用的：
instance 实例
series 系列
tooltip 提示
legend 图例
xAxis x轴
yAxis y轴
toolbox 工具箱
dataZoom 缩放
vitualMap 虚拟映射

在这里插入图片描述

二、echarts的使用

1、基本使用规则

在这里插入图片描述

2、基本样式

<body>
		<div id="container" style="width: 1200px; height: 600px;"></div>
		<script>
		// 01 修改主题  dark light，自定义
		// 02 修改调色盘
			// 初始化echart实例
			var echart = echarts.init(document.getElementById("container"));
			// var echart = echarts.init(document.getElementById("container"),'westeros');
			// 定义选项
			var option = {
   
				// 调色盘
				// color:["#00ffff","#55ff7f","#f4b5ff"],
				// 标题
				title:{
   text:"前端大讲堂"},
				// 鼠标提示
				tooltip:{
   },
				// 图例
				legend:{
   data:["人数","人气","年龄分布"]},
				// x轴线
				xAxis:{
   data:["12-1","12-2","12-3","12-4","12-5"]},
				// y轴线
				yAxis:{
   },
				// 系列数据
				series:[
					{
   name:"人数",type:"bar",data:[1000,800,500,
					{
   value:900,itemStyle:{
   color:"#f3f"}},1300

最低0.47元/天解锁文章

Scshan

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
ECharts

ECharts一、关于ECharts基本信息-JavaScript的图表库-百度捐给Apache基金会-比较符合中国人的习惯-highCharts,D3为同行官网: link.核心概览常用的：instance 实例series 系列tooltip 提示legend 图例xAxis x轴yAxis y轴toolbox 工具箱dataZoom 缩放vitualMap 虚拟映射二、echarts的使用1、2、<body> <div
复制链接

扫一扫