Echarts多曲线数值与Y周刻度不符合

这篇具有很好参考价值的文章主要介绍了Echarts多曲线数值与Y周刻度不符合。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

发现问题:

        在展示多曲线图表的时候,发现图表曲线数值相差不大,但是图表展示的曲线相差很大,仔细观察之后发现是展示有问题(其实这并不能算是错误,只是由于忽略,导致的配置与预期不符合)。

问题复现:

Echarts多曲线数值与Y周刻度不符合,前端,echarts

演示代码:(官方堆叠样例)
option = {
  title: {
    text: 'Stacked Line'
  },
  tooltip: {
    trigger: 'axis'
  },
  legend: {
    data: ['Email', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine']
  },
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
  toolbox: {
    feature: {
      saveAsImage: {}
    }
  },
  xAxis: {
    type: 'category',
    boundaryGap: false,
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      name: 'Email',
      type: 'line',
      stack: 'Total', //----------注意,看这里
      data: [120, 132, 101, 134, 90, 230, 210]
    },
    {
      name: 'Union Ads',
      type: 'line',
      stack: 'Total',//----------注意,看这里
      data: [220, 182, 191, 234, 290, 330, 310]
    },
    {
      name: 'Video Ads',
      type: 'line',
      stack: 'Total',//----------注意,看这里
      data: [150, 232, 201, 154, 190, 330, 410]
    },
    {
      name: 'Direct',
      type: 'line',
      stack: 'Total',//----------注意,看这里
      data: [320, 332, 301, 334, 390, 330, 320]
    },
    {
      name: 'Search Engine',
      type: 'line',
      stack: 'Total',//----------注意,看这里
      data: [820, 932, 901, 934, 1290, 1330, 1320]
    }
  ]
};
问题解决方式:

        查看下Echarts的配置option中的seriess属性(多曲线的时候这个属性应该是一个数组),然后查看数组中的每个对象里面是否包含stack的属性,然后把该属性删除,或者把stack的值修改成唯一值也可以的。

官方文档:

Echarts多曲线数值与Y周刻度不符合,前端,echarts文章来源地址https://www.toymoban.com/news/detail-720431.html

到了这里,关于Echarts多曲线数值与Y周刻度不符合的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 【echarts】如何修改折线图X轴每个刻度的间隔宽度,让拥挤的空间变大,所有坐标点的文案可以显示得下,Echarts x轴文本内容太长的几种解决方案

    Echarts 如何修改折线图X轴每个刻度的间隔宽度,让拥挤的空间变大,所有坐标点的文案可以显示得下,Echarts x轴文本内容太长的几种解决方案 有以下几种方案,堪称最全方案: 1、dataZoom进行坐标的比例缩放 通过调整dataZoom的 startValue + endValue 来控制在容器宽度下,展示多少个

    2024年02月09日
    浏览(41)
  • echarts动态渲染柱状图背景颜色以及顶部数值

     众所周知 柱状图的背景色在series下的 itemStyle 的color下修改  不同数据让每个柱状图背景颜色不同  这个时候就需要自定义  所以我在color后跟了一个箭头函数  里面的参数params跟formatter里的是一样的  可以打印出来 看下里面有什么值  我打印了一下  所以这个时候就可以根

    2024年02月04日
    浏览(47)
  • echarts折线图流动特效的实现(非平滑曲线)

    echarts官网:series-lines 注意:流动特效只支持非平滑曲线(smooth:false) series-lines路径图 : 用于带有起点和终点信息的线数据的绘制,主要用于地图上的航线,路线的可视化。 ECharts 2.x 里会用地图上的 markLine 去绘制迁徙效果,在 ECharts 3 里建议使用单独的 lines 类型图表。

    2024年02月14日
    浏览(45)
  • echarts 饼状图 label 既在内部显示数值(百分比),又显示外部指示线

    项目开发中,产品经理绘制的原型图中,需要前端实现一个饼状图,且既在饼图内部中 显示 百分比,又显示 外部指示线及数值,效果如下图所示: 查了下 Echarts 官网文档,需要配置 series 下的 label 配置项,如下所示: 其中,formatter 是标签内容的格式器,用于转换格式。支

    2024年02月10日
    浏览(33)
  • echarts图表动态监听dataZoom滑动,控制柱条的宽度以及数值的显示隐藏

    当数值过多时,显示所有柱条看着会很凌乱且文字会挤在一起,于是就需要监听datazoom的滑动,拿到对应的阈值后做出相应的配置。 “ dataZoom ” 事件通常用于响应用户对图表进行数据缩放的操作。 这里是datazoom官网api地址:点击跳转至官网文档的datazoom介绍 初始时 状态如下

    2024年04月13日
    浏览(47)
  • 【ECharts】从零实现echarts地图完整代码(纯前端,包含地图资源)

    这里忽略创建vue项目的操作过程,请自行搭建 vue2 项目 、 less 环境 安装下载 echarts 这里我们选择npm下载 安装成功后,在 main.js 中把echarts配置到this上 这里我建立了一个地图的组件,放在 hnMap 中 获取地图渲染json文件 这里我是通过下述的网址下载需要的地图 json 文件到本地

    2024年02月03日
    浏览(55)
  • vue2.x-echarts公共组件封装--简易篇(3d柱状图,炫酷仪表盘,折线,曲线图)

    更新一下之前写的echarts简单图表公共组件的封装,该组件可以实现自适应展示效果 废话不多说,上代码: vue-echarts通用组件 下面的一个混入文件是用来实现,窗口改变echarts自适应的js文件: 接下来是debounce.js 下面直接上代码:父组件调用+展示效果 截图: 下面是一个仪表盘

    2023年04月13日
    浏览(72)
  • Echarts前端可视化库使用教程

    ECharts是一个使用 JavaScript 实现的开源可视化库,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器(IE8/9/10/11,Chrome,Firefox,Safari等),底层依赖矢量图形库 ZRender,提供直观,交互丰富,可高度个性化定制的数据可视化图表。 官网:https://echarts.apache.org/zh/inde

    2024年02月10日
    浏览(51)
  • 前端-如何用echarts绘制含有多个分层的波形图

    先展示一下实际的效果图 用户选择完需要的波形参数字段之后,页面开始渲染图表,有几个参数就要渲染几个grid,也就是几行波形。 拿到所选的参数数据之后 1.首先是给横坐标轴的里程-数据注入 2.修改tooltip(跟着竖线走的卡片弹窗)里面的弹出窗的显示,需要返回html模板

    2024年02月01日
    浏览(47)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包