echarts

ALotOfHoles

于 2021-12-01 20:11:40 发布

阅读量321

点赞数

文章标签： echarts javascript

本文链接：https://blog.csdn.net/ALotOfHoles/article/details/121662937

版权

echarts

定义

javascript的图表的库
百度捐给apache基金会
比较符合中国人习惯
HeightCharts，D3为同行

核心概览

instance实例
series系列
tooltip 提示
legend 图例
xAxis x轴
yAxis y轴
toolbox 工具箱
dataZoom 缩放
vitualMap 虚拟映射

图标常用类型

bar 柱状
pie 饼型— radius:[“60%”,40%]
line 线性 --areaStyle 面 smooth:true 平滑

颜色的修改

主题：自定义颜色

light,dark浅色与深色

自定义主题

自定义主题地址

color：调色盘
color系列调色盘
itemStyle normal 默认 emphasis 强调状态

特别样式

渐变

var mycolor = {
					type: 'linear',
					x: 0,
					y: 0,
					x2: 0,
					y2: 1,
					colorStops: [{
						offset: 0,
						color: 'aqua' // 0% 处的颜色
					}, {
						offset: 1,
						color: 'rgba(10, 50, 128, 1)' // 100% 处的颜色
					}],
					global: false // 缺省为 false
				};

线的样式 lineStyle

lineStyle：{
width：12,
cap:“round”
opacity:0.7,
},

面的样式

areaStyle{
color：linear2,
}

数据的堆叠

stack:true

label标签

show：true 是否显示

格式化

formatter："{
{a}{b}{c}
}"
a 代表数据名
b 系列名
c 数字

位置

position
insideRight 内部右侧
top/left/right/bottom/inside

颜色

color

多图表

网格布局

grid
top/left/right/bottom/
height
width

轴线指定

xAxis yAxis
gridIndex:0,gridIndex:1

数据指定轴线

xAxisIndex:0
yAxisIndex:0

echarts基本用法

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/echarts.min.js"></script>//引入echarts
		<script src="js/purple-passion.js"></script>//引入自定义主题
		<style>
			#container {
   
				width: 1000px;
				height: 600px;
			}
		</style>
	</head>
	<body>
		<div id="container">

		</div>
		<script>
			// 01 修改主题 dark light , 自定义
			// 02 修改调色盘
			// 初始化echart实例
			var echart = echarts.init(document.getElementById("container")

最低0.47元/天解锁文章

ALotOfHoles

关注

0
点赞
踩
0

收藏

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

echarts定义javascript的图表的库百度捐给apache基金会比较符合中国人习惯HeightCharts，D3为同行核心概览instance实例series系列tooltip 提示legend 图例xAxis x轴yAxis y轴toolbox 工具箱dataZoom 缩放vitualMap 虚拟映射图标常用类型bar 柱状pie 饼型— radius:[“60%”,40%]line 线性 --areaStyle 面 smooth:true 平滑
复制链接

扫一扫