public ActionResult ShowChart() { return View(); }
<div id="main" style="width:600px;height:400px;"></div> <script src="~/Scripts/echarts.js"></script> <script> // 基於准備好的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>
public ActionResult ShowChart() { List<string> productList = new List<string> { "襯衫","羊毛衫","雪紡衫","褲子","高跟鞋","襪子" }; ViewBag.productList =Newtonsoft.Json.JsonConvert.SerializeObject(productList); return View(); }
@ViewBag.productList <div id="main" style="width:600px;height:400px;"></div> <script src="~/Scripts/echarts.js"></script> <script> alert('@ViewBag.productList'); // 基於准備好的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>
@ViewBag.productList <div id="main" style="width:600px;height:400px;"></div> <script src="~/Scripts/jquery-1.10.2.min.js"></script> <script src="~/Scripts/echarts.js"></script> <script> alert('@ViewBag.productList'); var dataContent = $.parseJSON('@(new HtmlString(ViewBag.productList))'); alert(dataContent); // 基於准備好的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>
@ViewBag.productList <div id="main" style="width:600px;height:400px;"></div> <script src="~/Scripts/jquery-1.10.2.min.js"></script> <script src="~/Scripts/echarts.js"></script> <script> alert('@ViewBag.productList'); var dataContent = $.parseJSON('@(new HtmlString(ViewBag.productList))'); alert(dataContent); // 基於准備好的dom,初始化echarts實例 var myChart = echarts.init(document.getElementById('main')); // 指定圖表的配置項和數據 var option = { title: { text: 'ECharts 入門示例' }, tooltip: {}, legend: { data: ['銷量'] }, xAxis: { data: dataContent //["襯衫", "羊毛衫", "雪紡衫", "褲子", "高跟鞋", "襪子"] }, yAxis: {}, series: [{ name: '銷量', type: 'bar', data: [5, 20, 36, 10, 10, 20] }] }; // 使用剛指定的配置項和數據顯示圖表。 myChart.setOption(option); </script>