# task01-echart-demo

**Repository Path**: xiaomiquan/task01-echart-demo

## Basic Information

- **Project Name**: task01-echart-demo
- **Description**: 练习任务1，统计图实现
- **Primary Language**: JavaScript
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2017-10-22
- **Last Updated**: 2022-06-16

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# task01-echart-demo
练习任务1，统计图实现


echarts统计图主要代码在index.html下`492`行位置，也就是最后

```html
    
    <!-- ehcart依赖 -->
    <script src="./echarts/echarts.min.js"></script>
    <script src="./echarts/line-options.js"></script>
    <script type="text/javascript">
            $(function () {
                "use strict";
                 // 基于准备好的dom，初始化echarts实例
                var myChart = echarts.init(document.getElementById('linechart'));
                 // 使用刚指定的配置项和数据显示图表。
                myChart.setOption(lineOption);
            });
    </script>

```

demo主要模仿百度网站3统计的效果图，如下：


## demo效果

![](./demo-echart.png)


## 百度统计截图

![](./baidu_tongji.png)


## 总结



另外，使用highcharts.js也可以开发，国内最好用的图表库是echarts，国外则为highcharts，另外还有chart.js等，3d的图表的话，厉害的有d3.js。大数据时代的统计图，前端无非就用这些比较多。

echarts 和hightcharts的本质是实现技术不一样，echarts是基于Zrender库实现，使用HTML5的canvas技术；而hightcharts为svg,所以最终的兼容性，highcharts比echarts要好一些。地图统计效果两者都有，d3也很不错，都可以了解一下。