echarts的好处

丰富的可视化类型
多数据格式无需转换
千万级别数据进行展示
移动端优化
多渲染方案跨平台使用
深度的交互方案
动态数据
绚丽的特效

echarts的内容收集

App.vue

<template><router-view/>
</template><script>
import { provide } from "vue"
import * as echarts from "echarts"
import axios from "axios"
// 设置axios基准路径
axios.defaults.baseURL = "https://visual-server.vercel.app"
export default {setup() {provide("echarts", echarts)provide("axios", axios)}
}
</script><style lang="less">
* {margin: 0;padding: 0;box-sizing: border-box;
}
body {background: url("~@/assets/bg.jpg") top center no-repeat;
}
</style>

main.js

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
// 引用lib-flexible插件
import 'lib-flexible/flexible.js'createApp(App).use(store).use(router).mount('#app')

index.html

<!DOCTYPE html>
<html lang=""><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1.0"><link rel="icon" href="<%= BASE_URL %>favicon.ico"><title><%= htmlWebpackPlugin.options.title %></title></head><body><noscript><strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id="app"></div><!-- built files will be auto injected --></body>
</html>

HomePage.vue

<template><div><header><h1>大数据可视化</h1></header><section class="container"><section class="itemLeft"><ItemPage><ItemOne/></ItemPage><ItemPage><ItemTwo/></ItemPage></section><section class="itemCenter"><MapPage/></section><section class="itemRight"><ItemPage><ItemThree/></ItemPage><ItemPage><ItemFour/></ItemPage></section></section></div>
</template><script>
import ItemPage from "@/components/ItemPage.vue"
import ItemOne from "@/components/ItemOne.vue"
import ItemTwo from "@/components/ItemTwo.vue"
import ItemThree from "@/components/ItemThree.vue"
import ItemFour from "@/components/ItemFour.vue"
import MapPage from "@/components/MapPage.vue"
export default {components: {ItemPage,ItemOne,ItemTwo,ItemThree,ItemFour,MapPage}
}
</script><style lang="less">header {height: 1rem;width: 100%;background-color: rgba(0, 0, 255, .2);h1 {font-size: 0.375rem;color: #fff;text-align: center;line-height: 1rem;}}.container {// 最大最小宽度min-width: 1200px;max-width: 2048px;margin: 0 auto;border: 1px solid red;padding: .125rem .125rem 0;// 设置flex布局display: flex;.itemLeft, .itemRight {flex: 3;}.itemCenter {flex: 5;height: 10.5rpx;border: 1px solid blue;padding: 0.125rem;margin: .25rem;}}
</style>

echarts+vue3实战(1)相关推荐

Vue：echarts画图实战，异步获取数据在Vue上使用echarts进行画图
Vue:echarts画图实战,异步获取数据在Vue上使用echarts进行画图一.效果图二.资源主题编辑器 ECharts 教程实现代码------想要进行实战的同学可以研究以下代码,下面的 ...
ECharts项目实战：全球GDP数据可视化
[课程简介] 可视化是前端里一个几乎可以不用写网页,但又发展得非常好的方向.在互联网产品里,无论是C端中常见的双十一购物节可视化大屏,还是B端的企业中后台管理系统都离不开可视化.国家大力推动的智慧城市 ...
VUE3实战二之Vant UI库使用
VUE3实战二之Vant UI库使用 1. Vant介绍 2. Vant的安装使用 2.1. button 1. Vant介绍 https://vant-ui.github.io/vant/#/en- ...
vue3实战项目——网易云App【01-项目准备】
项目准备一.准备提供数据的API 1.网易云音乐 NodeJS 版 API的安装这里我使用的是一个github上面的项目文档地址为:网易云音乐 NodeJS 版 API文档下载地址为: git ...
大数据平台展示可视化效果，echarts图表实战项目(源码50套)
本文重点介绍HTML5图表框架echarts入门Demo及实战项目(含源码),以此来实现echarts大屏展示大数据平台可视化酷炫效果. 缘起:最近接了个任务需要用H5在前台两个大电视上做两页数据展示 ...
Vue2到Vue3实战必备技能（一）
目录前言一. Vue2脚手架搭建: 1.安装nodejs 2.全局安装vue-cli 3.创建vue项目 4.项目配置 5.运行项目二. Vue2基础语法和指令: 1.插值表达式: 2.v-te ...
Echarts条形图实战
最近公司项目要做一个统计图用到了echarts里面的条形图,对于以前就接触过一点echarts的我信心满满,没想到动手的时候才发现问题百出,看来实践真的是检验学习成效的标准.这里有两种条形图,一种横向 ...
echarts图表实战
最近写了几个图表,包含有柱状图.折线图.水球图以及散点图,这里直接打出来给大家练手,希望大家多多支持,如果这篇文章对您有用的话,记得
vue3实战项目——网易云App【02-导入需要的iconfont】
导入需要的iconfont 一.阿里巴巴的Iconfont 1.进入iconfont网站点击链接进入: 阿里巴巴iconfont 2.搜索想要使用的icon 将选中的icon加入购物车点击右上角的 ...
Vue3 企业级项目实战
小册介绍基于真实项目的实战开发,即学即用,让你不再迷茫! Vue3 + Element Plus + Spring Boot 前后端分离实践,你不能错过! 一个可以实操练手的完整项目,再配备上详细的 ...

echarts+vue3实战(1)

echarts的好处

echarts的内容收集

echarts+vue3实战(1)相关推荐

最新文章

热门文章