echarts基础教程资源-CSDN文库

共499个文件

json：236个

js：76个

vue：46个

echarts

需积分: 5 162 浏览量 2023-06-13 15:09:37 上传评论收藏 22.08MB RAR 举报

资源推荐

资源详情

资源评论

收起资源包目录

echarts基础教程（499个子文件）

.browserslistrc 30B

demo.css 8KB

iconfont.css 3KB

.editorconfig 121B

iconfont.eot 3KB

.gitignore 230B

12.散点图的常见效果.html 30KB

11.散点图的实现.html 29KB

demo_index.html 15KB

21.地图常见效果_地图和散点图结合.html 3KB

20.地图的常见效果_不同城市的颜色不同.html 3KB

08.增量动画的实现.html 2KB

08.折线图的常见效果.html 2KB

11.echartsInstance对象常见的方法.html 2KB

07.图表的加载动画.html 2KB

17.饼图的常见效果.html 2KB

10.全局echarts对象常见的方法.html 2KB

06.通用配置03.html 2KB

15.直角坐标系的常用配置dataZoom.html 2KB

22.雷达图的实现.html 2KB

03.柱状图的实现.html 2KB

04.颜色渐变的使用.html 2KB

04.通用配置01.html 2KB

05.通用配置02.html 2KB

09.动画相关的配置项.html 2KB

13.直角坐标系的常用配置_grid.html 2KB

06.图表自适应的实现.html 2KB

02.配置项的讲解和使用.html 2KB

02.自定义主题的使用.html 2KB

14.直角坐标系的常用配置_axis.html 2KB

01.内置主题的使用.html 1KB

05.样式的使用.html 1KB

18.地图的实现.html 1KB

16.饼图的实现.html 1KB

websocket_demo.html 1KB

01.ECharts的快速上手.html 1KB

07.折线图的实现.html 1KB

19.地图的常见效果_显示某个省份的数据.html 1KB

10.折线图的常见效果_堆叠图.html 1KB

09.折线图的常见效果.html 1KB

23.仪表盘的实现.html 1KB

03.调色盘的使用.html 1KB

index.html 897B

index.html 845B

index.html 650B

favicon.ico 4KB

echarts.min.js 734KB

jquery-1.12.2.js 287KB

jquery.min.js 110KB

chalk.js 14KB

vintage.js 14KB

itcast.js 14KB

iconfont.js 13KB

共 499 条

项目最终的效果如图所示:

最终效果涉及到6个图表, 5种图表类型,它们分别是折线图,柱状图,地图,散点图,饼图

每个图表的数据都是从后端推送到前端来的, 不过在项目的初期,我们会先使用 ajax 由前端主动获取数

据, 后续会使用 WebSocket 进行改造.

整个项目的架构是基于 Vue 的, 所以我们需要创建 Vue 项目, 然后在 Vue 项目中开发各个图表组件.

1.前端项目的准备

1.1.

vue

cli

脚手架创建项目

1.1.1 脚手架环境的安装

在全局环境中安装 vue-cli 脚手架

1.1.2. 工程的创建

使用命令行执行

具体的配置项如下:

手动选择特性

集成 Router , Vuex , CSS Pre-processors

npm install -g @vue/cli

vue create vision

是否选用历史模式的路由

选择 Less 作为 CSS 的预处理器

选择 ESLint 的配置

什么时候进行 Lint 提示

如何存放 Babel , ESLint 等配置文件

是否保存以上配置以便下次创建项目时使用

配置选择完之后, 就开始创建项目了, 这个过程需要一些时间:

当项目就创建完成了, 会看到这个提示

运行默认的项目

将目录使用 vscode 打开

1.1.3.删除无关代码

cd vision

npm run serve

修改 App.vue 中的代码,将布局和样式删除, 变成如下代码:

删除 components/HelloWorld.vue 这个文件

删除 views/About.vue 和 views/Home.vue 这两个文件

