Vue前端柱状图实例(叠状条形图)

目录
  • vue前端柱状图(叠状条形图)
    • 效果图
  • vue echarts柱状图自定义formatter
    • echarts双柱状图自定义tooltip
  • 总结

vue前端柱状图(叠状条形图)

通过echarts来实现柱状图的效果,echarts是针对数据报表等展现的一个产品,具体了解看官方网站:Echarts官网,在这个官网中有详细教程以及API,很容易入手Echarts,从个人刚学习Echarts图表来看,它的难度在于它有自己的一套属性,这和我们平时用的css是不同的,因而我们需要什么效果就得去遵守它的属性,去识别图表的各个部分的专业名称,才能从它API中获取相应属性去实现你想要效果。

效果图

代码:

<template>
	<div>
		<!-- 柱状图 -->
		<el-row :gutter="80">
			<!-- 柱状图两侧间距 最大24 -->
			<el-col :span="24">
				<div class="border-card ">
					<el-row>
						<div class="chart-wrapper">
							<bar-chart ref="chartOne" v-if="chartOneShow" style="width:100%;height:400px"
								:option="chartOptionOne" />
						</div>
					</el-row>
				</div>
			</el-col>
		</el-row>
	</div>
</template>

<script>
    //保存的柱状图组件路径
	import BarChart from "../../dashboard/chart.vue";
    export default {
      //使用的柱状图组件
	  components: {
	  	BarChart,
	  },
	  data(){
	  	return{
			//表图选项
			chartOptionOne: {},
			//表图显示
			chartOneShow: true,
            //前端接收到的数据
			tableData: [],
        }
      },
      created() {
	    this.getList();
	  },
      methods: {
	    getList() {
	      this.loading = true;
		  let data=[];
		  let data1=[];
		  let data2=[];
		  let data3=[];
	      taskStatisticsRwpf(this.queryParams).then(response => {
	        this.tableData = response.data;
			for (var i = 0; i < this.tableData.length; i++) {
				data.push(this.tableData[i].字段名)//此data为x坐标展示的文字
				data1.push(this.tableData[i].字段名)
				data2.push(this.tableData[i].字段名)
				data3.push(this.tableData[i].字段名)
			}
			this.getChartsData(data,data1,data2,data3);
	        this.loading = false;
	      });
	    },
		getChartsData(data,data1,data2,data3) {
			this.chartOneShow = false
			this.chartTwoShow = false
			let that = this;
			taskStatisticsRwpf({
				queryType: "chart"
			}).then(response => {
			that.chartOptionOne = {
				title: {
				    text: "柱状图标题名",
					x:'center',
					y:'top',
					textAlign:'left',   //位置
					textStyle:{
					    //文字颜色
					    color:'#000000',
					    //字体风格,'normal','italic','oblique'
					    fontStyle:'normal',
					    //字体粗细 'normal','bold','bolder','lighter',100 | 200 | 300 | 400...
					    fontWeight:'400',
					    //字体系列
					    // fontFamily:'sans-serif',
					    //字体大小
					    fontSize:20,
					}
				},
				grid: {
				  left: '1%',
				  right: '1%',
				  containLabel: true
				},
				legend: {
				    data: data1,data2,data3
				},
                //鼠标悬停显示数据
				tooltip: {
				    trigger: 'axis',
				    axisPointer: {
				      type: 'shadow'
				    }
				},
                //x坐标
				xAxis: {
					type: 'category',
                    //x坐标显示的文字
					data: data,
					axisLabel: {
					//x轴文字间距
					interval:0,
					//x轴文字倾斜度
					rotate:0
					}
				},
                //y坐标
				yAxis: {
					type: 'value'
				},
				series: [{
					      name: '文字名',
					      type: 'bar',
					      stack: 'total',
					      label: {
					        show: true
					      },
					      emphasis: {
					        focus: 'series'
					      },
					      data: data1
					    },
					    {
					      name: '文字名',
					      type: 'bar',
					      stack: 'total',
					      label: {
					        show: true
					      },
					      emphasis: {
					        focus: 'series'
					      },
					      data: data2
					    },
					    {
					      name: '文字名',
					      type: 'bar',
					      stack: 'total',
					      label: {
					        show: true
					      },
					      emphasis: {
					        focus: 'series'
					      },
					      data: data3
					    },
					    {
					      stack: 'total',
					type: 'bar',
					//设置柱状图大小
					barWidth: 30,
					label: {
					      // 柱图头部显示值
					      show: true,
					      position: "right",
					      color: "#333",
					      fontSize: "12px",
					      formatter: (params) => {
					        return params.value[params.encode.x[0]];
					      },
					}
				}]
			};
                //表图显示
				this.chartOneShow = true
			})
		},
	  }
    }
