vue echarts 柱状图

安装echarts

 npm install echarts --save

引入echarts

import * as echarts from 'echarts'Vue.prototype.$echarts = echarts

准备容器

<div id="MiddleLayerCadreSex" ></div>

javascript代码

   // 初始化echarts实例var myChart = this.$echarts.init(document.getElementById('MiddleLayerCadreAge'))// 图表的配置项和数据var option = {title: {text: '中层干部队伍年龄分布情况'},legend: {right: '20px',top: '20px',data: ['正股职', '副股职']},xAxis: {type: 'category',data: []},yAxis: {type: 'value'},series: [],tooltip: {trigger: 'item'}}var xData = []var EquityPosition = []var DeputyStockPosition = []// PersonnelMiddleLayerCadreAge 后端返回的数据集合this.PersonnelMiddleLayerCadreAge.filter((item, index) => {xData.push(item.ageScope)EquityPosition.push(item.equityPosition)DeputyStockPosition.push(item.deputyStockPosition)})option.xAxis.data = xDataoption.series.push({label: {formatter: '{name|{b}}{time|{c}}人',minMargin: 5,edgeDistance: 10,lineHeight: 15,rich: {time: {fontSize: 10,color: '#999'}}},name: '正股职',data: EquityPosition,type: 'bar',showBackground: true,backgroundStyle: {color: 'rgba(180, 180, 180, 0.2)'},barWidth: 15,color: '#769FFF',itemStyle: {normal: {// 这里设置柱形图圆角 [左上角，右上角，右下角，左下角]barBorderRadius: 20}}})option.series.push({name: '副股职',data: DeputyStockPosition,type: 'bar',showBackground: true,backgroundStyle: {color: 'rgba(180, 180, 180, 0.2)'},barWidth: 15,color: '#00C28C',itemStyle: {normal: {// 这里设置柱形图圆角 [左上角，右上角，右下角，左下角]barBorderRadius: 20}}})// 使用刚指定的配置项和数据显示图表。myChart.setOption(option)// 点击柱状图有效区域myChart.on('click', (params) => {console.log(params)var name = params.namevar seriesName = params.seriesName})

效果图

vue echarts 柱状图相关推荐

vue echarts柱状图隐藏坐标轴刻度线等横向显示百分比
隐藏坐标线 axisLine: {show: false }, 隐藏刻度线 axisTick: {show: false }, label展示formatter百分比已经封装好的组件,可以直接复制代 ...
vue echarts柱状图圆饼联动
<div><div id="main1" style="width: 800px; height: 50 ...
vue——echarts柱状图横轴文字太多放不下【处理办法】
1. 如果单纯是文字太多,且中间无法分割开的话,可以采用两种方式: 文字倾斜展示效果: 在options配置中的xAxis中配置如下代码: axisLabel: {interval: 0,rotat ...
前端vue显示柱状图_Vue—Echarts 柱状图
使用Vue做后台管理系统的时候避免不了使用Echarts来展示对应的数据,下面是使用Echarts柱状图来展示对应数据的实例. ee05abaf9633184a9c012631b642d970.png ...
Vue实现ECharts柱状图数据轮播（自动分页加载）
Vue实现ECharts柱状图数据轮播(自动分页加载) vue <div id="main"></div>``` js import echarts fro ...
深夜学姐问我在Vue中Echarts柱状图如何自定义顶部亮点
深夜学姐问我在Vue中Echarts柱状图如何自定义顶部亮点先看效果图我们可以看到图中图表不仅有渐变色,同时柱状图顶部位置有一个不相同的顶部亮点(图片) 接下来,我们一起来实现一下这个效果 1. ...
echarts柱状图渐变堆叠柱状图渐变小程序 vue
echarts堆叠柱状图渐变官网实例堆叠柱状图堆叠渐变柱状图 import * as echarts from '../../ec-canvas/echarts'; //微信小程序需引用,其他正 ...
Vue+ECharts的小示例
Vue+ECharts做数据可视化 1. Vue Vue 是一套用于构建用户界面的渐进式框架.与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用.Vue 的核心库只关注视图层,不仅易于上手, ...
Echarts 柱状图横向展示和竖向展示
第021个点击查看专栏目录本示例是显示柱状图,分别是横向展示和纵向展示.关键是X轴和Y轴的参数互换. 文章目录横向示例效果横向示例源代码(共81行) 纵向示例效果纵向示例源代码(共81行) ...
Vue+Echarts构建可视化大数据平台实战项目（上）粒子动效，登录界面抖动，背景图轮播★
Vue+Echarts构建可视化大数据平台实战项目(上) 前言分享之前我们先来普及一下什么是数据可视化?数据可视化可以把数据从冰冷的数字转换成图形,揭示蕴含在数据中的规律和道理.数据可视化通俗来说就 ...

vue echarts 柱状图

安装echarts

引入echarts

准备容器

javascript代码

效果图

vue echarts 柱状图相关推荐

最新文章

热门文章