栏目二：Echart绘制动态折线图+柱状图
栏目二：Echart绘制动态折线图+柱状图
配置了一个ECharts图表，该图表集成了数据区域缩放、双Y轴显示及多种图表类型（折线图、柱状图、象形柱图）。图表通过X轴数据展示，支持平滑折线展示比率数据并自动添加百分比标识，柱状图以渐变色展示评论数量，而象形柱图则以矩形形式展示点赞数量，增强了视觉表现力。整体设计注重细节处理，如坐标轴指示器、数据点形状及标签格式化等，旨在为用户提供直观、丰富的数据可视化体验。
效果图：
核心代码：
let option = {
// 配置提示框组件
tooltip: {
trigger: 'axis', // 触发类型：坐标轴触发
axisPointer: {
type: 'shadow', // 坐标轴指示器类型为阴影
label: {
show: true, // 显示坐标轴指示器的标签
backgroundColor: '#333' // 标签的背景色
}
},
// 这里有一个被注释掉的 formatter 配置，用于自定义提示框内容
// ...（formatter 配置被省略）
},
// 配置数据区域缩放组件
dataZoom: {
type: 'inside', // 缩放组件类型：内置在坐标系中
start: 0, // 初始时，数据窗口的起始百分比
end: 95 // 初始时，数据窗口的结束百分比
},
// 配置 X 轴
xAxis: {
data: x, // X 轴数据
axisLine: {
lineStyle: {
color: "#ccc" // X 轴线的颜色
}
},
show: true // 显示 X 轴
},
// 配置 Y 轴，这里配置了两个 Y 轴
yAxis: [{
splitLine: { show: false }, // 不显示分割线
axisLine: {
lineStyle: {
color: "#ccc" // Y 轴线的颜色
}
},
name: "赞评数量" // Y 轴名称
}, {
// 第二个 Y 轴的配置
splitLine: { show: false },
axisLine: {
lineStyle: {
color: "#ccc"
}
},
name: "比率/%", // Y 轴名称
axisLabel: {
formatter: '{value} %' // Y 轴标签格式化，添加百分比符号
}
}],
// 配置多个系列
series: [{
name: '比率',
type: 'line', // 类型为折线图
smooth: true, // 线条平滑
showAllSymbol: true, // 显示所有数据点
symbol: 'emptyCircle', // 数据点形状
symbolSize: 15, // 数据点大小
yAxisIndex: 1, // 使用第二个 Y 轴
data: y3, // 数据
// 为该系列的 tooltip 自定义显示
tooltip: {
valueFormatter: function (value) {
return value + '%'; // 为 tooltip 值添加百分比符号
}
}
}, {
name: '评论',
type: 'bar', // 类型为柱状图
barWidth: 30, // 柱状图的宽度
itemStyle: {
normal: {
barBorderRadius: 5, // 柱子的圆角
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
// 渐变色配置
{ offset: 0, color: '#a85d74' },
{ offset: 1, color: '#8f5d6c' }
])
}
},
data: y2 // 数据
}, {
name: '点赞',
type: 'pictorialBar', // 类型为象形柱图
symbol: 'rect', // 形状为矩形
itemStyle: {
normal: {
color: '#279418' // 颜色
}
},
symbolRepeat: true, // 是否重复显示形状
symbolSize: [30, 4], // 形状大小
symbolMargin: 1, // 形状间的间隔
z: -10, // 系列的堆叠顺序
data: y1 // 数据
}]
};
具体代码如下：
<!-- 第二章：折线图+柱状图+动画 -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- 为 ECharts 准备一个定义了宽高的 DOM -->
<div id="main" style="width: 600px;height:400px;"></div>
</body>
<script src="../js/echarts.min.js"></script>
<script>
let x = ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'];
let y2 = [586, 548, 456, 845, 345, 234, 584, 734, 645, 456, 567, 678];
let y3 = [0.5753, 0.2768, 0.7575, 0.6445, 0.3534, 0.4435, 0.6435, 0.3587, 0.4845, 0.6135, 0.4748, 0.6575];
let y1 = y2.map(function (item, index) {
return Math.round(item / y3[index]);
});
y3 = y3.map(function (item) {
// 保留两位小数
return parseFloat((item * 100).toFixed(2));
});
function changeData(list) {
let tmp = list[0]
for (let i = 0; i < list.length-1; i++) {
list[i] = list[i+1];
}
list[list.length - 1] = tmp;
}
function circleCharts(x,y1,y2,y3) {
var chartDom = document.getElementById('main');
var myChart = echarts.init(chartDom);
let option = {
// 配置提示框组件
tooltip: {
trigger: 'axis', // 触发类型：坐标轴触发
axisPointer: {
type: 'shadow', // 坐标轴指示器类型为阴影
label: {
show: true, // 显示坐标轴指示器的标签
backgroundColor: '#333' // 标签的背景色
}
},
// 这里有一个被注释掉的 formatter 配置，用于自定义提示框内容
// ...（formatter 配置被省略）
},
// 配置数据区域缩放组件
dataZoom: {
type: 'inside', // 缩放组件类型：内置在坐标系中
start: 0, // 初始时，数据窗口的起始百分比
end: 95 // 初始时，数据窗口的结束百分比
},
// 配置 X 轴
xAxis: {
data: x, // X 轴数据
axisLine: {
lineStyle: {
color: "#ccc" // X 轴线的颜色
}
},
show: true // 显示 X 轴
},
// 配置 Y 轴，这里配置了两个 Y 轴
yAxis: [{
splitLine: { show: false }, // 不显示分割线
axisLine: {
lineStyle: {
color: "#ccc" // Y 轴线的颜色
}
},
name: "赞评数量" // Y 轴名称
}, {
// 第二个 Y 轴的配置
splitLine: { show: false },
axisLine: {
lineStyle: {
color: "#ccc"
}
},
name: "比率/%", // Y 轴名称
axisLabel: {
formatter: '{value} %' // Y 轴标签格式化，添加百分比符号
}
}],
// 配置多个系列
series: [{
name: '比率',
type: 'line', // 类型为折线图
smooth: true, // 线条平滑
showAllSymbol: true, // 显示所有数据点
symbol: 'emptyCircle', // 数据点形状
symbolSize: 15, // 数据点大小
yAxisIndex: 1, // 使用第二个 Y 轴
data: y3, // 数据
// 为该系列的 tooltip 自定义显示
tooltip: {
valueFormatter: function (value) {
return value + '%'; // 为 tooltip 值添加百分比符号
}
}
}, {
name: '评论',
type: 'bar', // 类型为柱状图
barWidth: 30, // 柱状图的宽度
itemStyle: {
normal: {
barBorderRadius: 5, // 柱子的圆角
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
// 渐变色配置
{ offset: 0, color: '#a85d74' },
{ offset: 1, color: '#8f5d6c' }
])
}
},
data: y2 // 数据
}, {
name: '点赞',
type: 'pictorialBar', // 类型为象形柱图
symbol: 'rect', // 形状为矩形
itemStyle: {
normal: {
color: '#279418' // 颜色
}
},
symbolRepeat: true, // 是否重复显示形状
symbolSize: [30, 4], // 形状大小
symbolMargin: 1, // 形状间的间隔
z: -10, // 系列的堆叠顺序
data: y1 // 数据
}]
};
option && myChart.setOption(option);
}
setInterval(function () {
circleCharts(x,y1,y2,y3);
changeData(y2);
changeData(y3);
changeData(y1);
changeData(x);
}, 1500);
</script>
</html>