引入Echarts

時間 2019-11-06

標籤引入 echarts 简体版

原文原文鏈接

如何引入ecahrts，對於剛接觸這個東西的時感受和arcgis for javascript 很類似這裏就不扯別的了直接上圖javascript

首先在ecahrts官網下載ecahrts-2.2.7html
解壓，echarts-2.2.7,在此目錄下建立index.html1文件便可，頁面的內容以下，
java

<<!DOCTYPE html>
<head>
    <meta  charset="UTF-8">
    <title>ECharts</title>
</head>
<body>
    <!-- 爲ECharts準備一個具有大小（寬高）的Dom -->
    <div id="main" style="height:800px"></div> 
    <!-- ECharts單文件引入 -->
    //這個地方引入的時候必定要注意路徑
    <script src="build/dist/echarts.js "  charset="UTF-8"></script>
    <script src="build/dist/chart/bar.js"  charset="UTF-8"></script>
    <script type="text/javascript">
        // 路徑配置，這個地方必須用模塊引入的方式，老版本的能夠用引用源文件的方式，新版本會報錯required
        //undefined,因此在報錯required或者defined  is undefined的時候首先檢查文見ecahrts.js是否
        //引入正確.
        require.config({
            paths: {
                echarts: 'build/dist'
            }
        });
        
        // 使用
        require(
            [
                'echarts',
                'echarts/chart/bar' // 使用柱狀圖就加載bar模塊，按需加載
            ],
            function (ec) {
                // 基於準備好的dom，初始化echarts圖表
                var myChart = ec.init(document.getElementById('main')); 
                
                var option = {
                    tooltip: {
                        show: true
                    },
                    legend: {
                        data:['銷量']
                    },
                    xAxis : [
                        {
                            type : 'category',
                            data : ["襯衫","羊毛衫","雪紡衫","褲子","高跟鞋","襪子"]
                        }
                    ],
                    yAxis : [
                        {
                            type : 'value'
                        }
                    ],
                    series : [
                        {
                            "name":"銷量",
                            "type":"bar",
                            "data":[5, 20, 40, 10, 10, 20]
                        }
                    ]
                };
        
                // 爲echarts對象加載數據 
                myChart.setOption(option); 
            }
        );
    </script>
</body>

在遇到頁面展現中文亂碼的時候：jquery
```
（1）<script src="build/dist/echarts.js "  charset="UTF-8"></script>
```
（2）將你的js文件或者整個html文件從新編碼，修改爲utf-8無BOM編碼格式。瀏覽器

記住：在轉換後要習慣性的ctrl+s，而後清除瀏覽器緩存，刷新頁面，就不會出現中文亂碼了。
緩存

當你將靜態的html引入到項目中的時候遇到的問題：echarts

當你使用了jquyery的時候，獲取echarts須要初始化的div會這樣寫dom

 var myChart = ec.init($('#mainchart'));

這個時候必定會報錯：ui

由於此時的對象是jquery對象，不是原生的JS對象編碼
應當用下面的寫法：

var myChart = ec.init(document.getElementById('mainchart'));

此時原生的JS對象就會被識別。

3. 當出現錯誤：

這個時候必定是你要初始化的div的id寫的有問題，修改爲你須要初始化的就OK了。

1. angular6.x 引入echarts
2. Vue中引入echarts
3. angular4中引入echarts
4. Ant Design引入Echarts
5. uni-app 引入 echarts
6. angular2中引入echarts
7. mpvue中按需引入echarts
8. vue引入ECharts 並使用
9. AngularJS引入Echarts的Demo
10. vue 引入echarts 的bar3D
更多相關文章...
• Maven 引入外部依賴 - Maven教程
• SQLite 索引（Index） - SQLite教程
• YAML 入門教程
• Java Agent入門實戰（一）-Instrumentation介紹與使用

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。