五分钟快速上手Echarts

最新推荐文章于 2023-05-19 11:09:40 发布

不负众望1102

最新推荐文章于 2023-05-19 11:09:40 发布

阅读量675

点赞数 4

本文链接：https://blog.csdn.net/weixin_45308239/article/details/108214604

版权

Echarts

一个纯JavaScript图表库。ECharts，缩写来自Enterprise Charts，商业级数据图表，一个纯Javascript的图表库，可以流畅的运行在PC和移动设备上，兼容当前绝大部分浏览器（IE6/7/8/9/10/11，chrome，firefox，Safari等），底层依赖轻量级的Canvas类库ZRender，提供直观，生动，可交互，可高度个性化定制的数据可视化图表。创新的拖拽重计算、数据视图、值域漫游等特性大大增强了用户体验，赋予了用户对数据进行挖掘、整合的能力。

官方网址

Echarts支持的图表

折线图（区域图）、柱状图（条状图）、散点图（气泡图）、K线图、饼图（环形图）

雷达图（填充雷达图）、和弦图、力导向布局图、地图、仪表盘、漏斗图、事件河流图等12类图表。

同时提供标题，详情气泡、图例、值域、数据区域、时间轴、工具箱等7个可交互组件，支持多图表、组件的联动和混搭展现。

Echarts的使用

获取Echarts

你可以通过以下几种方式获取 Apache ECharts (incubating)TM。

从 Apache ECharts (incubating) 官网下载界面获取官方源码包后构建。
在 ECharts 的 GitHub 获取。
通过 npm 获取 echarts，npm install echarts --save，详见在 webpack 中使用 echarts。
通过 BootCDN 等 CDN 引入。

引入Echarts

通过标签方式直接引入构建好的 echarts 文件

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

绘制一个简单的图表

在绘图前我们需要为 ECharts 准备一个具备高宽的 DOM 容器。

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

引入加速版的echarts.js。

<script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.0.0-alpha.1/extension/bmap.min.js"></script>

通过echarts.init方法初始化一个 echarts 实例并通过setOption方法生成一个简单的柱状图，下面是完整代码，注重看注解。

<body>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="main" style="width: 800px;height:600px;"></div>
<script type="text/javascript">
    // 基于准备好的dom，初始化echarts实例
    //echarts.init()方法中只能放js对象，不能存放jquery对象。
    //jquery---->js  .get(0),[0]。
    var myChart = echarts.init(document.getElementById('main'));
    // 指定图表的配置项和数据
    var option = {
        //标题
        title: {
            text: 'ECharts 入门示例',
            //subtext为副标题
            subtext:'Echarts'
        },
        //提示框组件(提示鼠标放到图形中显示的数据)
        tooltip: {},
        //图例组件
        legend: {
            //此处data中的内容必须和series中的name内容一样。
            //有多个时可直接加入。
            data:['销量']
        },
        //X轴显示的数据
        xAxis: {
            data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
        },
        //Y轴显示的数据
        yAxis: {},
        //series数据
        series: [{
            //图形的名称
            name: '销量',
            //图形的类型      line线形图，bar柱状图，pie扇形图。
            type: 'bar',
            //图形中的数据(很多都是从数据库中查询出来)
            data: [5, 20, 36, 10, 10, 20]
        }]
    };
    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
</script>
</body>

效果图：
在这里插入图片描述
有多个数据时：
直接加入图中演示即可。运行效果如下：

要实现其他图形只需要改option中的数据：

各个图形中的数据在这copy

vue-cli中安装Echarts

#配置淘宝加速器
npm config set registry https://registry.npm.taobao.org/
#安装Echarts依赖，通过 npm 上安装的 ECharts 和 zrender 会放在node_modules目录下。
npm install echarts --save

datazoom缩放

dataZoom: [
        {
            type: 'slider',
            show: true,
            xAxisIndex: [0],
            start: 1,
            end: 35
        },
        {
            type: 'slider',
            show: true,
            yAxisIndex: [0],
            left: '93%',
            start: 29,
            end: 36
        },
        {
            type: 'inside',
            xAxisIndex: [0],
            start: 1,
            end: 35
        },
        {
            type: 'inside',
            yAxisIndex: [0],
            start: 29,
            end: 36
        }
    ]

toolbox工具栏。内置有导出图片，数据视图，动态类型切换，数据区域缩放，重置五个工具。

 toolbox: {
      show: true,
      feature: {
          dataZoom: {
              yAxisIndex: 'none'
          },
          dataView: {readOnly: false},
          magicType: {type: ['line', 'bar']},
          restore: {},
          saveAsImage: {}
      }
  }

不负众望1102

关注

4
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
五分钟快速上手Echarts

Echarts一个纯JavaScript图表库。ECharts，缩写来自Enterprise Charts，商业级数据图表，一个纯Javascript的图表库，可以流畅的运行在PC和移动设备上，兼容当前绝大部分浏览器（IE6/7/8/9/10/11，chrome，firefox，Safari等），底层依赖轻量级的Canvas类库ZRender，提供直观，生动，可交互，可高度个性化定制的数据可视化图表。创新的拖拽重计算、数据视图、值域漫游等特性大大增强了用户体验，赋予了用户对数据进行挖掘、整合的能力。官方
复制链接

扫一扫