文档章节

Echarts中series循环添加数据

o
 osc_wws45aot
发布于 2019/08/21 10:53
字数 415
阅读 9
收藏 0

精选30+云产品,助力企业轻松上云!>>>

在js中for循环添加Echarts中的series属性:

for (var i = 0, size = data.dataList.length; i < size; i++) {
  legendData.push(data.dataList[i].sjjc);
  series.push({
    name: data.dataList[i].sjjc,
    type: 'line',
    smooth: true,
    label: {
      normal: {
        show: true,
        position: 'top',
        color: '#424242',
        fontSize: 12,
      }
    },
    data: [data.dataList[i].yf1 , data.dataList[i].yf2 , data.dataList[i].yf3 , data.dataList[i].yf4 , data.dataList[i].yf5 ,
      data.dataList[i].yf6 , data.dataList[i].yf7 , data.dataList[i].yf8 , data.dataList[i].yf9 , data.dataList[i].yf10 , 
      data.dataList[i].yf11 , data.dataList[i].yf12]
  });
}

 

1.首先定义变量

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

var series = [];
for (var i = 0, size = data.dataList.length; i < size; i++) {
  legendData.push(data.dataList[i].sjjc);
  series.push({
    name: data.dataList[i].sjjc,
    type: 'line',
    smooth: true,
    label: {
      normal: {
        show: true,
        position: 'top',
        color: '#424242',
        fontSize: 12,
      }
    },
    data: [data.dataList[i].yf1 , data.dataList[i].yf2 , data.dataList[i].yf3 , data.dataList[i].yf4 , data.dataList[i].yf5 ,
      data.dataList[i].yf6 , data.dataList[i].yf7 , data.dataList[i].yf8 , data.dataList[i].yf9 , data.dataList[i].yf10 , 
      data.dataList[i].yf11 , data.dataList[i].yf12]
  });
}

3.赋值到Echarts的series属性中

/* 第13个图表的配置--加油站年销售情况图 --折线图*/
var option13 = {
  title: [{
    //text: '2019年加油站年销售情况图',
    text: titleText,
    left: 'center',
    textStyle: {
      color: '#4c4c4c',
      fontWeight: "bold",
      fontSize: 16,
    },
    }, {
      text: '单位:(万元)',
      left: 'right',
      textStyle: {
      color: '#929292',
      fontWeight: "normal",
      fontSize: 12,
    },
  }],
  legend: {
    //data: ['中石油102', '大平五一路', '中通', '和源', '德月', '铭磊', '高桥', '大平汽贸城', '天盈', '宝光', '燕港', '顺达', '长城'],
    data: legendData,
    bottom: 0
  },
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'cross'
    },
    formatter:function(params){
      var res = params[0].name;
      for (var i = 0; i < params.length; i++) {
        res += "<br>"+params[i].marker+params[i].seriesName+":"+formatThousand2(params[i].data);
      }
      return res;
    }
  },
  dataZoom: [{
    type: 'inside',
  }],
  toolbox: {
    show: true, //是否显示工具箱
    right: 70,
    top: -8,
    //要显示的工具箱内容
    feature: {
      saveAsImage: { //保存为图片
        show: true
      },
    }
  },
  grid: {
    top: '30',
    left: '1%',
    right: '1%',
    bottom: '40',
    containLabel: true,
  },
  xAxis: [{
    data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
  }],
  yAxis: [{
    type: 'value',
    axisTick: {
      show: false,
    },
  }],
  series : series
};

 

o
粉丝 0
博文 500
码字总数 0
作品 0
私信 提问
加载中
请先登录后再评论。
[个人项目] echarts 实现数据(tooltip)自动轮播插件

前言 最近, 工作中要做类似这种的项目. 用到了百度的 echarts 这个开源的数据可视化的框架. 因为投屏项目不像PC端的WEB, 它不允许用户用鼠标键盘等交互. 有些图表只能看到各部分的占比情况,...

osc_bdhojhcu
2018/10/20
9
0
swiper 循环模式下的Echarts图展示问题小结

技术栈:vue + swiper + echarts 1.0遇到的问题 swiper开启loop循环模式,每一个slide中包含一个echarts图,使用以前通用的模式循环在echarts中使用id或者$refs获取元素初始化,出现循环的e...

osc_ctwunyqq
2019/10/09
39
0
ECharts-Java 类库 2.2.0.3 版本发布

本项目是一个供Java开发使用的ECharts的开发包,主要目的是方便在Java中构造ECharts中可能用到的全部数据结构,如完整的结构Option。Option中的数据Series,包含Bar-柱状图,Line-折线图,P...

Liuzh_533
2015/06/03
2.9K
6
ECharts 实现地图散点图上(转载)

转载来源:https://efe.baidu.com/blog/echarts-map-tutorial/ ECharts 实现地图散点图(上) 小红 2016-04-28 ECharts, 教程, 地图 ECharts 作为国内应用最广泛的前端可视化生成工具,提供了...

osc_7i8xvyz1
2019/05/31
17
0
echarts(4.0版本)

1、echarts 开发文档 :https://echarts.baidu.com/echarts2/doc/doc.html 或 https://echarts.baidu.com/option.html#series-map.type (官网)   或 https://www.w3cschool.cn/echartstu......

osc_kbyywydz
2019/01/17
3
0

没有更多内容

加载失败,请刷新页面

加载更多

百度技术沙龙第67期 百度开源专场

本文作者:HelloDeveloper 具体的产品案例,分享百度开源技术最新实践经验。目前这些项目都已经在 github/baidu 上开源。 什么是 PaddlePaddle 深度学习平台? 首先做个简单的介绍,PaddleP...

百度开发者中心
2019/07/23
0
0
Hacker News 简讯 2020-07-10

更新时间: 2020-07-10 01:15 US Supreme Court deems half of Oklahoma a Native American Reservation - (reuters.com) 美国最高法院认为俄克拉荷马州的一半是印第安人保留地 得分:131 | 评...

FalconChen
今天
26
0
OSChina 周五乱弹 —— 求求你吃了我吧,不要再玩弄食物的感情了

Osc乱弹歌单(2020)请戳(这里) 【今日歌曲】 @巴拉迪维 :张喆的单曲《陷阱 》 这首歌已经在网易找不到原唱了,不知道被哪家买了版权。#今日歌曲推荐# 《陷阱 》- 张喆 手机党少年们想听歌...

小小编辑
今天
26
1
清华陈文光教授:AI 超算基准测试的最新探索和实践。

道翰天琼认知智能平台为您揭秘新一代人工智能。 无规矩不成方圆。放在超级计算机的研发领域,没有一个大家普遍接受的算力评测指标,便难以推动超算迅猛发展。 而现在伴随着人工智能的发展,大...

jackli2020
今天
7
0
@RequestMapping, consumes 提交简单有意思的测试

getParm @GetMapping("getParm")public Result getParm(String id){ System.out.println(); return ResultFactory.success(id);} 等同于 == bodyParm @PostMapping("bodyParm......

莫库什勒
今天
25
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部