Echarts 一個開源圖表設計工具


    一般來說,因有所需,方有所求。最近項目中有這方面的需求,用着感覺不錯。特此記錄!此處僅是一個簡單的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.最終效果圖如下

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM