Echarts中series循环添加接口数据data带自适应(源码)

已于 2022-06-16 09:31:28 修改
阅读量5k 收藏 20
点赞数 1
分类专栏： vue echarts 自适应 文章标签： 前端 vue.js javascript echarts
于 2022-03-04 17:10:59 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_49714202/article/details/123280353
版权
vue 同时被 3 个专栏收录
124 篇文章 8 订阅
订阅专栏
自适应
12 篇文章 0 订阅
订阅专栏
echarts
4 篇文章 1 订阅
订阅专栏

目录

在js中for循环添加Echarts中的series属性的主要方法：

 var series = [];
      var finishTime = [];
      for (var i = 0, len = this.newList.length; i < len; i++) {
        //  for循环语法结构 注意这个带有,
        finishTime.push(this.newList[i].finishTime); //  这里是时间获取时间数据
        series.push({
          name: this.newList[i].volume,
          type: "line",
          smooth: true,
          label: {
            normal: {
              show: true,
              position: "top",
              color: "#424242",
              fontSize: 12,
            },
          },
          data: [
            this.newList[i].open,
            this.newList[i].close,
            this.newList[i].height,
            this.newList[i].low,
            this.newList[i].avg,
          ],
        });
      }

1.首先定义变量

var series = [];
var finishTime = [];

2.根据后台查询出来的数据循环添加到变量中

 var series = [];
      var finishTime = [];
      for (var i = 0, len = this.newList.length; i < len; i++) {
        //  for循环语法结构 注意这个带有,
        //  这里是时间获取时间数据
        finishTime.push(this.newList[i].finishTime); 
        series.push({
          name: this.newList[i].volume,
          type: "line",
          smooth: true,
          label: {
            normal: {
              show: true,
              position: "top",
              color: "#424242",
              fontSize: 12,
            },
          },
          data: [
            this.newList[i].open,
            this.newList[i].close,
            this.newList[i].height,
            this.newList[i].low,
            this.newList[i].avg,
          ],
        });
      }

3.赋值到Echarts的series属性中

var option = {
        title: {
          text: "添加标题",
          subtext: "副标题",
          left: "left",
        },
        xAxis: {
          type: "category",
          // data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
          data: finishTime,                        //  1.这里是赋值获取时间数据！！！！！！！！！
        },
        yAxis: {
          type: "value",
          axisLine: {
            show: true,
          },
        },
        legend: {
          //  这个必须要有，如果需要最上面'图例'的话就加，里面也要有data不需要就删掉
          // data: finishTime,  // series里面写name这里可以注释掉，写上会提示重复渲染打印台
        },
        // series: [    //  这是初始化样子
        //   {
        //     name: 'volume',
        //     type: "line",
        //     // stack: "Total",
        //     data: [120, 132, 101, 134, 90, 230, 210],
        //   },
        // ],
        series: series, //  2.这里是赋值给series数据！！！！！！！！！！！！！！！！！！！
      };

4.源码复制编译器即可查看修改

<template>
  <div class="echart">
    <!-- 先创建一个div容器,我用的是ref,可以用id去获取容器 -->
    <div
      ref="chart1"
      id="main_basicLine main_basicLine2"
      style="width: 100%; height: 400px"
    ></div>
  </div>
</template>

 <script>