修改 router/index.js 中的代码,去除路由配置和 Home 组件导入的代码

1.2. 项目的基本配置

在项目根目录下创建 vue.config.js 文件

在文件中增加代码:

1.3.全局

echarts

对象

1.3.1.引入

echarts

包

将资料文件夹中的 static 目录复制到 public 目录之下

在 public/index.html 文件中引入 echarts.min.js 文件

<div id="app">

 <router-view/>

</div>

</template>

</style>

import Vue from 'vue'

import VueRouter from 'vue-router'

Vue.use(VueRouter)

const routes = []

const router = new VueRouter({

routes

})

export default router

// 使用vue-cli创建出来的vue工程, Webpack的配置是被隐藏起来了的

// 如果想覆盖Webpack中的默认配置,需要在项目的根路径下增加vue.config.js文件

module.exports = {

devServer: {

 port: 8999, // 端口号的配置

 open: true // 自动打开浏览器

}

1.3.2.挂载到

Vue

原型上

在 src/main.js 文件中挂载

由于在 index.html 中已经通过script标签引入了 echarts.js 文件夹, 故在 window 全局对象中是

存在 echarts 全局对象, 将其挂载到 Vue 的原型对象上

1.3.3.使用全局

echarts

对象

在其他组件中使用

1.4.

axios

的处理

1.4.1.安装

axios

包

1.4.2.封装

axios

对象

在 src/main.js 文件中配置 axios 并且挂载到Vue的原型对象上

1.4.3.使用

axios

对象

在其他组件中使用

2.单独图表组件的开发

在项目的初期, 我们会每个图表单独的进行开发, 最后再将所有的图表合并到一个界面中.

在单独开发每个图表的时候, 一个图表会用一个单独的路径进行全屏展示, 他们分别是:

商家销售统计

......

// 将全局echarts对象挂载到Vue的原型对象上

Vue.prototype.$echarts = window.echarts

......

this.$echarts

npm install axios

......

import axios from 'axios'

axios.defaults.baseURL = 'http://127.0.0.1:8888/api/'

// 将axios挂载到Vue的原型对象上

Vue.prototype.$http = axios

......

this.$http

http://127.0.0.1:8999/#/sellerpage

销量趋势分析

http://127.0.0.1:8999/#/trendpage

商家地图分布

http://127.0.0.1:8999/#/mappage

地区销量排行

http://127.0.0.1:8999/#/rankpage

热销商品占比

http://127.0.0.1:8999/#/hotpage

库存销量分析

http://127.0.0.1:8999/#/stockpage

2.1.商家销量排行

最终的效果如下图所示:

2.1.1.组件结构设计

在 src/components/ 目录下建立 Seller.vue , 这个组件是真实展示图表的组件

给外层div增加类样式 com-container

建立一个显示图表的div元素

给新增的这个div增加类样式 com-chart

<div class="com-container">

 Seller组件

 <div class="com-chart"></div>

</div>

</template>

export default {

data () {

 return {}

评论收藏

内容反馈

tradiance

粉丝: 1
资源: 12

echarts基础教程

ECharts 教程

echarts基础知识

Echarts基础教程学习笔记

echarts的基础知识及应用

1.echarts基础视频教程.zip

echarts

echarts例子

echarts-demo

echarts3.0中级课程(前10节).7z

Echarts从入门到上手实战视频教程 70课(完整)

百度echarts使用教程之折线图demo案例源码

echarts4教程ppt及示例文件html

echarts教程文档1

Echarts基础加实践

Echarts从基础到上手实战

从Echarts学习图表的基础元素（打印版）

01.数据可视化_ECharts基础011

ECHARTS基础到vue实战

echarts-all

echarts.js

echarts图标

echarts3.0教程(后10节).7z

Echarts入门教程

Echarts 初级教程

echarts~echarts-gl 配套版本文件

echarts树形思维导图

最新资源