开源可视化库 —— ECharts

最新推荐文章于 2024-04-09 16:35:09 发布

轩冰

最新推荐文章于 2024-04-09 16:35:09 发布

阅读量7.6k

点赞数 19

分类专栏：前端 Vue 文章标签：前端数据可视化

本文链接：https://blog.csdn.net/qq_40269087/article/details/112764343

版权

前端同时被 2 个专栏收录

4 篇文章 0 订阅

订阅专栏

Vue

4 篇文章 0 订阅

订阅专栏

介绍

今天做项目时需要实现数据可视化功能，了解一番后选择使用ECharts，今天特此整理一下，作为笔记，同时希望帮助更多人。
首先简单介绍一下，ECharts是一个纯JavaScript图表库，底层依赖于轻量级的Canvas类库ZRender，基于BSD开源协议，是一款非常优秀的可视化前端框架。

官网地址：https://echarts.apache.org/zh/index.html
官方文档：https://echarts.apache.org/zh/tutorial.html#5%20%E5%88%86%E9%92%9F%E4%B8%8A%E6%89%8B%20ECharts

注意： 官网在国内可能被q，如果不能正常访问，请科学上网。

整合Vue.js使用

1.下载ECharts

下载地址：https://github.com/apache/echarts/tree/5.0.0

2.复制dist目录下的echarts.min.js文件到工程目录下

在这里插入图片描述

3.引入到页面中

在这里插入图片描述

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

5. 生成图表

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

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>

<div id="app">
  <div id="echarts" style="width: 600px; height: 400px;"></div>
</div>

<script src="../js/vue.js"></script>
<script src="../js/echarts.min.js"></script>
<script>

  const app = new Vue({
    el: '#app',
    data: {

    },
    methods: {

      //绘制图表的method
      drawChart(){

        //基于准备好的dom，初始化echarts实例
        let mychart = echarts.init(document.getElementById('echarts'));

        // 指定图表的配置项和数据
        let option = {
          title: {
            text: '某站点用户访问来源',
            subtext: '纯属虚构',
            left: 'center'
          },
          tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b} : {c} ({d}%)'
          },
          legend: {
            orient: 'vertical',
            left: 'left',
            data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎']
          },
          series: [
            {
              name: '访问来源',
              type: 'pie',
              radius: '55%',
              center: ['50%', '60%'],
              data: [
                {value: 335, name: '直接访问'},
                {value: 310, name: '邮件营销'},
                {value: 234, name: '联盟广告'},
                {value: 135, name: '视频广告'},
                {value: 1548, name: '搜索引擎'}
              ],
              emphasis: {
                itemStyle: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
              }
            }
          ]
        };

        // 使用刚指定的配置项和数据显示图表。
        mychart.setOption(option);
      },

    },
    mounted(){
      //在DOM节点全部渲染完毕后绘制图表
      this.drawChart();
    },
    created(){

    }
  })
</script>
</body>
</html>

6.效果图

在这里插入图片描述

总结

更详细的用法请大家参照官方文档（非常友好）。如有不当之处，欢迎指正，感谢。欢迎一键三连，拒绝白嫖从我做起hhh。

轩冰

关注

19
点赞
踩
41

收藏

觉得还不错? 一键收藏
16
评论
开源可视化库 —— ECharts

介绍今天做项目时需要实现数据可视化功能，了解一番后选择使用ECharts，今天特此整理一下，作为笔记，同时希望帮助更多人。首先简单介绍一下，ECharts是一个纯JavaScript图表库，底层依赖于轻量级的Canvas类库ZRender，基于BSD开源协议，是一款非常优秀的可视化前端框架。官网地址：https://echarts.apache.org/zh/index.html官方文档：https://echarts.apache.org/zh/tutorial.html#5%20%E5%8
复制链接

扫一扫