vue3中ECharts快速入门

前言

可视化就是把数据简单化直接明了显示数据的比例，增长趋势等等

1.官方echarts数据可视化

2.vue3中使用echarts的配置

3.简单的柱状图

1.官方echart数据可视化

官方：Apache ECharts

csdn详细入门可视化数据：http://t.csdn.cn/xbw5N

2.vue3中使用echarts的配置

下载echarts组件：npm install echarts --save

在main.py 中配置

import * as echarts from 'echarts'
const app = createApp(App);
app.config.globalProperties.$echarts = echarts

3.简单的柱状图

柱形图代码

<template><div><h1>1111</h1><div id='showorders' style='width:300px; height:500px'></div></div>
</template><script>
import { ref, onMounted } from "vue";
import * as echarts from 'echarts';
onMounted(() => {init()}
)
export default {data(){},methods:{showorders(){// 基于准备好的dom，初始化echarts实例var chartDom = document.getElementById('showorders');var myChart = echarts.init(chartDom);// 指定图表的配置项和数据var option;option = {# x轴xAxis: {type: 'category',data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']},# y 轴yAxis: {type: 'value'},# 类型series: [{data:[150, 230, 224, 218, 135, 147, 260],type: 'bar'}]};option && myChart.setOption(option);},},mounted() {this.showorders()},}
</script><style></style>

大致结果如图片所示（柱状图一样）

4.到这就结束去写写吧

vue3中ECharts快速入门相关推荐

ACM中java快速入门
2019独角兽企业重金招聘Python工程师标准>>> ACM中java快速入门附: Chapter I. Java的优缺点各种书上都有,这里只说说用Java做ACM-ICPC的特 ...
Apache ECharts快速入门
文章目录一.Apache ECharts简介二.快速入门 1.获取 Apache ECharts 2.引入 Apache ECharts 3.简单图表示例一.Apache ECharts简介 A ...
解决vue3中echarts的tooltip组件不显示的问题
data() {return {chartInstance: ''} },mounted() {if(!this.chartInstance) this.chartInstance = echarts ...
micro-app-vue2 vue3 超详细快速入门指南学习记录
micro-app-vue 快速入门指南简介 micro-app是京东零售推出的一款微前端框架,它基于类WebComponent进行渲染,从组件化的思维实现微前端,旨在降低上手难度.提升工作效率.它 ...
.NET中Hangfire快速入门和使用-迷恋自留地
前言: 定时任务调度问题,是一个老生常谈的问题.网上有许多定时任务调度的解决方案,对于我而言很早以前主要是使用Window计划和Window服务来做任务定时执行,然后就开始使用定时任务调度框架Quar ...
Echarts 快速入门折线图
基础折线图简单折线图如果我们想建立一个横坐标是类目型(category).纵坐标是数值型(value)的折线图,我们可以使用这样的方式: option = {xAxis: {type: " ...
Enterprise Library 缓存应用程序块快速入门
Enterprise Library 快速入门是简单的.易于理解的应用程序块关键特性的示例,使用了一个实现了常规场景的漫游集合来说明这些特性. 如果要理解一个应用程序块,快速入门将是理想的起始点,并且 ...
echarts快速上手
echarts快速入门笔者在初学echarts的时候,非常痛苦, 感觉配置项多如牛毛, 任务又很紧,无法细读文档, 在网上查阅过各种入门文章, 终是不合心意, 于是乎, 写下此文,话不多说直接开整. ...
SIMPLIS仿真软件2.1－SIMPLIS快速入门1
SIMPLIS仿真软件2.1-SIMPLIS快速入门1 导读新建原理图设置快捷键允许GUI界面更改元器件名称搭建Buck电路导读本文是SIMPLIS仿真软件介绍的第二篇文章,是对SIMPL ...

vue3中ECharts快速入门

1.官方echart数据可视化

2.vue3中使用echarts的配置

3.简单的柱状图

vue3中ECharts快速入门相关推荐

最新文章

热门文章