Echarts入门

作者: 旧丶时候 | 来源:发表于2017-03-13 16:46 被阅读0次

十二可视化技术对比
echarts学习笔记
Echarts快速入门
细节优化
ECharts入门（一）
echarts入门
echarts入门
Echarts入门
Echarts入门
echarts入门

1. 前言

在项目中大家可能需要做报表，要是自己写原生的话很麻烦，然而，网上提供了一个库，可以满足大部分的做报表需求，就是这个Echarts，我在这里呢，也就做几个简单的demo，哈哈！

timg.jpg

2. 简介

ECharts，一个纯 Javascript 的图表库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefox，Safari等），底层依赖轻量级的 Canvas 类库 ZRender，提供直观，生动，可交互，可高度个性化定制的数据可视化图表。

3. 代码实现

给大家实现一个简单的柱状图

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css"> 
        #main{
            width: 900px;
            height: 600px;
        }
    </style>
    <!-- 引入echarts.js -->
    <script type="text/javascript" src="echarts.min.js"></script>
</head>
<body>
    <div id="main"></div>
    <script type="text/javascript">
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.querySelector("#main"));
    // 指定图表的配置项和数据
    var option = {
        // 标题
        title : {text : "Echarts"},
        // 工具箱
        toolbox : {
            show :true,
            feature : {
                saveAsImage : {
                    show :true
                }
            }
        },
        // 图例
        legend : {
            data : ["销量"]
        },
        // x轴
        xAxis : {
            data : ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
        },
        yAxis : {},
        // 数据
        series : [{name : "销量",type : "bar",data : [5,20,36,10,10,20]}]
    }
    // 
    // 使用刚制定的配置项和数据显示列表
    myChart.setOption(option);
    </script>
</body>
</html>

Paste_Image.png

那么折线图就更容易了，基本上不用改变咱们上面写的代码，只要做稍稍的修改，在数据中加入这么一段代码。

// 数据
        series : [
            {name : "销量",type : "bar",data : [5,20,36,10,10,20]},
            {name : "产量",type : "line",data : [7,30,50,11,40,80]}
        ]

不懂的话就看图！！！