ECharts学习总结(一):ECharts的第一个图表

dwj147258

浏览: 188517 次
性别:
来自: 深圳

最近访客更多访客>>

q412378653

youyuezym

zlrzlm7454

skypiggy

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

eCharts

echarts javascript

在进行echarts图表开发之前先要到echarts官网下载echarts的库文件,我下载的是echarts-2.2.7。然后把库文件放到工程文件web目录下。接下来进行第一个图表的显示步骤如下:

1、新建一个echarts.html文件。为ECharts准备一个具备大小（宽高）的Dom。

<!DOCTYPE html>
<head>
    <meta charset="utf-8">
    <title>ECharts</title>
</head>
<body>
    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="main" style="height:400px"></div>
</body>

2、新建<script>标签引入echarts-all.js，引入图表文件。

<!DOCTYPE html>
<head>
    <meta charset="utf-8">
    <title>ECharts</title>
</head>
<body>
    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="main" style="height:400px"></div>
    <!-- ECharts单文件引入 -->
    <script src="js/echarts-2.2.7/build/dist/echarts-all.js"></script>
</body>

3、新建<script>标签，使用全局变量echarts初始化图表并驱动图表的生成。

<!DOCTYPE html>
<head>
    <meta charset="utf-8">
    <title>ECharts</title>
</head>
<body>
    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="main" style="height:400px"></div>
    <!-- ECharts单文件引入 -->
    <script src="js/echarts-2.2.7/build/dist/echarts-all.js"></script>
    <script type="text/javascript">
        // 基于准备好的dom，初始化echarts图表
        var myChart = echarts.init(document.getElementById('main')); 
        
        var option = {
            tooltip: {
                show: true
            },
            legend: {
                data:['销量']
            },
            tooltip:{
                show:true,
                trigger:'item'
            },
            xAxis : [
                {
                    type : 'category',
                    data : ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
                }
            ],
            yAxis : [
                {
                    type : 'value'
                }
            ],
            series : [
                {
                    "name":"销量",
                    "type":"bar",
                    "data":[5, 20, 40, 10, 10, 20]
                }
            ]
        };

        // 为echarts对象加载数据 
        myChart.setOption(option); 
    </script>
</body>

4、浏览器中打开echarts.html，就可看到以下效果

ECharts是数据驱动的图表，大部分时候你关心的是那个option该如何实现，官网的文档提供详细的说明。

分享到：

ECharts学习总结(五):echarts的Option概 ... | spring集成redis

2017-05-04 14:40
浏览 701
评论(0)
分类:编程语言
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

ECharts学习总结(一):ECharts的第一个图表

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

ECharts学习总结(一):ECharts的第一个图表

评论

发表评论

相关推荐

ECharts学习总结(五):echarts的Option概览

ECharts学习总结(四):echarts的实例方法

ECharts学习总结(三):ECharts图表对象的初始化(init)详解以及注意事项

ECharts学习总结(二):标签式单文件引入echarts的方法

最近访客更多访客>>