Vue实现简单图表~满满的干货

文章目录

前提：安装数据报表的插件
Vue实现简单图表的步骤
- 导入echarts
- 为ECharts准备一个具备大小（宽高）的Dom
- 基于准备好的dom，初始化echarts实例
- 指定图表的配置项和数据
- 展示数据
Vue实现简单图表的示例：

前提：安装数据报表的插件

Echarts官网：
https://echarts.apache.org/zh/index.html

Vue实现简单图表的步骤

导入echarts

// 1.导入echarts
// import echarts from 'echarts'
let echarts = require('echarts')

为ECharts准备一个具备大小（宽高）的Dom

<!-- 2. 为ECharts准备一个具备大小（宽高）的Dom --><div id="main" style="width: 600px; height: 400px"></div>

基于准备好的dom，初始化echarts实例

// 3. 基于准备好的dom，初始化echarts实例var myChart = echarts.init(document.getElementById('main'))

指定图表的配置项和数据

// 4. 指定图表的配置项和数据var option = {title: {text: 'ECharts 入门示例',},tooltip: {},legend: {data: ['销量'],},xAxis: {data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子'],},yAxis: {},series: [{name: '销量',type: 'bar',data: [5, 20, 36, 10, 10, 20],},],}

展示数据

// 5. 展示数据myChart.setOption(option)

Vue实现简单图表的示例：

<template><div><!-- 面包屑导航区域 --><el-breadcrumb separator-class="el-icon-arrow-right"><!-- 当点击首页的时候，会跳转到/home页面 --><el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item><el-breadcrumb-item>数据统计</el-breadcrumb-item><el-breadcrumb-item>数据报表</el-breadcrumb-item></el-breadcrumb><!-- 卡片视图 --><el-card><!-- 2. 为ECharts准备一个具备大小（宽高）的Dom --><div id="main" style="width: 600px; height: 400px"></div></el-card></div>
</template><script>
// 1.导入echarts
// import echarts from 'echarts'
let echarts = require('echarts')export default {data() {return {}},created() {},//  此时，页面上的元素，已经被渲染完毕了//   DOM元素初始化完毕后，执行mountedmounted() {// 3. 基于准备好的dom，初始化echarts实例var myChart = echarts.init(document.getElementById('main'))// 4. 指定图表的配置项和数据var option = {title: {text: 'ECharts 入门示例',},tooltip: {},legend: {data: ['销量'],},xAxis: {data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子'],},yAxis: {},series: [{name: '销量',type: 'bar',data: [5, 20, 36, 10, 10, 20],},],}// 5. 展示数据myChart.setOption(option)},methods: {},
}
</script><style lang="less" scoped>
</style>

Vue实现简单图表~满满的干货相关推荐

Vue 之 echarts 图表数据可视化的基础使用（简单绘制各种图表、地图）
Vue 之 echarts 图表数据可视化的基础使用(简单绘制各种图表.地图) 目录 Vue 之 echarts 图表数据可视化的基础使用(简单绘制各种图表.地图) 一.简单介绍二.环境搭建三.使 ...
Vue 之 echarts 图表数据可视化常用的一些图表/动态图表/3D图表的简单整理
Vue 之 echarts 图表数据可视化常用的一些图表/动态图表/3D图表的简单整理目录 Vue 之 echarts 图表数据可视化常用的一些图表/动态图表/3D图表的简单整理一.简单介绍二. ...
吐血整理，Ubuntu必备应用推荐，满满的干货！
吐血整理,Ubuntu必备应用推荐,满满的干货! 哈喽,大家好,欢迎收看欢哥TV 我是欢哥.无论你是刚接触Ubuntu,还是最近从Windows改用Ubuntu,都会发现--我不知道该装哪些软件? 这 ...
用Vue实现简单的echarts在线编辑器
用Vue实现简单的echarts在线编辑器简述思路效果图页面分布 main.js的配置其中ace编辑器的配置按钮功能实现思路具体实现图表初始化图表组件传给父组件option配置对象 ...
用php做一个简单的汇率,vue实现简单实时汇率计算功能
最近在自己摸索vue的使用,因为相对于只是去看教程和实例,感觉不如自己动手写一个demo入门来的快.刚好看到小程序中有一个简单但是很精致的应用极简汇率,而且它的表现形式和vue的表现形式很像,于是想着 ...
react构建淘票票webapp，及react与vue的简单比较。
前言前段时间使用vue2.0构建了淘票票页面,并写了一篇相关文章vue2.0构建淘票票webapp,得到了很多童鞋的支持,因此这些天又使用react重构了下这个项目,目的无他,只为了学习和共同进步! ...
前端app调起摄像头只显示在页面_猫也能看得懂的教程之一分钟使用Vue搭建简单Web页面...
本教程适合人群: 已经了解过过html.js.css,想深入学习前端技术的小伙伴有前端开发经验.但是没有使用过Vue的小伙伴有过其他编程经验,对前端开发感兴趣的小伙伴学习本教程之后你将会: 了解 ...
python导入csv文件-Python从CSV文件导入数据和生成简单图表
原标题:Python从CSV文件导入数据和生成简单图表我们已经完成Python的基础环境搭建工作,现在我们尝试导入CSV数据我们准备一个csv测试数据,文件名是csv-test-data.csv数 ...
基于vue-cli、elementUI的Vue超简单入门小例子
基于vue-cli.elementUI的Vue超简单入门小例子这个例子还是比较简单的,独立完成后,能大概知道vue是干嘛的,可以写个todoList的小例子. 开始写例子之前,先对环境的部署做点简单 ...

Vue实现简单图表~满满的干货

文章目录

前提：安装数据报表的插件

Vue实现简单图表的步骤

导入echarts

为ECharts准备一个具备大小（宽高）的Dom

基于准备好的dom，初始化echarts实例

指定图表的配置项和数据

展示数据

Vue实现简单图表的示例：

Vue实现简单图表~满满的干货相关推荐

最新文章

热门文章