引入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介绍与使用