</script>

vue echarts柱状图自定义formatter

echarts双柱状图自定义tooltip

<template>
  <div id="echartsId" style="width:100%;height:200px;"></div>
</template>
zhuDouble() {
      var myChart = echarts.init(document.getElementById('echartsId'))
      window.addEventListener('resize', function () {
        myChart.resize()
      })
      myChart.setOption({
        legend: {
          left: 'center',
          bottom:'3%',
          icon: 'circle',
          data: ['Forest', 'Steppe'],
          textStyle: {
            fontSize: 12,
            color: '#8C8C8C'
          }
        },
        xAxis: {
          type: 'category',
          axisTick: {
            show: false // 去掉x轴 小细条
          },
          data: ['2018', '2019', '2020', '2021', '2022'],
          axisLabel: {
            width: 30,
            overflow: "breakAll",
            fontSize: 11,
          },
        },
        grid: {
          left: '5%',
          right: '8%',
          bottom: '12%',
          top: '8%',
          containLabel: true,
        },
        color: ['#3372FF', '#21C9E6'],
        yAxis: {
          type: 'value'
        },
        tooltip: {
          trigger: 'item',
          formatter:function(params){
            let tip = '';
            tip += '<div>总数' + 23 + '</div><div>'+ params.seriesName + '数量' + params.value +'所</p></div>'
            return tip
          },
          borderColor: "rgba(255, 255, 255, 1)"
        },
        series: [
        {
	      name: 'Forest',
	      type: 'bar',
	      data: [320, 332, 301, 334, 390]
	    },
	    {
	      name: 'Steppe',
	      type: 'bar',
	      data: [220, 182, 191, 234, 290]
	    },
      })
    }

总结

以上为个人经验,希望能给大家一个参考,也希望大家多多支持我们。

(0)

相关推荐

  • vue+echarts实现堆叠柱状图

    本文实例为大家分享了vue+echarts实现堆叠柱状图的具体代码,供大家参考,具体内容如下 echarts-子组件 <template> <div class="chart" ref="chartEle"></div> </template> <script> import echarts from "echarts"; import eventBus from '@/componen

  • vue+Echart实现立体柱状图

    本文实例为大家分享了Echart+Vue制作立体柱状图,供大家参考,具体内容如下 先来看一下制作完成后的效果: 废话不多说,直接上代码: HTML代码: <div class="lineOne">       <span class="spanTitle">使用时长排行</span>      <div id="timeRange" style="width:100%;height:400px&

  • 详解vue使用Echarts画柱状图

    目录 1 引入Echarts 1.1 安装 1.2 引入 2 基本柱状图 3 多列柱状图 4 柱状图样式设置 4.1 柱条样式 4.2 柱条间距 5 动态排序柱状图 6 总结 1 引入Echarts 1.1 安装 使用如下命令通过 npm 安装 ECharts npm install echarts --save 注:本文安装Echarts版本为:“echarts”: “5.2.1” 1.2 引入 安装完成以后,可以将echarts全部引入,这样一来,我们可以在该页面使用echarts所有组件:

  • Vue前端柱状图实例(叠状条形图)

    目录 vue前端柱状图(叠状条形图) 效果图 vue echarts柱状图自定义formatter echarts双柱状图自定义tooltip 总结 vue前端柱状图(叠状条形图) 通过echarts来实现柱状图的效果,echarts是针对数据报表等展现的一个产品,具体了解看官方网站:Echarts官网,在这个官网中有详细教程以及API,很容易入手Echarts,从个人刚学习Echarts图表来看,它的难度在于它有自己的一套属性,这和我们平时用的css是不同的,因而我们需要什么效果就得去遵守它的

  • asp.net中生成饼状与柱状图实例

    本文实例讲述了asp.net中生成饼状与柱状图的实现方法.分享给大家供大家参考.具体方法如下: 一.生成图形的公共方法: 复制代码 代码如下: using System; using System.Collections.Generic; using System.Text; // //using System.Data; //using System.Web.UI.WebControls; // using System.Drawing; using System.Drawing.Imagin

  • 搭建element-ui的Vue前端工程操作实例

    一.安装npm镜像 (1)下载node.js, 配置node.js的环境变量 检测PATH环境变量是否配置了Node.js,点击开始=>运行=>输入"cmd" => 输入命令"path" 检查Node.js版本 在命令窗口输入:npm install -g cnpm –registry=https://registry.npm.taobao.org 二.安装全局vue-cli (1)npm install -g vue-cli 回车,验证是否安装成

  • python 画条形图(柱状图)实例

    条形图(bar chart),也称为柱状图,是一种以长方形的长度为变量的统计图表,长方形的长度与它所对应的变量数值呈一定比例. 1. 竖放条形图 画条形图要用到 pyplot 中的 bar 函数,该函数的基本语法为: bar(x, height, [width], **kwargs) x 数组,每个条形的横坐标 height 个数或一个数组,条形的高度 [width] 可选参数,一个数或一个数组,条形的宽度,默认为 0.8 **kwargs 不定长的关键字参数,用字典形式设置条形图的其他属性 *

  • Vue前端判断数据对象是否为空的实例

    看代码: Vue提供了强大的前端开发架构,很多时候我们需要判断数据对象是否为空,使用typeof判断是个不错选择,具体代码见图. 补充知识:vue打包后 history模式 跟子目录 静态文件路径 分析 history 根目录 路由mode变为history后,需要在服务器配置 url重写,在根目录 创建web.config文件 加下面内容复制进去 <?xml version="1.0" encoding="utf-8"?> <configurat

  • vue前端路由以及vue-router两种模式实例详解

    目录 前言 1.什么是前端路由 (1)后端路由阶段 (2)前后端分离路由阶段 (3)单页面应用阶段 2.vue-router提供了hash和history两种路由模式 (1)hash模式 (2)history模式 (3)两种模式的比较 补充:路由模式解析 总结 前言 路由这个概念最早在后端出现,随后前后端分离,直至当今的单页面应用,路由也在一直发生变化.本文来总结一下路由变化和vue-router中的路由模式区别相关知识点. 1.什么是前端路由 (1)后端路由阶段 早期的页面都是由html页面在

  • python+matplotlib实现礼盒柱状图实例代码

    演示结果: 完整代码: import matplotlib.pyplot as plt import numpy as np from matplotlib.image import BboxImage from matplotlib._png import read_png import matplotlib.colors from matplotlib.cbook import get_sample_data class RibbonBox(object): original_image =

  • Vue前端开发规范整理(推荐)

    基于Vue官方风格指南整理 一.强制 1. 组件名为多个单词 组件名应该始终是多个单词的,根组件 App 除外. 正例: export default { name: 'TodoItem', // ... } 反例: export default { name: 'Todo', // ... } 2. 组件数据 组件的 data 必须是一个函数. 当在组件中使用 data 属性的时候 (除了 new Vue 外的任何地方),它的值必须是返回一个对象的函数. 正例: // In a .vue fi

  • laravel-admin 与 vue 结合使用实例代码详解

    由于 Laravel-admin 采用的是 pjax 的方式刷新页面,意味着很多页面刷新的操作,并不是刷新整个 document,而是从服务器拿到部分 document,再通过类似 $("#pjax-container").html(newPart) 的方式更新的. 这就造成一个问题,每次 pjax 刷新,都会破坏 vue 的 dom 映射. 所以理论上有2种方法解决: 重新绑定一下 vue 的映射关系 在某些页面禁止 pjax 1 太难搞,而且没啥资料,放弃.2 的话比较可行. 部分

  • Vue 前端实现登陆拦截及axios 拦截器的使用

    该项目是利用了Github 提供的personal token作为登录token,通过token访问你的Repository List.通过这个项目学习如何实现一个前端项目中所需要的 登录及拦截.登出.token失效的拦截及对应 axios 拦截器的使用. 准备 你需要先生成自己的 Github Personal Token( 生成Token). Token 生成后 访问 Demo,即可查看你的Repository List. 项目结构 ├── README.md ├── dist // 打包构

随机推荐