8_Ueditor編輯器和Echarts的使用

---

簡介

---

• 本文講的內容羣是基於ASP.NET MVC的。

• 項目中經常會用到編輯器，可能大家都熟悉CKEditor，但是使用起來感覺不是很好，所以本文介紹下百度出品的UEditor。可用性和定製性都是很高的。

• 項目中也經常會用到數據的統計功能，Echarts的圖表功能很強大，也很方便使用。

• 本文只對上述2個產品做一個使用的簡單介紹，並不深入介紹如何定製。

---

步驟

---

UEidtor的使用

• 先將下載的Ueditor文件夾複製到項目中。
  

• 在需要使用編輯器的View界面

<script type="text/javascript" charset="utf-8"
        src="@Url.Content("~/ueditor/ueditor.config.js")"></script>

<script type="text/javascript" charset="utf-8"
        src="@Url.Content("~/ueditor/ueditor.all.min.js")">
</script>

<script type="text/javascript" charset="utf-8"
        src="@Url.Content("~/ueditor/lang/zh-cn/zh-cn.js")"></script>

///實例化編輯器（editor爲區域的id值）        
<script type="text/javascript">
    $(document).ready(function () {
        var ue = UE.getEditor('editor');
    });
</script>

編輯器區域

///第2行爲編輯器區域，第3行爲驗證
@Html.LabelFor(model => model.Content)
@Html.TextAreaFor(model => model.Content, new { @id = "editor" })
@Html.ValidationMessageFor(model => model.Content)

• 使用效果
  

Echarts的使用

• 將下載的Echarts解壓後，在src文件夾下面的
  
  chart文件夾以及echarts.js文件導入到項目中，我放置在了Scripts中。

• 在需要圖表的View中引入

<script src="@Url.Content("~/Scripts/echarts.js")"></script>

• 定義圖表區域,此處定義了一個柱狀圖。

<script type="text/javascript">
        /// 路徑配置，這裏要配置你chart文件夾所在的路徑
        require.config({
            paths: {
                echarts: '@Url.Content("~/Scripts")'
            }
        });

        // 使用
        require(
            [
                'echarts',
                'echarts/chart/bar' // 使用柱狀圖就加載bar模塊，按需加載
            ],
            function (ec) {
                // 基於準備好的dom，初始化echarts圖表
                var myChart = ec.init(document.getElementById('mychart'));

                var option = {
                    tooltip: {
                        show: true
                    },
                    legend: {
                        data: ['數量']
                    },
                    xAxis: [
                        {
                            type: 'category',
                            data: ["論文數", "項目數", "專利數", "專著數", "指導學生獲獎數", "軟件著作權數"]
                        }
                    ],
                    yAxis: [
                        {
                            type: 'value'
                        }
                    ],
                    series: [
                        {
                            "name": "數量",
                            "type": "bar",
                            "data": [@Html.DisplayFor(model => model.Papers.Count),@Html.DisplayFor(model => model.Projects.Count),@Html.DisplayFor(model => model.Patents.Count), @Html.DisplayFor(model => model.TextBooks.Count), @Html.DisplayFor(model => model.TeachingPrizes.Count), @Html.DisplayFor(model => model.CopyRights.Count)]
                        }
                    ]
                };
                myChart.setOption(option);
            }
        );
    </script>

圖表的數據是從數據庫中取出，通過業務邏輯層處理，到達action 傳遞到View界面顯示的。

• 顯示效果
  

---

小結

---

• 小結
  本文介紹了編輯器工具UEditor的簡單使用Demo和Echarts圖表統計工具的介紹和使用Demo。
• 參考資料
  
  • Echarts首頁
  • Echarts實例
  • Echarts文檔
  • Ueditor網上示例