Echarts
yuhuo2024-01-30开发库渲染库
参考链接
一. 入门示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>ECharts 入门示例</title>
<style>
#main {
width: 600px;
height: 400px;
}
</style>
<script type="importmap">
{
"imports": {
"echarts": "../../node_modules/echarts/dist/echarts.esm.js"
}
}
</script>
</head>
<body>
<div id="main"></div>
<script type="module">
import * as echarts from "echarts";
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById("main"));
// 指定图表的配置项和数据
myChart.setOption({
title: {
text: "ECharts 入门示例",
},
tooltip: {},
legend: {
data: ["销量"],
},
xAxis: {
data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"],
},
yAxis: {},
series: [
{
name: "销量",
type: "bar",
data: [5, 20, 36, 10, 10, 20],
},
],
});
</script>
</body>
</html>
二. 配置项
title
标题
{
text: "主标题", // 标题文本
show: true, // 是否显示
link: "https://www.baidu.com", // 超链接
target: "blank", // 超链接的打开方式: blank 新窗口, self 当前窗口
// 文本样式
textStyle: {
color: "#464646", // 文字颜色
fontStyle: "normal", // 文字风格
fontWeight: "bold", // 文字粗细
fontFamily: "sans-serif", // 文字字体
fontSize: 18, // 文字大小
lineHeight: 18, // 行高
height: 18, // 高
width: 400, // ??宽
align: "right", // ??水平对齐方式
verticalAlign: "bottom", // ??垂直对齐方式
},
subtext: "副标题", // 副标题文本
sublink: "https://juejin.cn/", // 副标题的超链接
subtarget: "blank", // 超链接的打开方式
triggerEvent : true, // ??是否触发事件
padding: [5, 10, 5, 10], // 内边距，还可 [5, 10]， 10
itemGap: 10, // 标题和副标题的间距
zlevel: 1, // 分层，越大则越上面
z: 1, // 同层，越大越上面
left: 0, // 左侧位置
right: "auto", // 右侧位置
top: 0, // 顶部位置
bottom: "auto", // 底部位置
backgroundColor: "transparent", //背景颜色
borderColor: "#d9d9d9", // 边框颜色
borderWidth: 0, // 边框宽度
borderRadius: 0, // 边框圆角
shadowBlur: 5, // 阴影模糊
shadowColor: "#000000", // 阴影颜色
shadowOffsetX: 10, // 阴影X轴偏移量
shadowOffsetY: 10, // 阴影Y轴偏移量
}
legend
图例
{
type: "plain", // 类型: plain 宽度不足时换行, scroll 宽度不足时滚动
show: true, // 是否显示
data: ["销量", "成本", "利润"],
align: "auto", // 图例和文字的排列: left 图例在左, right 图例在右, auto 自动
origent: "horizontal", // ??布局朝向: horizontal 水平, vertical 垂直
padding: 5,
// zlevel, z
// left, right, top, bottom
// width, height
// textStyle
// backgroundColor, borderColor, borderWidth, borderRadius
// shadowBlur, shadowColor, shadowOffsetX, shadowOffsetY
itemGap: 10, // 每项间隔
itemWidth: 25, // 图形宽度
itemHeight: 14, // 图形高度
symbolKeepAspect: true, // ??自定义图标是否保存长宽比
formatter: "→{name}", // 格式化图例文本
selectedMode: true, // 图例是否允许选中
inactiveColor: "#ccc", // 图例未选中的颜色
// 图例初始选中状态
selected: {
销量: true,
成本: true,
利润": true,
},
}
tooltip
提示工具
{
show: true, // 是否显示
trigger: "axis", // 触发类型: item 数据项, axis 坐标轴, none 没
position: null, // ??位置，默认跟随鼠标 [10,10]，[20%,20%]
extraCssText: "font-size:15px", // ??附加额外的样式
// textStyle
// backgroundColor, borderColor, borderWidth, padding
// 指示器
axisPointer: {
type: "line", // 类型: line 直线, shadow 阴影, cross 十字, none 无
axis: "x", // 坐标轴: x, y, radius, angle
snap: true, //是否自动吸附
z: 0, // 层级
// 指示器文本标签
label: {
show: true, // 当cross时默认为true
precision: 2, // 小数点位数
formatter: "→{value}", // 格式化,也可以是function
margin: 10, // 标签与坐标轴的距离
// width, height, padding, color, lineHeight
// fontSize, fontStyle, fontWeight, fontFamily
// textBorderColor, textBorderWidth
// textShadowColor, textShadowBlur, textShadowOffsetX, textShadowOffsetY
// backgroundColor, borderColor, borderWidth
// shadowColor, shadowBlur, shadowOffsetX, shadowOffsetY
},
// 指示器类型为直线时生效
lineStyle: {
type: "solid", // 线的类型
// color, width, shadowBlur, shadowColor
// shadowOffsetX, shadowOffsetY, opacity
},
// 指示器类型为阴影时生效
shadowStyle: {
// color, shadowBlur, shadowColor
// shadowOffsetX, shadowOffsetY, opacity
},
// 指示器的类型为十字时生效
crossStyle: {
type: "solid", // 线的类型
// color, width, shadowBlur, shadowColor
// shadowOffsetX, shadowOffsetY, opacity
},
},
}
grid
坐标系网格
{
show: true, // 是否显示
containLabel: false, // 定位是否包含标签
// zlevel, z
// left, right, top, right
// right: 10,
// backgroundColor, borderColor, borderWidth, borderRadius
// shadowBlur, shadowColor, shadowOffsetX, shadowOffsetY
}
xAxis
x轴
{
show: true, // 是否显示
type: "category", // 类型: value 数值, category 类目, time 时间, log 对数
data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"], // 类目数据，只在类目轴中有效
gridIndex: 0, // 坐标系grid的索引
position: "bottom", // 位置: top, bottom
offset: 0, // 在默认位置的偏移
name: "商品", // 坐标轴名称
nameLocation: "end", // 名称位置: start, center, end
// 名称样式
nametextStyle: {
// fontSize, fontStyle, fontWeight, fontFamily,
// color, lineHeight, width, height
// textBorderColor, textBorderWidth
// textShadowColor, textShadowBlur, textShadowOffsetX, textShadowOffsetY
},
nameGap: 15, //名称与坐标轴线的距离
nameRotate: 0, //名称旋转角度
inverse: false, //是否反向坐标
// 左留白 = 最小值-(最大值-最小值)*左比例 , 右留白 = 最大值+(最大值-最小值)*右比例
// 在类目轴中，为boolean值，数据是否在两个刻度之间
boundaryGap: [2, 0.5], // 坐标轴两边留白比例,设置min和max后失效
// min : -20, //最小值
// max : 280, //最大值
scale: true, // 是否脱离零刻度,不强制包含,设置min和max后失效
splitNumber: 6, // 坐标轴的预估分段数,在类目轴无效
minInterval: 1, // 最小间隔大小,只在value和time轴类型有效
maxInterval: 100, // 最大间隔大小,只在value和time轴类型有效
interval: null, // 强制设置间隔
logBase: 10, // 对数轴的底数
silent: false, // 是否静态无交互
triggerEvent: false, // 标签是否响应和触发鼠标事件
// zlevel, z, axisPointer
// 轴线设置
axisLine: {
show: true,
onZero: true, // 轴线是否在另外一个轴线的零刻度上,另一个轴线是数值且有零刻度时有效
onZeroAxisIndex: 0, // 双轴时选择在哪个轴的零刻度
symbol: "none", // 轴线两边箭头,也可以分开设置:["none","arrow"],
symbolSize: [10, 15], // 箭头大小[宽度,高度]
symbolOffset: 0, // 首尾两个箭头的偏移,也可以分开设置:[0,0]
// 轴线的样式
lineStyle: {
//color, width, type, opacity
//shadowBlur, shadowColor, shadowOffsetX, shadowOffsetY
},
},
// 刻度标签
axisLabel: {
show: true, // 是否显示
interval: "auto", // 标签显示间隔
inside: false, // 标签朝向: true 内, false 外
// rotate, margin, formatter,showMinLabel,showMaxLabel
// fontSize, fontStyle, fontWeight, fontFamily
// color, align, verticalAlign, lineHeight
// backgroundColor, padding, width, height
// borderColor, borderWidth, borderRadius
// shadowColor, shadowBlur, shadowOffsetX, shadowOffsetY
// textBorderColor, textBorderWidth,
//textShadowColor, textShadowBlur, textShadowOffsetX, textShadowOffsetY
},
// 刻度线
axisTick: {
show: true,
alignWithLabel: true, // 刻度线和标签对齐,类目轴有效
interval: 1, // 刻度中间间隔几个类目，在类目轴中有效
inside: false, //刻度朝向: true 内, false 外
length: 5, // 刻度线长度
lineStyle: {
//轴线的样式
// color, width, type, opacity
// shadowBlur, shadowColor, shadowOffsetX, shadowOffsetY
},
},
// 分割线
splitLine: {
show: true, // 默认数值轴显示，类目轴不显示
interval: 1, // 显示间隔，类目轴有效
// 轴线的样式
lineStyle: {
// color, width, type, opacity
// shadowBlur, shadowColor, shadowOffsetX, shadowOffsetY
},
},
// 分割区
splitArea: {
show: false, // 是否显示（默认false）
interval: 1, // 显示间隔，类目轴有效
areaStyle: {
// color, width, type, opacity
// shadowBlur, shadowColor, shadowOffsetX, shadowOffsetY
},
},
}
yAxis
y轴
series
视觉映射
[
{
type: "bar", // 类型：bar 柱状图
name: "销量", // 名称
data: [5, 20, 36, 10, 10, 20], // 数据
// 标签
label: {
normal: {
show: true,
position: "outside",
},
},
barWidth: 20, // 柱宽度
},
{
type: "line", // 类型：line 折线图
name: "成本",
data: [20, 15, 10, 36, 20, 10],
smooth: true, // 折线是否平滑
stack: "total", // 堆叠，值相同的曲线图，后者会叠加在前者上
// 折线面积样式
areaStyle: {
// color, opacity
// shadowBlur, shadowColor, shadowOffsetX, shadowOffsetY
}
},
{
type: "line", // 类型：line 折线图
name: "利润",
data: [5, 10, 10, 10, 15, 15],
smooth: true, // 折线是否平滑
stack: "total", // 堆叠，值相同的曲线图，后者会叠加在前者上
// 折线面积样式
areaStyle: {
// color, opacity
// shadowBlur, shadowColor, shadowOffsetX, shadowOffsetY
}
},
],