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