前端学习-数据可视化（个人笔记）

最新推荐文章于 2023-08-24 16:08:34 发布

qq_42490671

最新推荐文章于 2023-08-24 16:08:34 发布

阅读量601

点赞数

文章标签：前端 echarts javascript

本文链接：https://blog.csdn.net/qq_42490671/article/details/121183757

版权

一、数据可视化项目概述

1.项目技术

1）HTML+CSS3布局

2）CSS3动画、渐变

3）jQuery库+原生JavaScript

4）flex布局和renm适配方案

5）图片边框border-image

6）ES6模板字符

7）ECharts可视化库等等

2.大数据可视化项目代码比例

3.ECharts简介

官网地址：Examples - Apache ECharts

ECharts是一个使用JavaScript实现的开源可视化库。

简单来说就是 js库或js插件。

开源免费

二、ECharts使用步骤

步骤1.下载并引入echarts.js文件

步骤2.准备一个具备大小的DOM容器

<style>
    .box {
        width: 500px;
        height: 500px;
        background-color: #ff9;
    }
</style>
<body>
 <div class="box"></div>
</body>

<script>
//步骤3.初始化ECharts实例对象
var myECharts = echarts.init(document.querySelector(".box"));

//步骤4.指定配置项和数据，即在官网选择一个你想要图表
var options;  //要先声明options
option = {
  title: {
    text: 'Referer of a Website',
    subtext: 'Fake Data',
    left: 'center'
  },
  tooltip: {
    trigger: 'item'
  },
  legend: {
    orient: 'vertical',
    left: 'left'
  },
  series: [
    {
      name: 'Access From',
      type: 'pie',
      radius: '50%',
      data: [
        { value: 1048, name: 'Search Engine' },
        { value: 735, name: 'Direct' },
        { value: 580, name: 'Email' },
        { value: 484, name: 'Union Ads' },
        { value: 300, name: 'Video Ads' }
      ],
      emphasis: {
        itemStyle: {
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: 'rgba(0, 0, 0, 0.5)'
        }
      }
    }
  ]
};

//步骤5.将配置项设置给实例化对象
 myECharts.setOption(option);
</script>

步骤3.初始化ECharts实例对象，在<script></script>内

var myECharts = echarts.init(document.querySelector(".box"));

步骤4.指定配置项和数据，即在官网选择一个你想要图表，在<script></script>内复制代码

步骤5.将配置项设置给实例化对象

//步骤5.将配置项设置给实例化对象
 myECharts.setOption(option);

qq_42490671

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端学习-数据可视化（个人笔记）

一、数据可视化项目概述1.项目技术1）HTML+CSS3布局2）CSS3动画、渐变3）jQuery库+原生JavaScript4）flex布局和renm适配方案5）图片边框border-image6）ES6模板字符7）ECharts可视化库等等2.大数据可视化项目代码比例3.ECharts简介官网地址：ECharts是一个使用JavaScript实现的开源可视化库。简单来说就是 js库或js插件。开源免费...
复制链接

扫一扫