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 end                     nameGap: 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.这样就可以使用了