vue3 使用echarts

效果图

安装Echarts

cnpm install echarts --save

vue页面使用

<template><div id="myChart123" :style="{width: '1500px', height: '550px'}"></div>
</template><script>
// 引入echarts
import * as echarts from 'echarts'
import {onMounted} from "vue";export default {setup() {onMounted(() => { // 需要获取到element,所以是onMounted的Hooklet myChart = echarts.init(document.getElementById("myChart123"));// 绘制图表myChart.setOption({xAxis: {data: ["4-3", "4-4", "4-5", "4-6", "4-7", "4-8", "4-9"]},yAxis:{},series: [{name: "用户量",type: "line",data: [8, 15, 31, 13, 15, 22, 11]}]});window.onresize = function () { // 自适应大小myChart.resize();};});}
}
</script>

vue3 使用echarts相关推荐

[VUE2/VUE3]基于echarts的动态折线图组件
[VUE2/VUE3]基于echarts的动态折线图组件时间格式化代码 export default function formatSecond(value: number) {let millis ...
vue3使用echarts并封装echarts组件
vue3使用echarts并封装echarts组件前言: 一.安装并导入echart 1.npm下载包 2.配置echarts 二.使用echarts 三.封装echarts为组件前言: 本文使用 ...
vue3+ts+echarts 实现svg渲染地图
vue3+ts+echarts 实现svg渲染地图+省市联动公司打算地图使用svg渲染,就做了个小demo,这是最后实现的效果. http://datav.aliyun.com/portal/sch ...
echarts vue 柱状图实例_「源码学习」适用于 Vue3 的 ECharts 包装组件
距离 Vue3 发布已经有近一周的时间,不知道大家源码都学习的怎么样了呢?今天 Gitee 为开发者们推荐一个新的学习资源,就是下面要介绍的这个同时适用于 Vue2 和 Vue3 的 EChatrts ...
Vue3.0 + Echarts 实现地区人口数量分布展示
需求: 按照人口数量密集度,颜色由浅到深展示实现: 基于现有的Vue3.0+4.5.13Cli框架,安装Echarts npm install echarts@4.9.0 --save 安装成功后, ...
解决vue3中echarts的tooltip组件不显示的问题
data() {return {chartInstance: ''} },mounted() {if(!this.chartInstance) this.chartInstance = echarts ...
vue3+DataV+Echarts搭建数据大屏模板(建议收藏)
一.实现效果: Vue3-Vite-Ts数据大屏二.vue3项目构建: 前言:随着vue2官宣年底停止维护不在提供解决问题的帮助后,vue3+ts+vite大家已经都开始用了,最近也在学习,并结合D ...
vue3 使用echarts和百度地图
文章目录前言一.使用echarts 1. 安装echarts 2. echarts中使用百度地图 2.1 引入百度地图 2.2 全部代码 2.3 结果 3 echarts使用geomap进行地图展 ...
vue3中ECharts快速入门
前言可视化就是把数据简单化直接明了显示数据的比例,增长趋势等等 1.官方echarts数据可视化 2.vue3中使用echarts的配置 3.简单的柱状图 1.官方echart数据可视化官方:A ...
西北乱跑娃 -- VUE3引入echarts
npm install echarts npm install echarts-wordcloud <template><div id="myChart" :st ...

vue3 使用echarts

效果图

安装Echarts

vue页面使用

vue3 使用echarts相关推荐

最新文章

热门文章