<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>ECharts</title> <!-- 引入刚刚下载的 ECharts 文件 --> <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@5.2.2/dist/echarts.min.js"></script> </head> <body> <!-- 为 ECharts 准备一个定义了宽高的 DOM --> <div id="main" style=" 600px;height:400px;"></div> <script type="text/javascript"> // 基于准备好的dom，初始化echarts实例 var myChart = echarts.init(document.getElementById('main')); // 指定图表的配置项和数据 var option = { title: { text: 'ECharts 入门示例' }, tooltip: {}, legend: { data: ['销量'] }, xAxis: { data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子'] }, yAxis: {}, series: [ { name: '销量', type: 'bar', data: [5, 20, 36, 10, 10, 20] } ] }; // 使用刚指定的配置项和数据显示图表。 myChart.setOption(option); </script> </body> </html>
<!-- THIS EXAMPLE WAS DOWNLOADED FROM https://echarts.apache.org/examples/zh/editor.html?c=bar-background&version=5.2.2 --> <!DOCTYPE html> <html style="height: 100%"> <head> <meta charset="utf-8"> </head> <body style="height: 100%; margin: 0"> <div id="container" style="height: 100%"></div> <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@5.2.2/dist/echarts.min.js"></script> <!-- Uncomment this line if you want to dataTool extension <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@5.2.2/dist/extension/dataTool.min.js"></script> --> <!-- Uncomment this line if you want to use gl extension <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts-gl@2/dist/echarts-gl.min.js"></script> --> <!-- Uncomment this line if you want to echarts-stat extension <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts-stat@latest/dist/ecStat.min.js"></script> --> <!-- Uncomment this line if you want to use map <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@5.2.2/map/js/china.js"></script> <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@5.2.2/map/js/world.js"></script> --> <!-- Uncomment these two lines if you want to use bmap extension <script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=<Your Key Here>"></script> <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@{{version}}/dist/extension/bmap.min.js"></script> --> <script type="text/javascript"> var dom = document.getElementById("container"); var myChart = echarts.init(dom); var app = {}; var option; option = { xAxis: { type: 'category', data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] }, yAxis: { type: 'value' }, series: [ { data: [120, 200, 150, 80, 70, 110, 130], type: 'bar', showBackground: true, backgroundStyle: { color: 'rgba(180, 180, 180, 0.2)' } } ] }; if (option && typeof option === 'object') { myChart.setOption(option); } </script> </body> </html>
function bindDataForECharts() { $.ajax({ url: "/Home/GetDataForEChart", type: "get", data: {}, contentType: "json", cache: false, success: function(res) { //debugger; var objs = []; var objs1 = []; //alert(res.length); //console.info(res); var jsonObj = JSON.parse(res); for (var i = 0; i < jsonObj.length; i++) { objs[i] = jsonObj[i].cust_po_id; objs1[i] = jsonObj[i].cnt; } var myChart = echarts.init(document.getElementById("main")); var option = { title: { text: "ECharts" }, tooltip: {}, legend: { data: ["销量"] }, xAxis: { data: objs // X轴数据 }, yAxis: {}, series: [ { name: "库存", type: "bar", // 图表类型，bar柱状图 data: objs1, // Y轴数据 showBackground: true, backgroundStyle: { color: "rgba(180, 180, 180, 0.2)" } } ] }; myChart.setOption(option); } }); }
/// <summary> /// 获取要绑定到EChart的数据 /// LDH @ 2021-12-14 /// </summary> /// <returns></returns> //[AcceptVerbs(HttpVerbs.Get)] [HttpGet] public ContentResult GetDataForEChart() { string jsonStr; using (var service = new CustomerPoService()) { var dt = service.GetDataForEChart(); jsonStr = JsonConvert.SerializeObject(dt); } return Content(jsonStr); }
@*ECharts*@ <div id="main" style="height: 400px; 100%;"></div>