let myChart5 = null; //  这里js代表全局块引入，或者写入data,每个都要加this.myChart5
export default {
  data() {
    return {
      newList: [
        //  这个数组，我是从接口复制过来放进去的，这样容易看，小技巧~~~,若是接口就直接请求接口 this.newList = res.data 这样即可
        {
          nftTypeId: "0xd40c03b8680d4b6a4d78fc3c6f6a28c854e94a79",
          startTime: "2022-03-04T05:23:15Z",
          endTime: "2022-03-04T05:23:42Z",
          finishTime: "2022-03-04T05:24:01.051Z",
          enumKLine: 0,
          open: 60,
          close: 3220,
          height: 3295,
          low: 3220,
          avg: 357.5,
          volume: 213,
          totalPrice: 700710,
          id: "6221a271856e88c08f1cbf7e",
          objectId: {
            timestamp: 1646371441,
            machine: 8744584,
            pid: -16241,
            increment: 1884030,
            creationTime: "2022-03-04T05:24:01Z",
          },
        },
        {
          nftTypeId: "0xd40c03b8680d4b6a4d78fc3c6f6a28c854e94a79",
          startTime: "2022-03-04T05:22:06Z",
          endTime: "2022-03-04T05:22:51Z",
          finishTime: "2022-03-04T05:23:01.416Z",
          enumKLine: 0,
          open: 320,
          close: 3260,
          height: 320,
          low: 3150,
          avg: 319.5,
          volume: 56,
          totalPrice: 180840,
          id: "6221a235856e88c08f1cbf6e",
          objectId: {
            timestamp: 1646371381,
            machine: 8744584,
            pid: -16241,
            increment: 1884014,
            creationTime: "2022-03-04T05:23:01Z",
          },
        },
        {
          nftTypeId: "0xd40c03b8680d4b6a4d78fc3c6f6a28c854e94a79",
          startTime: "2022-03-04T05:21:24Z",
          endTime: "2022-03-04T05:21:30Z",
          finishTime: "2022-03-04T05:22:01.401Z",
          enumKLine: 0,
          open: 20,
          close: 200,
          height: 300,
          low: 3140,
          avg: 370,
          volume: 24,
          totalPrice: 76680,
          id: "6221a1f9856e88c08f1cbf5b",
          objectId: {
            timestamp: 1646371321,
            machine: 8744584,
            pid: -16241,
            increment: 1883995,
            creationTime: "2022-03-04T05:22:01Z",
          },
        },
        {
          nftTypeId: "0xd40c03b8680d4b6a4d78fc3c6f6a28c854e94a79",
          startTime: "2022-03-04T05:20:21Z",
          endTime: "2022-03-04T05:20:21Z",
          finishTime: "2022-03-04T05:21:01.398Z",
          enumKLine: 0,
          open: 3199,
          close: 3300,
          height: 3300,
          low: 800,
          avg: 320,
          volume: 20,
          totalPrice: 660000,
          id: "6221a1bd856e88c08f1cbf4e",
          objectId: {
            timestamp: 1646371261,
            machine: 8744584,
            pid: -16241,
            increment: 1883982,
            creationTime: "2022-03-04T05:21:01Z",
          },
        },
        {
          nftTypeId: "0xd40c03b8680d4b6a4d78fc3c6f6a28c854e94a79",
          startTime: "2022-03-04T05:19:57Z",
          endTime: "2022-03-04T05:19:57Z",
          finishTime: "2022-03-04T05:20:02.057Z",
          enumKLine: 0,
          open: 98,
          close: 199,
          height: 5199,
          low: 699,
          avg: 99,
          volume: 3,
          totalPrice: 9597,
          id: "6221a182856e88c08f1cbf42",
          objectId: {
            timestamp: 1646371202,
            machine: 8744584,
            pid: -16241,
            increment: 1883970,
            creationTime: "2022-03-04T05:20:02Z",
          },
        },
      ],
    };
  },
  props: ["chartData"],
  mounted() {
    //获取div容器
    let chart1 = this.$refs.chart1;
    myChart5 = this.$echarts.init(chart1);
    //监听窗口的变化，不想屏幕自适应可以不写
    window.addEventListener("resize", function () {
      myChart5.resize();
    });

    this.drawLine();
  },
  methods: {
    drawLine() {
      var series = [];
      var finishTime = [];
      for (var i = 0, len = this.newList.length; i < len; i++) {
        //  for循环语法结构 注意这个带有,
        finishTime.push(this.newList[i].finishTime); //  这里是时间获取时间数据
        series.push({
          name: this.newList[i].volume,
          type: "line",
          smooth: true,
          data: [
            this.newList[i].open,
            this.newList[i].close,
            this.newList[i].height,
            this.newList[i].low,
            this.newList[i].avg,
          ],
        });
      }

      var option = {
        title: {
          text: "添加标题",
          subtext: "副标题",
          left: "left",
        },
        xAxis: {
          type: "category",
          // data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
          data: finishTime,                        //  1.这里是赋值获取时间数据！！！！！！！！！
        },
        yAxis: {
          type: "value",
          axisLine: {
            show: true,
          },
        },
        legend: {
          //  这个必须要有，如果需要最上面'图例'的话就加，里面也要有data不需要就删掉
          // data: finishTime,  // series里面写name这里可以注释掉，写上会提示重复渲染打印台
        },
        // series: [    //  这是初始化样子
        //   {
        //     name: 'volume',
        //     type: "line",
        //     // stack: "Total",
        //     data: [120, 132, 101, 134, 90, 230, 210],
        //   },
        // ],
        series: series, //  2.这里是赋值给series数据！！！！！！！！！！！！！！！！！！！
      };
      // 使用刚指定的配置项和数据显示图表。
      //防止越界，重绘canvas
      window.onresize = myChart5.resize;
      myChart5.setOption(option);
    },
  },
};
</script>

