关于ECharts

小庄梦蝶

于 2020-12-23 10:02:55 发布

阅读量163

点赞数

本文链接：https://blog.csdn.net/weixin_43591127/article/details/111573067

版权

关于ECharts

这货是JavaScript实现的开源可视化库，可以流畅的运行在PC和移动设备上，底层使用了2d绘制，可视化库------可视化，它提供了常规的折线图，柱状图，饼图，k线图，用于统计的盒型图等，，，哈哈哈哈，，，够用了吧，，，对于我这种做后端的屌丝够用了

接下来就是使用ECharts

首先要下ECharts的js包，去(官网)[http://echarts.apache.org/zh/download.html]下载，我直接下载的是从github下载的·编译产物，点击dist，就会跳到github里面，看到echarts.min.js点它，会跳转到另一个页面会提示你下载一堆东西，点它，然后你会看到页面有注释如下：

/*
* Licensed to the Apache Software Foundation (ASF) under one
* or more contributor license agreements.  See the NOTICE file
* distributed with this work for additional information
* regarding copyright ownership.  The ASF licenses this file
* to you under the Apache License, Version 2.0 (the
* "License"); you may not use this file except in compliance
* with the License.  You may obtain a copy of the License at
*
*   http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing,
* software distributed under the License is distributed on an
* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
* KIND, either express or implied.  See the License for the
* specific language governing permissions and limitations
* under the License.
*/
!function(t,e){"object"==typeof exports&&"undefined.............

直接将你看到的页面直接全部复制下来然后放到项目的.js文件里面可以了

然后呢要引进这个文件

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <!-- 引入 ECharts 文件 -->
    <script src="echarts.min.js"></script>
</head>
</html>

上面的src里面的路径根据你实际情况来定

要建立一张简单的图标首先要有一个容器，这个容器有宽和长

<body>
    <!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
    <div id="main" style="width: 600px;height:400px;"></div>
</body>

然后呢在你页面里面添加如下

<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>

上面元素的选择是根据你实际建立的容器来的，嘻嘻，可以再引进jq，可以简单开发，再从从后端那里引进数据就可以实现了

var myChart = echarts.init(document.getElementById('main'));

$.get('data.json').done(function (data) {
    myChart.setOption({
        title: {
            text: '异步数据加载示例'
        },
        tooltip: {},
        legend: {
            data:['销量']
        },
        xAxis: {
            data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
        },
        yAxis: {},
        series: [{
            name: '销量',
            type: 'bar',
            data: [5, 20, 36, 10, 10, 20]
        }]
    });
});

进一步深入

上面这样做下来的结果是，，，页面是不随者移动端屏幕的变化而变化

继续认识

ECharts基本概念概述

echart实例，一个网页中可以创建多个echarts实例，每个实例只要为其提供一个容器，就是css里面的块元素

系列，就是它们能够映射的图，分为line折线图，bar柱状图,pie饼图,scatter散点图,grap关系图,tree树图…

组件：就是构成各种图的部分，比如横坐标轴，纵坐标轴，提示框等

用option描述图表，option这个概念你可以理解为一个类，它被创建出来就是对象，它用来说明数据，数据映射图，交互行为，就是上面的mychart

组件的定位：

多数组件和系列，都能够基于 top / right / down / left / width / height 绝对定位。这种绝对定位的方式，类似于 CSS 的绝对定位（position: absolute）