Vue.js+ECharts：切换图表类型（图表工具栏）

<template><!-- 为 ECharts 准备一个具备大小（宽高）的 DOM --><div style="width: 600px;height:400px;"/>
</template><script>
import echarts from 'echarts'
require('echarts/theme/macarons') // echarts themeexport default {data() {return {// 指定图表的配置项和数据option: {tooltip: {trigger: 'axis',axisPointer: { // 坐标轴指示器，坐标轴触发有效type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'}},legend: {data: ['销量', '库存量']},xAxis: {data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']},yAxis: {},toolbox: { // 工具箱show: true,feature: {dataZoom: {yAxisIndex: 'none'},dataView: {readOnly: false},magicType: {type: ['bar', 'line']},restore: {}}},series: [{name: '销量',type: 'bar',stack: 'vistors',barWidth: '60%',data: [20, 20, 36, 10, 10, 20],markLine: {data: [{type: 'average', name: '平均值'}]}},{name: '库存量',type: 'bar',stack: 'vistors',barWidth: '60%',data: [10, 30, 20, 5, 5, 10],markLine: {data: [{type: 'average', name: '平均值'}]}}]}}},mounted() {this.$nextTick(() => {this.initChart()})},methods: {initChart() { // 通过 echarts.init 方法初始化一个 echarts 实例并通过 setOption 方法生成一个简单的柱状图this.chart = echarts.init(this.$el, 'macarons')// this.chart = echarts.init(this.$el)// 使用刚指定的配置项和数据显示图表。this.chart.setOption(this.option)}}
}
</script>

Vue.js+ECharts：切换图表类型（图表工具栏）相关推荐

echart vue 图表大小_vue使用echarts切换tab出现图表被压缩，宽度变窄问题
在作项目的时候,遇到图表在切换试图的时候,发现图表会被压缩起来了,javascript 在tabs切换中有echarts的话,咱们会发现初始化的那个echarts是有宽度的,当点击tabs切换以后,切 ...
Vue使用echarts制作好看的图表（一）
Apache ECharts,一个基于 JavaScript 的开源可视化图表库,提供直观,生动,可交互,可个性化定制的数据可视化图表. ECharts安装与卸载安装最新版 npm install ...
Vue.js+ECharts：堆叠柱状图
<template><div style="width: 600px;height:40 ...
php 标签页切换,vue.js实现标签页切换效果
第二个实例是关于标签页切换的,先看一下效果: 这也是一个很常见的交互效果,以往正常的javascript写法是给各个按钮绑定事件来切换不同的层,当然也可以用纯css写,给上面的三个切换的层分别添加一个 ...
Vue整合ECharts
Vue整合ECharts 准备js文件 vue官网:https://cn.vuejs.org/ vue.js echarts官网:http://echarts.baidu.com/download.h ...
基于Spring Boot 2 和 Vue.js 2 的食品科学与工程学院网站的设计与实现
摘要互联网具有传播信息容量大.形态多样.迅速方便.自由和交互等特点,已经发展成为新的传播媒体,现在很多的大学和社会其他部门都已经建立了网站,通过计算机网络实现宣传.交流及资源的整合.建立学校网站有以 ...
代码经验分享计算机毕业设计之Python+Vue.js机器学习求职招聘推荐系统求职招聘数据分析
开发技术 1.前端:vue.js echarts 2.后端:flask 3.算法:协同过滤算法.基于用户.基于物品全实现 4.接口:百度AI 5.数据库:mongodb.mysql 创新点 1.爬取X ...
计算机登录平台,计算机毕业设计之SpringBoot+Vue.js工会管理系统平台
系统功能工会管理平台基于 Java Web 技术研发,可以对工会工作进行自动化管理,实现工会管理及日常活动工作的各项业务支持.分析系统的业务要求及开发目标,提出系统的功能需求分为会员添加.福利发放. ...
【Vue+Echarts】Vue中Echarts图表的使用（三）—— 组件模块调用不同类型的Echarts图表（动态图表生成）
这节也是这个系列最后的一篇文章了. 第二篇文章,将Echarts封装成了组件,在使用的时候,只需将ChartsOption传递进去即可,同时,提供了监听事件,当Option发生变化时,会刷新图表. 因 ...

Vue.js+ECharts：切换图表类型（图表工具栏）

Vue.js+ECharts：切换图表类型（图表工具栏）相关推荐

最新文章

热门文章