<style scoped>
</style>

5.效果如下图

在这里插入图片描述

参考:https://www.cnblogs.com/chuanqi1995/p/11387423.html

感觉文章好的话记得点个心心和关注，有错的地方麻烦在评论区指正一下，多谢！！！

MFG_666
关注
  • 1
    点赞
  • 踩
  • 20
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Echarts 配置项 series 中的 data 是多维度
虎康的博客
03-06 1091
首先是 Y 轴的格式需要改变，之前是value，但value会导致数据变为这种情况。在绘制折线图时，通常我们的 series 中的 data 数据是这样的格式。如下图数据格式所示，现要求按照该格式进行绘制折线图。但是给定的格式是如下的这种，我们就需要进行一些变换。因此需要将Y轴格式改为如下，效果就出来了。
echarts动态加载series中的data
05-03
echarts动态加载series中的data echarts动态加载series中的data
Echarts 循环实现动态加载series数据项
Beatingworldline的博客
02-07 1470
var json={}; for(var i=0;i<list.length;i++){//遍历查询结果list集 if(list[i][mapPojo.PRODUCE_TIME.pos].substr(0,timecount)==PRODUCE_TIME[j]){//相同时间跨度的不同区域数据处理 缺陷个数和面积 for(var X=0;X<DEFECT_CNAME.length;X++){ if(DEFECT_CNAME[X]==list[i][mapPojo.DEFECT_CNAME.p
echarts中的series数据如何循环显示
稻花香的博客
08-08 8819
循环压入一个数组中，在给series赋值给这个数组变量名称： var series=[]; for(var i = 0;i<json.data.length;i++){ series.push({ name: arr_name[i], type: 'line', stack: '总量', ...
关于echarts在节点显示动态数据及添加提示文本所遇到的问题
01-19
刚接触echarts不久，在使用过程中遇到了2个难点，     1、每个节点显示动态数据，这个其实可以通过配置项完成，在series数据绑定中，可以使用原本的配置项itemStyle中的标签格式化完成，如下： 代码如下，如果需要修改文字显示的样式，则需另外配置项（如font-style,font-weigth等）完成 { name: '其中：少数民族', type: 'line', data: ssmz, markPoint : { data : [ {type : 'max', name: '最大值'},
Echarts之悬浮框中的数据排序问题
12-12
Echarts非常强大，配置也非常的多，有很多细节需要深入研究。详解一下关于悬浮框中的数据排序问题         悬浮框的数据排序默认是根据series中的数据位置排序的，在我们想自定义排序时，在echarts的配置中有一个tooltip         以下为数据降序的代码：        tooltip = { trigger: 'axis', formatter: (params) => { // params为悬浮框上的全部数据 const newParams = []; let paramsData = _.sortBy(p
vue echarts 动态添加 series 数据
qq_36437172的博客
02-18 7974
何为动态添加 series 数据？由于 series 中的个数是动态的，通过接口返回的，我们需要对series 做动态处理。 处理动态 series 的数据： let result = [{"name": "大修","data": [0]},{"name": "二保","data": [101]},{"name": "事故","data": [0] }, {"name": "外修","...
关于Echarts饼图循环series里data
m0_72904826的博客
04-19 1372
第二步：直接创建 此处color我使用的是渐变色 legend的设置是为了显示上面数据下面昵称的需求。第一步：先将需要循环的series置空 循环你想要的数组(ps:此处我的数组为ytgsList)title里是是在环形中央显示文字信息 series里的data直接用上面循环里做的就好了。此处为效果图 根据接口返回的数据进行循环。第三步：创建并设置其自适应窗口大小。
echarts图表不显示_Echarts入门
weixin_39533280的博客
11-29 2084
打开“Apache ECharts (incubating)”官网，下载下载echarts.js文件。准备个web工具，HBuilder.exe，新建web项目，将下载的echarts.js文件，复制过来。开始体验画图。参照官网案例，可复制案例代码，做更改，实现快速作图。<!DOCTYPE html><html> <head> <meta charset...
echarts_series总结
热门推荐
王轩的博客
12-20 3万+
echarts_series总结 echarts官网实例 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>echarts</title> <script src="./static/echarts.min.js"></script> </head> <body> &l
echarts的series——折线图，饼图，柱状图，散点图的配置
杜永康的博客
03-22 9215
Line（折线图）：用于展示数据随时间或其他变化而变化的趋势。 Bar（柱状图）：用于展示数据的大小或数量的差异。 Scatter（散点图）：用于展示两个变量之间的关系。 Pie（饼图）：用于展示数据的占比关系。 Radar（雷达图）：用于展示多个变量之间的关系。 Map（地图）：用于展示地理位置上的数据分布。 Tree（树图）：用于展示层级结构数据的关系。 Heatmap（热力图）：用于展示数据密度分布。
Echarts图前端数据可视化展示
06-11
将百度Echarts中的option中的tooltip、legend、series等以对象的形式实现
Ajax获取到数据放入echarts里不显示的原因分析及解决办法
11-30
在做一个需要用到echarts地图的项目的时候，成功通过ajax获取到了后台提供的数据，并生成了想要的JSON串。但是，放到echarts option.series[0].data里，获取不到数据。在生成的地图上无法看到你从后台获取到的值。翻遍百度和必应，给出的答案五花八门，仍旧未解决问题，最后还是一个同事大牛给解决的，在此分享给大家。希望对大家有帮助，，，， 废话不多说，直接上码： $(function () { var data = []; function setOption(data){ var myChart = echarts.init(document.getElementB
解决echarts的多个折现数据出现坐标和值对不上的问题
10-17
主要介绍了解决echarts的多个折现数据出现坐标和值对不上的问题，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
pandas中的series数据类型详解
09-19
主要介绍了pandas中的series数据类型详解，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
python pandas中对Series数据进行轴向连接的实例
01-20
有时候我们想要的数据合并结果是数据的轴向连接，在pandas中这可以通过concat来实现。操作的对象通常是Series。 Ipython中的交互代码如下： In [17]: from pandas import Series,DataFrame In [18]: series1 = Series(range(2),index = ['a','b']) In [19]: series2 = Series(range(3),index = ['c','d','e']) In [20]: series3 = Series(range(2),index = ['f','g']) In [21]:
echarts 配置项 series 中的data 多维度
weixin_33898876的博客
12-04 2288
//系列中的数据内容数组。数组项通常为具体的数据项。 //通常来说，数据用一个二维数组表示。如下，每一列被称为一个『维度』。 series: [{ data: [ // 维度X 维度Y 其他维度 ... [ 3.4, 4.5, 15, 43], [ 4.2, 2.3, 20, 91], ...
【Echarts】配置项 之 series
最新发布
Fulling的博客
07-01 4546
箱型图、箱线图，是一种用作显示一组数据分散情况资料的统计图。数图、主要用来可视化树形数据结构，是一种特殊的层次类型，具有唯一的根节点，左子树和右子树。主题河流，是一种特殊的流图, 它主要用来表示事件或主题等在一段时间内的变化。路径图，用于带有起点和终点信息的线数据的绘制，主要用于航线、路线可视化。旭日图，由多层的环形图组成，在数据结构上，内圈是外圈的父节点。直角坐标系上的散点图可以用来展示数据的 x、y 之间的关系。雷达图，主要用于表现多变量的数据，例如属性分析。关系图，用于展现节点与节点之间的关系数据。
echarts series循环添加数据
06-12
可以使用ECharts中的setOption方法来动态更新图表数据。首先，在初始化图表时，需要设置好图表的基本配置和数据结构，例如： ```javascript option = { //图表基本配置 xAxis: { type: 'category', data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] }, yAxis: { type: 'value' }, series: [{ //数据系列配置 data: [820, 932, 901, 934, 1290, 1330, 1320], type: 'line' }] }; ``` 然后，可以通过setOption方法来动态更新数据，例如： ```javascript var chart = echarts.init(document.getElementById('chart')); var data = [820, 932, 901, 934, 1290, 1330, 1320]; //循环添加数据 for(var i = 0; i < 5; i++){ data.push(Math.round(Math.random() * 1000)); } //更新数据 chart.setOption({ series: [{ data: data }] }); ``` 在上述代码中，我们通过循环添加了5个随机数据，并通过setOption方法更新了图表的数据系列。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值