精华内容
下载资源
问答
  • echarts折线图 y轴刻度数值与获取的值不符显示错误问题
    2022-04-11 14:14:54

    如图Y轴刻度数据与实际的值不对应问题 :

    解决方法:stack: "Total" 去掉

    series: [
                {
                  name: '询价量',
                  type: 'line',
                  // stack: "Total",
                  // 是否让线条圆滑显示
                  smooth: true,
                  data: data.year[0]
                },
                {
                  name: '保单支付量',
                  type: 'line',
                  // stack: "Total",
                  smooth: true,
                  data: data.year[1]
                }
    ]

     如图:

     

    更多相关内容
  • 主要介绍了实现EChartsY轴左右刻度线一致的例子,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • 茫茫人海中与你相遇相信未来的你不会很差作者:婷酱Yaaa来源:...一个小实例让你对echarts折线图不再陌生!剖析你的心啊呸,错了,是剖析设计图。心有啥好剖析的????简简单单的设计图,那让我们来...

    茫茫人海中与你相遇

    8ff0a7f6dd3e3bf87b9911090fba6be5.png

    相信未来的你不会很差

    作者:婷酱Yaaa

    来源:https://juejin.im/post/5f0292d35188252e5a5dbed0

    前言

    哈喽,everybody,我又来了。话不多说,这次给大家带来的是 echarts 系列之折线图,满满的干货。一个小实例让你对echarts折线图不再陌生!

    剖析你的心

    啊呸,错了,是剖析设计图。心有啥好剖析的🙄

    627d3a9a5d3582969855bd2c1eb0beaa.png

    简简单单的设计图,那让我们来分析一下折线图的细节在哪里:

    1. 图例。今日、昨日、历史最高。位置在左侧。图标颜色为渐变色,高度大致2px。
    2. Y坐标轴。字体大致为10px,紧贴坐标轴线。
    3. X坐标轴最小值不显示。
    4. 折线图为区域显示,并显示渐变色从左至右。
    5. 折现同样为渐变色,从左至右。
    6. 分割线为虚线且有颜色。

    绘制图形

    基础的图形生成我就不再复述了,不会的同学可以看我的系列第一篇手把手教你玩转Echarts(一),这里我就继续讲配置了。

    图例

    f750bcc31b223b03ae0b826544ec0b8d.png

    legend: {    right: "3%",    top: "5%",    textStyle: {      color: colors[3],      fontSize: 8    },    itemWidth: 15,  // 图例标记的图形宽度    itemHeight: 3,  // 图例标记的图形高度    icon: "rect",   // 图例形状为方形    data: ["今日", "昨日", "历史最高"]  // 图例的数据数组},

    Y坐标轴

    yAxis: [{  type: "value",  axisLine: {       // 坐标轴线的配置    show: false,     lineStyle: {    // 轴线样式      color: colors[3]    }  },  splitLine: {      // y轴分割线配置    show: true,    lineStyle: {    // 分割线样式      type: 'dashed',   // 虚线      color: '#1e47697d'    }  },  axisTick: {       // 轴线上的刻度线配置    show: false  },  axisLabel: {    fontSize: 8,    formatter: v => {      return v >= 1000 ? v / 1000 + "k" : v;    }  }}],
    微说下axisLabel.formatter,其实这里很灵活,支持字符串模板和回调函数两种形式,可以是 string 或者 Function .其实是对刻度值的一个格式化。官方例子在这里

    X坐标轴

    xAxis: [    {      type: "category",      boundaryGap: false,      axisLine: {        lineStyle: {          color: colors[3]        }      },      axisLabel: {      // 坐标轴刻度设置        fontSize: 8,        margin: 4,      // 距离坐标轴的距离      },      axisTick: {       // 是否显示刻度        show: false      },      data: []          // 数据数组,可以异步获取赋值    }],

    渐变色

    1.先引入echarts

    import echarts from "echarts";

    2.定义色彩数组,也就是取色盘。

    const colors = [  new echarts.graphic.LinearGradient(0, 0, 1, 0, [  // 四个位置依次为左、下、右、上, 为逆时针。所以这里为横向渐变    {      offset: 0,      color: "#504DFF"    },    {      offset: 1,      color: "#91E6FF"    }  ]),  "#A2C6E0",  "#1e47697d"];

    3.配置series

      // ...  series: [    {      name: "今日",         // 系列名称,用于tooltip的显示, 与legend的data是相对应的      type: "line",         // 类型,是折线还是柱子还是其他的      // stack: "总量",     // 是否显示图形堆叠      color: colors[0],     // 这里是指对应折线`line`的颜色      areaStyle: {        opacity: ".3",        color: colors[0]    // 一个颜色数组中的某个值      },      symbol: "none",       // 标记的图形      smooth: false,        // 是否平滑曲线显示      data: [120, 132, 101, 134, 90, 230, 210] // 对应x轴上的value值    },    // ...  ]

    完整配置

    export default {  inject: ['queryD'],  data() {    return {      option: {...option},      timer: null    };  },  mounted() {    this.initChart();    this.getVolumn();    window.addEventListener("resize", this.initChart);    this.timer = setInterval(this.getVolumn, this.$store.state.demo.time)  },  methods: {    initChart() {      let myChart = echarts.init(document.getElementById("hourTrend"));      myChart.setOption(this.option);      myChart.resize();    },    async getVolumn() {      try {        const res = await this.$axios.post("/api/weightHourInfo", JSON.parse(this.queryD));        // 这段代码如果有可优化的地方,请告知。反正我也不会承认自己菜的! 🤭        if (res.data && res.data.data) {          const arr = res.data.data;          this.option.xAxis[0].data = [];          this.option.series[0].data = [];          this.option.series[1].data = [];          this.option.series[2].data = [];          arr.forEach(el => {            this.option.xAxis[0].data.push(el.hour);            this.option.series[0].data.push(el.chargeableWeight);            this.option.series[1].data.push(el.chargeableWeightYest);            this.option.series[2].data.push(el.chargeableWeight9);          });          this.initChart();        }      } finally {      }    }  },  destroyed() {    window.removeEventListener("resize", this.initChart);    clearInterval(this.timer)  }};

    小结

    这里不清楚大家是否有仔细看里面的配置,其实都有很多的相似点,比如
    x轴、y轴都可以设置 nameaxisLineaxisLabelaxisTickcolor 等等,这些都是有规律可循的,然后根据不同的类型在series设置不同的个性化配置。

    写在最后

    文笔垃圾,也没有觉得自己很厉害。都是基础的文章,写给自己的,也给一些么有接触过的同学一点方向。当然,还是那句废话“如果对你有用的话,记得给小仙女点个赞哟”♥
    690f5bd7cd71e0fdbcac2cace5d67b35.png

    d9edb46a4642929b4c4491057739b7d9.png

    我们在虚拟的空间与你相遇,期待可以碰撞出不一样的火花

    28946158a2bc3015709c272b6877ef0a.png a640599183c2a9e4fe92e3ba35b39835.png公众号ID:前端大联盟扫码关注最新动态
    展开全文
  • ECharts,一个使用 JavaScript 实现的开源可视化库,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器(IE8/9...接下来将为大家介绍如何使用echarts制作饼状,案例的全过程:从echarts文件下载到最终页面...
    999d977bebf4710a0fb9c48cdf75adfa.png

    ECharts,一个使用 JavaScript 实现的开源可视化库,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器(IE8/9/10/11,Chrome,Firefox,Safari等)。

    底层依赖轻量级的矢量图形库 ZRender,提供直观,交互丰富,可高度个性化定制的数据可视化图表。

    接下来将为大家介绍如何使用echarts制作饼状图,案例的全过程:

    从echarts文件下载到最终页面的展示,都会为大家一一展示,跟着我们的步骤,让大家轻松制作echarts

    1. 【下载echarts文件】

    下载网址:https://www.echartsjs.com/download.html

    7696174c443b4015f7d91c5fb82eb302.png

    或公众号回复“echarts文本”

    2. 官方提供了API和配置项查找方式等文档

    1)在echarts官网,点击顶部菜单【文档】,在下拉菜单中点击【配置项手册】

    2)在“配置项手册”页面,有各种图形的详细配置项与使用方式介绍

    3)当需要使用某种图形,又不知道有哪些属性可以使用时,可以在此页面找到使用方式

    3. 官方实例使用方式

    1)在echarts官网,点击顶部菜单的【实例】,在下拉菜单中点击【官方实例】

    2)在左侧菜单是echarts支持的各种类型的图表,例如:折线图、柱状图、饼图、散点图、地图、K线图等等

    3)点击左侧菜单的类型,如饼图,在右侧会显示各种饼图实例,按照实际需要,点击对应图形即可进入明细页

    4)在具体图形的明细页,左侧是echarts图形的js配置项,右侧是运行效果展示,可以修改左侧配置,点击【运行】即可实时看到效果

    45782651dc30adf924acb0d355ea6622.png

    在左侧选项中,选择一个数据图表的类型

    4. 创建如下结构的测试页面(以饼图为例演示)

    1) 把下载echarts的文件和html、css文件放到项目中。

    为了方便大家观看,并没有按照项目层次结构进行分类。把所有不同类型的文件放到了一起。

    2)创建项目文件夹,如下结构的测试文件

    9c6c66715047e4b1510100678b895dea.png

    5. 在echart-lovo.html文件中添加饼图的占位dom,并将echarts.js和echarts-lovo.js文件引用到页面中。

    206aaf80fae56a44f6fdc82563a21451.png

    6. 设置DOM节点尺寸

    39131951f9995fb0339900adde3606d5.png

    7. 渲染echarts饼状图

    1)将上面第3步中的饼图的“坐标轴刻度与标签对齐”详细界面左侧的js代码复制到EchartsBar页面

    2)将复制的js与当前页面关联

    3)为了在一个图中显示完整,此处调整了js的格式,因此看起来格式稍微与复制的有一点不一样

    4)实际项目中:按照上面第2步中的各个配置项修改为实际项目需要的样子即可

    f994fb5eda16e040e0b775ebf2f3ceef.png

    8. echarts默认饼图运行效果如下(直接使用谷歌浏览器(Chrome)打开echarts-lovo.html文件即可运行)

    123b3a45418eaa9746fa069e64ba9d6d.gif

    以上就是今天的分享啦~

    如果大家有问题或者想了解更多的

    技术干货可以私信发送【微信】加朗妹儿微信哟~

    展开全文
  • 想多了,从上中,还不能看出数据大小的明显差异,但到了测试环境,由于数据的差异过大,有的是个数级别的,有的是百万级别的,结果就导致了那些个数据较小的柱子基本看不出来,高度太低(因为echarts是根据数据的...
    首先介绍下背景:最近,接到一个任务,将数据可视化展示出来。项目是基于Vue的,开搞呗,安装echarts库。。。按照官方的说明文档,开始实现,效果如下:

    9e8c5916244df9d71ac933115eed96ca.png看着好像也没啥问题。

    想多了,从上图中,还不能看出数据大小的明显差异,但到了测试环境,由于数据的差异过大,有的是个数级别的,有的是百万级别的,结果就导致了那些个数据较小的柱子基本看不出来,高度太低(因为echarts是根据数据的大小分配高度的)。没办法,查了一圈官方文档也没啥眉目,就百度了下,看到了 “数据映射”关键词,开始动手实现第一步:先将y轴等分成几份(这里是5等分),然后设置最小值(这里设置成0),由于数据是接口返回的,这里最大值不设置,由库自己定,然后自定义y轴的刻度标签显示:
    yAxis: {  type: 'value',  min: 0,  splitLine: {    show: false  },  interval: this.interval,  axisLabel: {    formatter: (v, ix) => {      if (this.max <= this.boundary) {        return v      } else {        let vl        switch (ix) {          case 0:            vl = this.ylabel[0]            break          case 1:            vl = this.ylabel[1]            break          case 2:            vl = this.ylabel[2]            break          case 3:            vl = this.ylabel[3]            break          case 4:            vl = this.ylabel[4]            break          case 5:            vl = this.ylabel[5]            break        }        return vl      }    }  }}

    interval是强制设置坐标轴分割间隔,因为我是五等分y轴,所以这里的interval值是0.2倍最大值(最大值在第二步中会获取并存在data中),这里的刻度值我是按照[0,10,0.1max,0.2max,0.5max,max]设置,需要说明的是,这里的刻度标签仅仅是展示变了,实际上其代表的值没变,所以需要数据映射。

    第二步:y轴设置好了之后,就开始关键的数据映射了,简单理解就是将原始数据通过计算变成可以分布在处理过的y轴上的数据,
    // 数据映射处理if (this.max > this.boundary) {  drt = rt.map(el => {    return el.map((elv, elix) => {      if (elix == 0) {        return elv      } else if (elv >= this.ylabel[0] && elv <= this.ylabel[1]) {        return (elv / this.ylabel[1]) * this.interval      } else if (elv > this.ylabel[1] && elv <= this.ylabel[2]) {        return (elv / this.ylabel[2]) * this.interval + this.interval      } else if (elv > this.ylabel[2] && elv <= this.ylabel[3]) {        return (elv / this.ylabel[3]) * this.interval + this.interval * 2      } else if (elv > this.ylabel[3] && elv <= this.ylabel[4]) {        return (elv / this.ylabel[4]) * this.interval + this.interval * 3      } else {        return (elv / this.ylabel[5]) * this.interval + this.interval * 4      }    })  })  return drt}

    这里要注意保存处理前的数据,即实际数据,到此,图表即可满足需求

    0f4da34e4891e8bfb0b9498836bab550.png

    和之前的对比,可以看出,数值较小时,也能明显展示,不足的是,鼠标放在柱子上的提示框会展示处理之后的数据,即非实际数据,所以我们需要将提示框展示的数据处理下。第三步:设置tooltip
    tooltip: {  formatter: params => {    if (this.max <= this.boundary) {      return `${params.seriesName}${params.name}:${params.data[params.seriesIndex + 1]}`    } else {      const va = this.od[params.dataIndex][params.seriesIndex + 1]      return `${params.seriesName}${params.name}:${va}`    }  }}

    这里使用之前保存的原始数据,这样就不用因为反计算导致精度有差异了。

    搞定!
    展开全文
  • 65岁不同性别人群中静坐时长和血胆固醇水平的关系,分别招募50名男性和女性(gender)询问其每天静坐时长(time,分钟),并检测其血液中胆固醇水平(cholesterol, mmol/L),部分数据如1。研究者该如何绘图展示...
  • 网址:https://www.echartsjs.com/zh/tutorial.html#5%20%E5%88%86%E9%92%9F%E4%B8%8A%E6%89%8B%20ECharts五分钟上手 基本配置1.矩形参数<!DOCTYPE html> <html lang="en"> <head> <meta ...
  • 一、vue引入echarts的步骤第一步:下载echarts文件npm install echarts第二步:在script中引入echartsimport echarts from "echarts";第三步:准备一个具备大小的DOM容器<第四步:初始化echarts实例对象mounted第...
  • 点击右上方红色按钮关注“web秀”,让你真正秀起来前言前面有文章,讲述了Vue中封装Echarts组件,但都是直接上代码,没有具体对代码进行讲述。...如何隐藏坐标轴Echarts中options对象有xAxis、y...
  • Echarts 是最常用的前端数据展示库,提供了常规的折线图、柱状图、散点图、饼图、K线图,用于统计的盒形图,用于地理数据可视化的地图、热力图、线图,用于关系数据可视化的关系图、treemap、旭日图,多维数据可视化...
  • 茫茫人海中与你相遇相信未来的你不会很差作者:婷酱Yaaa来源:...之前写过移动端用过一两次echarts, 不过都是看官方文档配置硬凑出来的,比较花时间。这次也是因为换新工作了,公司要求三天出一个大屏可视化...
  • 问题先看一下正常的情况再看一下显示不全的情况所有的数据都是从后台取的,也就是说动态变化的,一开始的时候数据量不大不会出现问题,后面y轴的值越来越大的时候就出现了这个显示不全的情况。分析先贴一下页面代码...
  • echarts 折线图 data数据没有与y轴刻度一一对应 如图 解决方法: 将series中的stack 注释掉 stack数据堆叠,同个类目轴上系列配置相同的stack值后,后一个系列的值会在前一个系列的值上相加。 查看stack链接...
  • ECharts 解决双Y轴刻度不一致问题

    千次阅读 2020-12-20 18:01:14
    若最大最小值固定,直接初始化设置option的yAxis的min和max属性值即可;假设已知固定最大最小值...情景二若最大最小值不固定,而数据类型一致,即:双Y轴对应数据的数量级一致。添加一个JS处理函数即可。function se...
  • 一、echarts简介1.1图表工具应用场景:网页工具:百度echarts highCharts学习:柱状图(条形图) 折线图 饼状图 地图 (数据交互)1.2 echarts点击下载1.下载echarts.js文件 官网下载 或者bootCDN下载2.写基本结构3.js...
  • 1、背景前段时间公司有个需求,需要在一个图表中展示两条折线,并且绘制出两条线的交点。为了满足需求大哥的需求,我也是着实想了有一会。下面我就把具体的实现过程给大家展示一下。1.1、ECharts 简介个人很喜欢...
  • echarts折线图百分比作为y轴刻度

    千次阅读 2020-08-15 14:57:54
    echarts折线图百分比作为y轴刻度echarts百分比作为y轴刻度代码配置折线图效果echarts线上编辑运行链接 echarts百分比作为y轴刻度 代码配置 option = { title: { text: '堆叠区域图' }, tooltip : { ...
  • 在没发现 ECharts 这款神器的时候,之前所做的数据统计只能自个纯手写,倒也是可以实现,只不过特别的费时。后来无意中在网上瞄到 ECharts 这款专门用来生成数据图表的插件,便尝试了一下,那感觉真的不要太爽!...
  • EChartsy坐标轴刻度的属性

    万次阅读 2020-12-21 07:12:17
    坐标轴刻度作为直角坐标系中重要的组成部分,我们需要学会合理的设置坐标轴的刻度,本节列举了一些 EChartsy 轴刻度的一些属性设置。如果您还不知道如何显示坐标轴刻度,不晓得怎么控制 y 轴刻度间隔,那么,本...
  • Echarts——实现折线图Y轴不等距百分比(最终解决方案)Echarts——实现折线图Y轴不等距百分比(最终解决方案)Echarts——实现折线图Y轴不等距百分比(最终解决方案)出现背景解决思路??最近公司有一个需求,主要是想展示...
  • 一、问题:刻度值与实际值不匹配 二、解决方案:去掉 stack: ‘Total’ 属性
  • 之前我们介绍过饼图和折线图,这次来讲讲另一个常用的图叫折线图折线图很适合用于表示数据的变化趋势,下面介绍几种常用的折线图制作及美化方法。1. 分段式折线图(1)选择一组数据并添加3列辅助列(需要几种颜色...
  • 设置EChartsy轴刻度线的样式 在上节内容中我们提到了 ECharts 中 y 轴刻度线样式的设置,那么在本节我们就来详细介绍一下 yAxis 中 axisTick.lineStyle 所包含的样式。 所以,在下面的内容中你会看到 y 坐标轴刻度...
  • echarts折线图y轴不从0开始

    千次阅读 2021-04-15 17:00:28
    echarts折线图默认是从0开始计算,有时候遇到统计值都波动在一定范围,不需要从0开始。 有两种方式解决: 1.设置 scale:true 2.设置min,max 这种情况是因为考虑到,折线图上会加标线markline,如果markline的值超出y...
  • ECharts是一款由百度前端技术部开发的,基于Javascript的数据可视化图表库,提供直观,生动,可交互,可个性化定制的数据可视化图表。ECharts,一个使用 JavaScript 实现的开源可视化库,可以流畅的运行在 PC 和移动...
  • 百度Echarts根据项目需要,要实现双Y轴展示柱状最终的样子是这样的最终效果实现过程中遇到的问题一开始是这个样子的(因为没有设置max min,天真的以为只要有数据,就会系统均分,万万没想到,出现左右刻度不重合...
  • ECharts关于y轴刻度调整

    千次阅读 2021-09-23 12:21:00
    修改y轴刻度之后是这样的 直接上代码 yAxis: { min:0, //取0为最小刻度 max: 100, //取100为最大刻度 min:'dataMin', //取最小值为最小刻度 max: 'dataMax', //取最大值为最大刻度 min: function(value) {/...
  • 所有的数据都是从后台取的,也就是说动态变化的,一开始的时候数据量不大不会出现问题,后面y轴的值越来越大的时候就出现了这个显示不全的情况 代码 <div id="chart-line"></div> var line...
  • 前言最近可视化浪潮越发凶猛但是有些小伙伴们就慌了,觉得自己不是很懂,或者说对里面的参数不是很清楚,所以也就印象也就很模糊那么今天严老湿就带大家好好梳理梳理思路,顺便也带大家写几个Demo首先得认识Echarts ...
  • 因为所展现的结果值是整数,而Y轴label随鼠标上下移动时,label会显示小数,所以想把label去掉,同时X轴的label想用自定义的label(数值后加上单位)。 解决方法 查看ECharts官网API的坐标轴属性设置,可以通过...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 2,044
精华内容 817
关键字:

echarts折线图y轴刻度