echarts图表demo
**下方所有代码均可直接前往echarts的官网进行测试**
:https://echarts.apache.org/examples/zh/editor.html?c=radar
多图结合
1. 折线图+柱状图
js
option = {
xAxis: {
type: "category",
data: ["Jan", "Feb", "Mar", "Apr", "May", "Jun"],
axisLine: {
show: false,
},
axisTick: {
show: false,
},
splitLine: {
show: false,
},
},
yAxis: {
type: "value",
axisLine: {
show: false,
},
axisTick: {
show: false,
},
axisLabel: {
show: false,
},
splitLine: {
show: false,
},
},
series: [
{
name: "销售额",
type: "bar",
data: [
5,
20,
36,
10,
20,
{
value: 10,
itemStyle: {
color: "#E0210B",
shadowColor: "#E0210B",
shadowBlur: 10,
shadowOffsetX: 0,
shadowOffsetY: 0,
},
},
],
itemStyle: { color: "#E0210B" },
barWidth: 5,
label: { show: false, position: "insideTop" },
},
{
name: "访问量",
type: "line",
smooth: true,
data: [5, 20, 36, 10, 20, 10],
lineStyle: { width: 2, color: "rgba(0, 0, 0, 0)" },
label: {
show: true,
position: "top",
formatter: function (params) {
if (params.dataIndex === 5) {
// 最后一个数据点单独设置样式
return "{rect|" + "访问量：" + params.value + " 次}";
} else {
return "访问量：" + params.value + " 次";
}
},
rich: {
// 单独设置样式
rect: {
color: "#FFFFFF",
backgroundColor: "#E0210B",
padding: [3, 8, 3, 8],
borderRadius: 4,
},
},
textStyle: {
color: "#000000", // 文字颜色
shadowColor: "rgba(0, 0, 0, 0)", // 文字阴影颜色
shadowBlur: 10, // 文字阴影模糊大小
},
offset:[0, 0], // 控制标签和圆圈之间的距离
},
symbol: "circle", // 折线图拐点圆圈
symbolSize: 10, // 折线图拐点圆圈大小
itemStyle: {
// 折线图拐点圆圈样式
normal: { color: "#000000", borderColor: "#E0210B", borderWidth: 2 },
},
areaStyle: {
normal: {
// 下方的渐变色区域
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: "#5A0900" },
{ offset: 1, color: "rgba(90,9,0,0)" },
]),
},
},
},
// 上数据点和下数据点系列保持不变
{
name: "上数据点",
type: "line",
symbol: "circle",
symbolSize: 10,
itemStyle: { color: "#ffffff", borderColor: "#E0210B", borderWidth: 2 },
data: [[5, 10]], // x轴的索引值和y轴对应的数据值进行定位（x轴第六个数据位置，y轴数值为10的位置）
markLine: {
symbol: ["none", "none"],
data: [{ type: "average", name: "平均值" }],
lineStyle: { color: "transparent" },
label: { show: false },
},
hoverAnimation: false,
},
{
name: "下数据点",
type: "line",
symbol: "circle",
symbolSize: 7,
symbolOffset: [0, 0],
itemStyle: { color: "#ffffff", borderColor: "#E0210B", borderWidth: 2 },
data: [[5, 0]],
markLine: {
symbol: ["none", "none"],
data: [{ type: "average", name: "平均值" }],
lineStyle: { color: "transparent" },
label: { show: false },
},
hoverAnimation: false,
},
],
};雷达图
示例一：
js
option = {
radar: {
indicator: [
{ name: "Sales", max: 6500 },
{ name: "Administration", max: 16000 },
{ name: "Information Technology", max: 30000 },
{ name: "Customer Support", max: 38000 },
{ name: "Development", max: 52000 },
],
splitNumber: 4,
splitLine: {
lineStyle: {
width: 2,
color: "#FFFFFF33", // 设置分割线颜色为灰色
},
},
name:{
color:"blue" // 标签名称为蓝色
},
axisLine: {
lineStyle: {
color: "red", // 设置轴线颜色为红色
},
},
splitArea: {
show: true,
areaStyle: {
color: "#cccccc", // 设置分割区域的背景色为灰色
},
},
},
series: [
{
name: "Budget vs spending",
type: "radar",
data: [
{
value: [4200, 10000, 20000,20000, 30000],
name: "Allocated Budget",
},
],
lineStyle: {
width: 8, // 设置线条宽度
color: "blue", // 设置线条颜色
},
areaStyle: {
normal: {
opacity: 0.1, // 设置区域填充的透明度
},
},
itemStyle: {
normal: {
color: "blue", // 设置小圆点的颜色
},
},
smooth: true, // 设置线条平滑
symbolSize: 7,
},
],
}柱形图
示例一：
js
option = {
xAxis: {
type: "category",
data: ["Jan", "Feb", "Mar", "Apr", "May", "Jun"],
axisTick: {
show: false, // 不显示 X 轴刻度线
},
splitLine: {
show: false, // 不显示 X 轴网格线
},
},
yAxis: {
type: "value",
axisLine: {
show: false, // 不显示 Y 轴轴线
},
axisTick: {
show: false, // 不显示 Y 轴刻度线
},
axisLabel: {
show: false, // 不显示 Y 轴标签
},
splitLine: {
show: false, // 不显示 Y 轴网格线
},
},
series: [
{
name: "销售额",
type: "bar",
data: [
5,
20,
36,
10,
20,
{
value: 50,
itemStyle: {
color: "#0000FF", // 最后一个柱子的颜色设置为蓝色
},
},
],
barWidth: "60%",
itemStyle: {
color: "#E0210B", // 其他柱子的颜色
barBorderRadius: [20, 20, 0, 0], // 设置柱子的圆角
},
label: {
show: true,
position: "top",
formatter: function (params) {
// 格式化数据，例如：添加单位、保留两位小数等
return "￥" + params.value + "k"; // 假设数据是千为单位
},
textStyle: {
color: "blue", // 文本颜色
},
},
markArea: {
//标记区域
data: [
[
{
yAxis: "0",
itemStyle: {
color: "#fffb87",
},
},
{
yAxis: "10", // 这里是不包含10
},
],
[
{
yAxis: "10", // 从10开始
itemStyle: {
color: "#ffe087",
},
},
{
yAxis: "20",
},
],
[
{
yAxis: "20",
itemStyle: {
color: "#ffe1e1",
},
},
{
yAxis: "30",
},
],
[
{
yAxis: "30",
itemStyle: {
color: "#094279",
},
},
{
yAxis: "40",
},
],
[
{
yAxis: "40",
itemStyle: {
color: "#00d4ff",
},
},
{
yAxis: "50",
},
],
[
{
yAxis: "50",
itemStyle: {
color: "#fc466b",
},
},
{
yAxis: "60",
},
],
],
},
},
],
};示例二:(加背景图)
js
option = {
// 个人建议做这个背景图之前可以使用 grid: {top: "0%",left: "0%",right: "0%",bottom: "0%",containLabel: true} 清除一下默认填充
graphic: [
{
type: "image",
left: myChart.getWidth() * 0.1, // 边距(这个刚好卡到y轴边,适配所有尺寸)
top: myChart.getHeight() * 0.076, // 边距(这个根据自己项目进行调整)
silent: true, // 开启不响应用户的交互事件
style: {
// 如果链接图片不显示的话,可以在html上面加个<meta name="referrer" content="no-referrer" />试试
image:
"https://gitee.com/xiaojisengren/tuchuang/raw/master/uitest/累计消耗1万大卡海报.png",
width: myChart.getWidth() * 0.8, // 背景图的宽(这个刚好卡到y轴边,适配所有尺寸)
height: myChart.getHeight() * 0.835, // 背景图的高(这个根据自己项目进行调整)
z: -1, // 多个图片层级大小
},
},
],
title: {
text: "ECharts 柱状图示例",
},
tooltip: {},
legend: {
data: ["销量"],
},
xAxis: {
data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"],
},
yAxis: {},
series: [
{
name: "销量",
type: "bar",
data: [5, 20, 36, 10, 10, 20],
},
],
};示例三（柱形渐变，文字渐变）
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ECharts Bar Chart with Gradient Color and AxisPointer</title>
<!-- 引入 ECharts -->
<script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.3.3/echarts.min.js"></script>
</head>
<body>
<div style="width: 500px; height: 300px" id="main"></div>
<svg style="position: absolute; width: 0; height: 0">
<linearGradient id="textGradient" x1="0" y1="0" x2="0" y2="1">
<stop offset="20%" stop-color="#D6C0E6"></stop>
<stop offset="100%" stop-color="#F3B7D3"></stop>
</linearGradient>
</svg>
<script>
document.addEventListener('DOMContentLoaded', function () {
var data = [
{ month: 'Jan', value: 120 },
{ month: 'Feb', value: 200 },
{ month: 'Mar', value: 150 },
{ month: 'Apr', value: 80 },
{ month: 'May', value: 70 },
{ month: 'Jun', value: 110 },
{ month: 'Jul', value: 130 },
{ month: 'Aug', value: 300 },
{ month: 'Sep', value: 400 },
{ month: 'Oct', value: 500 },
{ month: 'Nov', value: 300 },
{ month: 'Dec', value: 200 }
];
var maxValue = Math.max(...data.map(item => item.value));
var maxIndex = data.findIndex(item => item.value === maxValue);
var chartDom = document.getElementById('main');
var myChart = echarts.init(chartDom, '', { renderer: 'svg' });
var option = {
xAxis: {
type: 'category',
data: data.map(item => item.month)
},
yAxis: {
type: 'value'
},
series: [{
name: '访问量',
type: 'bar',
barWidth: '60%',
itemStyle: {
color: function (params) {
return params.dataIndex === maxIndex ? {
// 线性渐变，前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1，
// 相当于在图形包围盒中的百分比
x: 0,
y: 0,
x2: 0,
y2: 1,
type: "linear",
colorStops: [
{ offset: 0, color: "#D6C0E6" },
{ offset: 1, color: "#F3B7D3" }
]
} : {
// 线性渐变，前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1，
// 相当于在图形包围盒中的百分比
x: 0,
y: 0,
x2: 0,
y2: 1,
type: "linear",
colorStops: [
{ offset: 0, color: "#9367AB" },
{ offset: 1, color: "#CC4674" }
]
};
},
borderRadius: [4, 4, 0, 0] // 设置顶部圆角
},
label: {
show: function (params) {
return params.dataIndex === maxIndex;
},
position: 'top',
formatter: function (params) {
return params.dataIndex == maxIndex ? `{value|${params.value}}{unit|次}` : ''; // 富文本模本写法,将数据和单位互相单独写样式
},
rich: {
value: {
fontSize: 20,
fontWeight: 'bold',
color: 'url(#textGradient)' // 应用 SVG 渐变色
},
unit: {
fontSize: 11, // 设置单位的字体大小
color: 'url(#textGradient)', // 设置单位的颜色
padding: [5, 0, 0, 0]
}
}
},
data: data.map(item => item.value)
}]
};
myChart.setOption(option);
});
</script>
</body>
</html>折线图
示例一：
js
option = {
xAxis: {
type: "category",
data: ["Jan", "Feb", "Mar", "Apr", "May", "Jun"],
axisTick: {
show: false, // 不显示 X 轴刻度线
},
splitLine: {
show: false, // 不显示 X 轴网格线
},
},
yAxis: {
type: "value",
axisLine: {
show: false, // 不显示 Y 轴轴线
},
axisTick: {
show: false, // 不显示 Y 轴刻度线
},
axisLabel: {
show: false, // 不显示 Y 轴标签
},
splitLine: {
show: false, // 不显示 Y 轴网格线
},
},
series: [
{
name: "销售额",
type: "line",
data: [
5,
20,
36,
10,
20,
{
value: 50,
itemStyle: {
color: "#0000FF", // 最后一个柱子的颜色设置为蓝色
},
},
],
symbol: "circle", // 设置数据点的形状为圆形
symbolSize: .5, // 设置数据点的大小
itemStyle: {
normal: {
color: "#E0210B", // 数据点的填充颜色
borderColor: "#E0210B", // 数据点的边框颜色
borderWidth: 2, // 数据点的边框宽度
},
},
barWidth: "60%",
label: {
show: true,
position: "top",
formatter: function (params) {
// 格式化数据，例如：添加单位、保留两位小数等
return "￥" + params.value + "k"; // 假设数据是千为单位
},
textStyle: {
color: "blue", // 文本颜色
},
},
markArea: {
//标记区域
data: [
[
{
yAxis: "0",
itemStyle: {
color: "#fffb87",
},
},
{
yAxis: "10", // 这里是不包含10
},
],
[
{
yAxis: "10", // 从10开始
itemStyle: {
color: "#ffe087",
},
},
{
yAxis: "20",
},
],
[
{
yAxis: "20",
itemStyle: {
color: "#ffe1e1",
},
},
{
yAxis: "30",
},
],
[
{
yAxis: "30",
itemStyle: {
color: "#094279",
},
},
{
yAxis: "40",
},
],
[
{
yAxis: "40",
itemStyle: {
color: "#00d4ff",
},
},
{
yAxis: "50",
},
],
[
{
yAxis: "50",
itemStyle: {
color: "#fc466b",
},
},
{
yAxis: "60",
},
],
],
},
},
// 上数据点
{
name: "上数据点",
type: "line",
symbol: "circle",
symbolSize: 10,
itemStyle: {
color: "#ffffff", // 上数据点颜色
borderColor: "#E0210B",
borderWidth: 2,
},
data: [[5, 50]], // 假设上数据点的值是访问量的两倍
markLine: {
symbol: ["none", "none"],
data: [{ type: "average", name: "平均值" }],
lineStyle: {
color: "transparent", // 设置标记线为透明
},
label: {
show: false, // 不显示标签
},
},
hoverAnimation: false,
},
],
};