码迷,mamicode.com
首页 > 其他好文 > 详细

EChart使用

时间:2015-11-19 14:31:51      阅读:172      评论:0      收藏:0      [点我收藏+]

标签:

ECharts下载地址: http://echarts.baidu.com/

技术分享

下载之后解压各自的文件目录结构如下:

技术分享

我们需要的是build/source下面的文件

技术分享

然后使用官方实例,http://echarts.baidu.com/doc/start.html(标签式单文件引入)

<!DOCTYPE html>
<head>
    <meta charset="utf-8">
    <title>ECharts</title>
</head>
<body>
    <!-- 为ECharts准备一个具备大小(宽高)的Dom -->
    <div id="main" style="height:400px"></div>
    <!-- ECharts单文件引入 -->
    <script src="http://echarts.baidu.com/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:[销量]
            },
            xAxis : [
                {
                    type : category,
                    data : ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
                }
            ],
            yAxis : [
                {
                    type : value
                }
            ],
            series : [
                {
                    "name":"销量",
                    "type":"bar",
                    "data":[5, 20, 40, 10, 10, 20]
                }
            ]
        };

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

将Source目录资源取出重命名,并对上面的代码进行修改,放置到一个目录下:

技术分享

运行:

技术分享

 

EChart使用

标签:

原文地址:http://www.cnblogs.com/zhongxinWang/p/4977400.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!