Echarts动态数据折线图

1.添加引用：

 <script src="~/Scripts/jquery-3.3.1.js"></script><script src="~/incubator-echarts-master/dist/echarts.min.js"></script>

2.添加html区域

 <div id="main" style="width:100%;height:500px;"></div>

3.添加后台数据接口原本想做成每次返回多个数据的后来改成了一个

 [HttpPost]public ActionResult AsycData() {var result = GetNums();return Json(result, JsonRequestBehavior.AllowGet);}public List<int> GetNums() {List<int> result = new List<int>();Hashtable hashtable = new Hashtable();Random rm = new Random();int RmNum = 1;for (int i = 0; hashtable.Count < RmNum; i++){int nValue = rm.Next(100);if (!hashtable.ContainsValue(nValue) && nValue != 0){hashtable.Add(nValue, nValue);result.Add(nValue);}}return result;}

4.建立的window.onload把js操作放里面这步很容易忘记

5.初始化Echarts

 var myChart = echarts.init(document.getElementById('main'));

6.初始化option 有一些参数写了注释可以简单了解下

 var option = {title: {text: 'echart练习'},tooltip: {},legend: {//显示标记 也就是一般左上角的提示哪个颜色是什么data: ['销量']},dataZoom: [{startValue:new Date()}, {type: 'inside',show: true,filterMode: "filter"}],xAxis: {data: [],//类目数据 柱状图每个数据柱的名称offset: 0, //偏移量 多个y轴的时候用position: "bottom", //x轴位置type: "time",//设置x轴的类型 value数值轴 category类目轴 time时间轴 log对数轴name: "时间",//坐标轴的名称nameLocation: "end", //坐标轴名称显示位置。start middle center endnameGap: 15, //坐标轴名称与轴线之间的距离。nameRotate: null,//坐标轴名字旋转，角度值。min: null,//坐标刻度的最小值max: null,//坐标刻度的最大值minInterval: 1 //自动计算的坐标轴最小间隔大小。 设置为1保证为整数},yAxis: {show: true, //是否显示y轴position: "left",//设置y轴的位置type: "value",//设置y轴的类型 value数值轴 category类目轴 time时间轴 log对数轴},series: [{name: '销量',type: 'line',//设置绘制的图表类型 bar柱状图 line折线图 pie饼图 scatter散点图 effectScatter带涟漪效果的散点图（一般用于突出显示） radar雷达图 tree树图 treemap层级树图 sunburst旭日图 boxplot箱型图 candlestick k线图 heatmap热力图 map地图 parallel平行坐标系 graph关系图 sankey桑基图 funnel漏斗图（倒立金字塔）gauge仪表盘 pictorialBar象形柱图 themeRiver主题河流 custom自定义data: []}]};

7.传入参数

 myChart.setOption(option); //这个以后会经常用到

8.设置循环获取数据并且放入折线图

 this.setInterval(function () {$.post("/Home/AsycData", {}, function (data) {console.log(data[0]);var data0 = option.series[0].data;var x = [new Date(), data[0]];data0.push({ name: x[0], value: x });myChart.setOption({ series: option.series });})}, 5000)

9.这样就可以使用了

Echarts动态数据折线图相关推荐

Echarts使用及动态加载图表数据折线图X轴数据动态加载
Echarts简介 echarts,缩写来自Enterprise Charts,商业级数据图表,一个纯Javascript的图表库,来自百度...我想应该够简洁了使用Echarts 目前,就官网的文 ...
Echarts 学习系列(3)-Echarts动态数据交互
写在前面上一小节,我们总结了折线(面积)图.柱状(条形)图.饼(圆环)图类型的图表. 但是,都是静态的.接下来的,这一小节,总结的是Echarts 动态数据的交换. 前置条件开发环境:win10 ...
echarts动态散点图+正弦图背景
echarts动态散点图+正弦图背景: 动态效果视频:动态效果视频链接代码: // 正弦波背景 function func (x) {x /= 57.2;return Math.sin(x) * 4 ...
【Echart多场景示例应用】Echarts柱状图、折线图、饼图、雷达图等完整示例。 echarts主标题和副标题的位置、样式等设置（已解决附源码）
**[写在前面]**前端时间做一个echarts的页面调整,临时客户要求加一个参数(总容量)显示,当时我就想用个默认的副标题吧,哪知客户和我说得紧跟在主标题后面,于是乎我就根据设置做了一个调整,我也是 ...
echarts type:line 折线图折线折点样式
echarts type:line 折线图折线折点样式 series: [{name: '课时',type: 'line',data: [23,60,20,36,23,85],label:{ //折 ...
直播app源代码，echarts 柱状图，折线图互转实例
直播app源代码,echarts 柱状图,折线图互转实例的相关代码 function initDayChart(){var myChart = echarts.init(document.getEle ...
微信小程序：wx-charts动态绘制折线图
微信小程序:wx-charts动态绘制折线图 wx-charts是基于 Canvas的微信小程序主流图表工具,体积小易操作,支持多种图表的绘制,这里主要就动态绘制折线图做出详解,所谓动态,指的是表格的 ...
matlab画多组数据折线图_使用Origin绘制不相关多组数据折线图的方法
原标题:使用Origin绘制不相关多组数据折线图的方法由于不知道这样的标题是否能表达清楚我的意思,我再详细描述一下这几天遇到的问题:首先,想画一个折线图,但又不是普通的y=f(x)这样的图,而是由多 ...
画【Python折线图】的一百个学习报告(三、自动生成单一数据折线图)
画[Python折线图]的一百个学习报告(三.自动生成单一数据折线图) 目录画[Python折线图]的一百个学习报告(三.自动生成单一数据折线图) 前言学习环境探究目标分析过程实践过程成果 ...

Echarts动态数据折线图

Echarts动态数据折线图相关推荐

最新文章

热门文章