开源可视化库 —— ECharts

介绍

 今天做项目时需要实现数据可视化功能,了解一番后选择使用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_第1张图片

3.引入到页面中

开源可视化库 —— ECharts_第2张图片

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

5. 生成图表

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


<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Titletitle>
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} 
{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_第4张图片

总结

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

你可能感兴趣的:(前端,Vue,前端,数据可视化)