一般來說,因有所需,方有所求。最近項目中有這方面的需求,用着感覺不錯。特此記錄!此處僅是一個簡單的demo。官網地址:http://echarts.baidu.com/,相關文檔、插件都有。
1.js部分。
<script src="/Contents/js/echarts.js"></script> <script type="text/javascript"> //指定圖標的配置和數據 $(document).ready(function () { //var datas = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun1']; var option = { //color: ['#3398DB'],//當包含多條時,顏色注釋,由系統自定義 title: { text: 'ECharts 數據統計' }, tooltip: { trigger: 'axis', axisPointer: { // 坐標軸指示器,坐標軸觸發有效 type: 'shadow' // 默認為直線,可選為:'line' | 'shadow' } }, toolbox: { feature: { saveAsImage: {} //下載 } }, grid: { left: '3%', right: '4%', bottom: '4%', containLabel: true }, legend://說明 { data: ['銷量', '測試'] }, xAxis: { type: 'category', //data: datas, boundaryGap: false,//是否以原點為起點 axisTick: { alignWithLabel: true } }, yAxis: { type: 'value' }, series: [{ name: '訪問量', type: 'line',//line 折線圖 bar 柱狀圖 //smooth: false, //是否為曲線 //areaStyle: {},//是否包含面積 barwidth: '10%', //data: [10, 52, 200, 334, 390, 330, 220] }] }; //初始化echarts實例 var testdata = [20, 42, 310, 334, 390, 90, 120] var myChart = echarts.init(document.getElementById("EChart")); myChart.setOption(option); $.post("/Category/Category/GetData").done(function (data) //使用制定的配置項和數據顯示圖表 { console.dir(data); myChart.setOption(option); // 填入數據 myChart.setOption({ xAxis: { data: data.category //X軸節點 }, series: [{ name: '銷量', type: 'line', barwidth: '10%', data: data.data }, { name: '測試', type: 'line', data: testdata }] }); }); }) </script>
2.html部分,用來放置圖表。
<body> <div id="EChart" style="width:600px; height: 400px;"></div> </body>
3.方法
[HttpPost] public JsonResult GetData() { List<string> category = new List<string>{ "Mo", "Tu", "We", "Th", "Fr", "Sa", "Su" }; List<int> data = new List<int>{ 10, 52, 200, 334, 390, 330, 220 }; return Json(new { category=category,data=data}); }
4.最終效果圖如下