介绍

介绍

福哥最近在弄一个数据图表展示的功能，一般网页上展示的数据图表都是通过js的cavas实现的

但是自己揉一套有点难，也没有必要

网上一查，大家都在用eCharts这个开源的数据图表工具做

教程

安装

下载源代码

官方下载地址

https://echarts.apache.org/zh/index.html

我记得这个项目原来是从属百度的呀！？怎么跑阿帕奇去了？

算了，不管了！

解压缩源代码

下载的代码包是zip格式的，通过解压缩工具解开，文件夹里是这样的

后来发现这个源代码里都是ES6的代码，直接运行不了

下载echarts.min.js

我们去github上下载编译好的直接来用吧

打开网址 https://github.com/apache/incubator-echarts/tree/4.8.0/dist

找到 echarts.min.js，把它下载下来

下载地址 https://github.com/apache/incubator-echarts/blob/4.8.0/dist/echarts.min.js

自己复制下来保存为 echarts.min.js

引用echarts.min.js

直接通过html引用

<script type="text/javascript" src="echarts.min.js"></script>

测试

测试代码

使用官方提供的测试代码验证一下，福哥的例子是在移动端平台上的，所以这里使用的是rem单位

<div id="main" style="margin: 1rem 0 0 0;width: auto;height:30rem;"></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>

测试效果

效果还是挺漂亮的，福哥的例子是在移动端上的