栏目二: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