欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

开源可视化库 —— ECharts

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

介绍

 今天做项目时需要实现数据可视化功能,了解一番后选择使用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文件到工程目录下

开源可视化库 —— ECharts

3.引入到页面中

开源可视化库 —— ECharts

4. 在绘图前我们需要为 ECharts 准备一个具备高宽的 DOM 容器。开源可视化库 —— ECharts

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.效果图

开源可视化库 —— ECharts

总结

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

本文地址:https://blog.csdn.net/qq_40269087/article/details/112764343