当前位置: 首页 > news >正文

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

http://www.mrgr.cn/news/38603.html

相关文章:

  • Linux —— Socket编程(二)
  • BUUCTF蜘蛛侠呀
  • Neo4J介绍
  • Go基础学习08-并发安全型类型-通道(chan)深入研究
  • 想做个WPS的自动化代码,参考如下:
  • 制造业智能化建设的指标详解
  • linux安装jdk
  • 【CTF Web】Pikachu 反射型xss(get) Writeup(反射型XSS+GET请求)
  • Unity实战案例全解析:RTS游戏的框选和阵型功能(1) 基础要素
  • AVLTree【c++实现】
  • 2409vim,vim写文件有问题
  • Java语法-类和对象之抽象类和接口
  • 国产动漫论坛系统小程序的设计
  • linux网络编程实战
  • 什么是SQL注入?
  • MySQL-数据库约束
  • JSON的C实现(上)
  • LeetCode讲解篇之33. 搜索旋转排序数组
  • 哈希知识点总结:哈希、哈希表、位图、布隆过滤器
  • DMA的原理