EChars3.0学习(一)

一、引入Echarts

ECharts 3 开始不再强制使用 AMD 的方式按需引入,代码里也不再内置 AMD 加载器。因此引入方式简单了很多,只需要像普通的 JavaScript 库一样用 script 标签引入。


<html> 
<header>
    <meta charset="utf-8">
    
    <script src="echarts.min.js">
 </header> 
 html>

二、绘制

在绘制前需要准备一个dom容器

<body>
    
    <div id="main" style="width: 600px;height:400px;">div>
body>

然后就可以通过 echarts.init 方法初始化一个 echarts 实例并通过 setOption 方法生成一个简单的柱状图,下面是完整代码


<html>
<head>
    <meta charset="utf-8">
    <title>EChartstitle>
    
    <script src="echarts.js">script>
head>
<body>
    
    <div id="main" style="width: 600px;height:400px;">div>
    <script type="text/javascript">
        // 基于准备好的dom,初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));

        // 指定图表的配置项和数据
        var option = {
            title: {
                text: 'ECharts 入门示例'
            },
            tooltip: {},
            legend: {
                data:['销量']
            },
            xAxis: {
                data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
            },
            yAxis: {},
            series: [{
                name: '销量',
                type: 'bar',
                data: [5, 20, 36, 10, 10, 20]
            }]
        };

        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    script>
body>
html>

这样你的第一个图表就诞生了!

EChars3.0学习(一)_第1张图片

三、绘制地图

上面图表例子是Echarts官网提供的例子,比较简单。下面绘制一个地图
需要引入三个文件:

    <script src="js/echarts.js">script>
    <script src="js/jquery.js">script>
    <script src="js/world.js">script>

world.js是中国地图数据,在Echarts官网有提供下载。
EChars3.0学习(一)_第2张图片
Echarts官网提供了两种地图数据类型,一种是js,一种是json。这里先以js引入为例

  var chart = echarts.init(document.getElementById('main'));
    chart.setOption({
        series: [{
            type: 'map',
            map: 'world'
        }]
    });

完整代码为


<html>
<head>
    <meta charset="utf-8">
    <title>EChartstitle>
    
    <script src="js/echarts.js">script>
    <script src="js/jquery.js">script>
    <script src="js/world.js">script>

head>
<body>
    
    <div id="main" style="width: 1600px;height:1000px;">div>
    <script type="text/javascript">
    <script src="js/echarts.js">script>
    <script src="js/jquery.js">script>
    <script src="js/china.js">script>

head>
<body>
    
    <div id="main" style="width: 1600px;height:1000px;">div>
    <script type="text/javascript">
                    

你可能感兴趣的:(Echarts)