vue项目中使用echarts完成图表类的开发之柱状图

最新推荐文章于 2024-10-24 09:30:00 发布
原创 最新推荐文章于 2024-10-24 09:30:00 发布 · 1.5k 阅读 · 6 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vue #echarts #数据可视化

本文提供了两个 Vue 组件，分别用于创建水平和垂直柱状图，基于 ECharts 框架。组件接收数据属性并自适应窗口大小，详细配置了包括坐标轴、提示框、图例等在内的各种图表元素，适用于数据可视化场景。

所有的图表配置基本上大同小异，下面就列举一下有关柱状图的配置项：

废话不多说，请看代码：

子组件：水平柱状图（也就是图一）

<template>
  <div class="histogram" :style="{ 'width': histogramLevelData.width }">
    <div class="histogramBar" :id="id" :style="{'width':'100%','height': histogramLevelData.histogramBarHeight}"></div>
  </div>
</template>

<script>
let _c = { id: 1 };
let echarts = require("echarts");
export default {
  props: {
    histogramLevelData: {
      type: Object,
    },
  },
  data() {
    return {
      myHisLevelChart: "",
    };
  },
  created() {
    _c.id++;
    this.id = "c_histogramlevel_" + _c.id;
  },
  mounted() {
    // 初始化echarts
    this.$nextTick(()=>{
      this.initChart();
    })
    // 监听浏览器变化初始化echarts
    window.addEventListener('resize',this.initChart,false);
  },
  beforeDestroy () {
    window.removeEventListener('resize', this.initChart)
  },
  methods: {
    initChart() {
      let _this=this
      var chartDom = document.getElementById(this.id);
      if (
        this.myHisLevelChart != null &&
        this.myHisLevelChart != "" &&
        this.myHisLevelChart != undefined
      ) {
        this.myHisLevelChart.dispose(); //销毁
      }
      this.myHisLevelChart = echarts.init(chartDom);
      // 监听页面变化图表自适应
      this.myHisLevelChart.resize()
      var option = {
        tooltip:{
          trigger: "axis",
          axisPointer: {
            type: "shadow",//鼠标悬停显示样式
            shadowStyle:{
              shadowColor: 'rgba(0, 0, 0, 0.5)',
              shadowBlur: 2
            }
          },
        },
        legend:this.histogramLevelData.legend,//标记属性
        grid: this.histogramLevelData.grid,//绘图区调整
        yAxis:this.histogramLevelData.yAxis,//y轴显示数值，以及范围
        xAxis: {//X轴显示类型
          type: this.histogramLevelData.xAxis.type,
          data: this.histogramLevelData.xAxis.dataList,
          axisLabel: {//坐标轴文字显示样式
            interval: 0,
            lineHeight:this.histogramLevelData.xAxis.axisLabel.lineHeight,
            rotate:this.histogramLevelData.xAxis.axisLabel.rotate,
            formatter:function(value){  
                var str = ""; 
                var num = _this.histogramLevelData.xAxis.axisLabel.fontNum; //每行显示字数 
                var valLength = value.length; //该项Y轴字数  
                var rowNum = Math.ceil(valLength / num); // 行数  
                if(rowNum > 1) {
                    for(var i = 0; i < rowNum; i++) {
                        var temp = "";
                        var start = i * num;
                        var end = start + num;
                        temp = value.substring(start, end) + "\n";
                        str += temp; 
                    }
                    return str;
                } else {
                    return value;
                } 
            }
          }
        },
        series: this.histogramLevelData.series
      };
      this.myHisLevelChart.setOption(option);
    },
  },
};
</script>

<style lang="scss" scoped>
.histogram {
  width: 100%;
}
</style>

垂直柱状图（如图二所示）

<template>
  <div class="histogram" :style="{ 'width': histogramData.width }">
  <div class="histogramBar" :id="id" :style="{'width':'100%','height': histogramData.histogramBarHeight}"></div>
  </div>
</template>

<script>
let _c = { id: 1 };
let echarts = require("echarts");
export default {
  props: {
    histogramData: {
      type: Object,
    },
  },
  data() {
    return {
      myHisChart: "",
    };
  },
  created() {
    _c.id++;
    this.id = "c_histogram_" + _c.id;
  },
  mounted() {
    // 初始化echarts
    this.$nextTick(()=>{
      this.initChart();
    })
    // 监听浏览器变化初始化echarts
    window.addEventListener('resize',this.initChart,false);
  },
  beforeDestroy () {
    window.removeEventListener('resize', this.initChart)
  },
  methods: {
    initChart() {
      let _this=this
      var chartDom = document.getElementById(this.id);
      if (
        this.myHisChart != null &&
        this.myHisChart != "" &&
        this.myHisChart != undefined
      ) {
        this.myHisChart.dispose(); //销毁
      }
      this.myHisChart = echarts.init(chartDom);
      // 监听页面变化图表自适应
      this.myHisChart.resize()
      var option = {
        tooltip:{
          trigger: "axis",
          axisPointer: {
            type: "shadow",//鼠标悬停显示样式
            shadowStyle:{
              shadowColor: 'rgba(0, 0, 0, 0.5)',
              shadowBlur: 2
            }
          },
        },
        legend:this.histogramData.legend,//标记属性
        grid: this.histogramData.grid,//绘图区调整
        xAxis:this.histogramData.xAxis,//x轴显示数值，以及范围
        yAxis: {//Y轴显示类型
          type: this.histogramData.yAxis.type,
          data: this.histogramData.yAxis.dataList,
          axisLabel: {//坐标轴文字显示样式
            interval: 0,
            lineHeight:this.histogramData.yAxis.axisLabel.lineHeight,
            rotate:this.histogramData.yAxis.axisLabel.rotate,
            formatter:function(value){  
                var str = ""; 
                var num = _this.histogramData.yAxis.axisLabel.fontNum; //每行显示字数 
                var valLength = value.length; //该项Y轴字数  
                var rowNum = Math.ceil(valLength / num); // 行数  
                if(rowNum > 1) {
                    for(var i = 0; i < rowNum; i++) {
                        var temp = "";
                        var start = i * num;
                        var end = start + num;
                        temp = value.substring(start, end) + "\n";
                        str += temp; 
                    }
                    return str;
                } else {
                    return value;
                } 
            }
          }
        },
        series: this.histogramData.series
      };
      this.myHisChart.setOption(option);
    },
  },
};
</script>

<style lang="scss" scoped>
.histogram {
  width: 100%;
  .companyList-header {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    height: 22px;
    line-height: 22px;
    .slide-line {
      display: inline-block;
      width: 4px;
      height: 16px;
      background: #1d96ff;
      border-radius: 2px;
      margin: 0;
      margin-right: 16px;
    }
    .companyList-header--one {
      font-weight: 600;
      font-size: 14px;
      color: #333;
    }
  }
}
</style>

父组件

<template>
  <div class="indicators">
    <!-- 垂直柱状图 -->
    <div class="histogram-box">
      <HistoGramClum class="histogram" :histogramData="histogramData" />
    </div>
    <!-- 水平柱状图 -->
    <div class="histogram-box-level">
      <HistoGramLevel
        class="histogram"
        :histogramLevelData="histogramLevelData"
      />
    </div>
  </div>
</template>

<script>
import HistoGramClum from "@/components/histogramclum.vue";
import HistoGramLevel from "@/components/histogramlevel.vue";
export default {
  name: "indicators",
  components: {
    HistoGramClum,
    HistoGramLevel,
  },
  data() {
    return {
      // 垂直柱状图
      histogramData: {
        width: 100 + "%", //柱状图盒子宽度
        histogramBarHeight: "34.282vw",
        legend: {
          //标记属性
          data: ["未批复", "批复"],
          orient: "vertical", //标记排列显示
          top: -1, //标记位置
          right: 1 + "%", //标记位置
          icon: "roundRect",
          itemWidth: 8,
          itemHeight: 8,
        },
        grid: {
          //绘图区调整
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: {
          //X轴显示数值
          type: "value",
          boundaryGap: [0, 0.01], //数值精度
          splitNumber: 1,
          min: 0,
          max: 20,
          interval: 5,
          axisLabel: {},
        },
        yAxis: {
          //Y轴显示分类
          type: "category",
          dataList: [
            "建筑工程施工许可证",
            "建设工程规划许可证",
            "政府投资项目初步设计批复",
            "建设工程设计方案确认书",
            "建设用地规划许可证",
            "企业投资项目备案表/政府投资项目可行性研究报告批复",
          ],
          axisLabel: {
            //坐标轴文字显示样式
            lineHeight: 18, //字体行高
            fontNum: 14, //每行显示字数
            rotate: 0, //文字旋转角度，0不旋转
          },
        },
        series: [
          //柱状图数据
          {
            name: "未批复",
            type: "bar",
            data: [1, 0, 2, 7, 16, 10],
            itemStyle: {
              color: "#FF9314", //柱状图颜色
            },
            label: {
              show: true,
              position: "right", //数值在右边显示
            },
            labelLine: { show: false }, //是否显示线条
          },
          {
            name: "批复",
            type: "bar",
            data: [2, 2, 9, 12, 15, 14],
            itemStyle: {
              color: "#1492FF",
            },
            label: {
              show: true,
              position: "right", //数值在右边显示
            },
            labelLine: { show: false }, //是否显示线条
          },
        ],
      },
      // 水平柱状图
      histogramLevelData: {
        width: 100 + "%", //柱状图盒子宽度
        histogramBarHeight: "37.005vw",
        legend: {
          //标记属性
          data: ["月度上报完成率", "问题项目督查反馈率", "年度目标完成率"],
          orient: "horizontal", //标记排列显示
          top: 15, //标记位置
          left: 3 + "%", //标记位置
          icon: "roundRect",
          itemWidth: 8,
          itemHeight: 8,
        },
        grid: {
          //绘图区调整
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        yAxis: {
          //Y轴显示数值
          type: "value",
          boundaryGap: [0, 0.01], //数值精度
          splitNumber: 1,
          min: 0,
          max: 100,
          interval: 20,
          axisLabel: {},
        },
        xAxis: {
          //X轴显示分类
          type: "category",
          dataList: [
            "北山街道",
            "西溪街道",
            "翠苑街道",
            "古荡街道",
            "留下街道",
            "转塘街道",
            "蒋村街道",
            "灵隐街道",
            "文新街道",
            "三墩镇",
            "双浦镇",
            "艺创小镇",
            "云栖小镇",
            "紫荆港科技城",
            "西溪谷"
          ],
          axisLabel: {
            //坐标轴文字显示样式
            lineHeight: 18, //字体行高
            fontNum: 18, //每行显示字数
            rotate: 45, //文字旋转角度，0不旋转
          },
        },
        series: [
          //柱状图数据
          {
            name: "月度上报完成率",
            type: "bar",
            data: [23, 43, 70, 22, 41, 83, 42, 81, 8, 30, 29, 4,39,62,96],
            itemStyle: {
              color: "#1492FF", //柱状图颜色
            },
            label: {
              show: false,
              position: "top", //数值在右边显示
            },
            labelLine: { show: false }, //是否显示线条
          },
          {
            name: "问题项目督查反馈率",
            type: "bar",
            data: [58, 23, 72, 18, 83, 79, 81, 89, 56, 100, 9, 37,43,40.5,73],
            itemStyle: {
              color: "#09C592",
            },
            label: {
              show: false,
              position: "top", //数值在右边显示
            },
            labelLine: { show: false }, //是否显示线条
          },
          {
            name: "年度目标完成率",
            type: "bar",
            data: [100, 82, 42, 56, 82, 77, 76, 78, 14, 94, 10, 9,62,58,39],
            itemStyle: {
              color: "#FF9314",
            },
            label: {
              show: false,
              position: "top", //数值在右边显示
            },
            labelLine: { show: false }, //是否显示线条
          },
        ],
      },
    };
  },
  mounted() {},
};
</script>

<style lang="scss" scoped>
.indicators {
  width: 100%;
  margin-top: 16px;
  .pie-box {
    width: 100%;
    height: 300px;
    padding-top: 15px;
    background-color: #fff;
  }
  .histogram-box {
    width: 100%;
    height: 300px;
    margin-top: 16px;
    background-color: #fff;
    padding-top: 15px;
    padding-bottom: 20px;
  }
  .histogram-box-level {
    width: 100%;
    margin-top: 16px;
    background-color: #fff;
    height: 300px;
    padding-top: 15px;
    padding-bottom: 20px;
  }
}
</style>

代码展示完毕，均可复制粘贴直接使用，相关调整，请手动调节

皮蛋灬
关注
vue使用echarts实现水平柱形图
believet93的博客
08-27 3318
文件结构: testData.js文件 const dtuEdition = { name: '有方有线', number: 60, proportion: 40, edition: { '有方有线V1.0.0': 20, '有方有线V1.2.0': 15, '有方有线V2.0.1': 10, '有方有线V3.0.0': 8, '有...
在vue项目中使用echarts制作3D效果柱状图
黄-小智的博客
06-25 3153
在vue项目中使用echarts制作3D效果柱状图 1、第一步安装echarts组件。 npm install echarts 2、第二步安装好echarts后，安装echarts3d图形组件echarts-gl npm install echarts-gl 如果package.json文件里面也可以找到这个配置，则安装成功 3.第三步在需要使用Echarts页面的script中附上以下代码 import * as echarts from 'echarts'; import 'echarts-gl';
vue使用echarts实现水平柱形图实例
10-14
主要介绍了vue使用echarts实现水平柱形图实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue项目中使用echarts画柱状图
laoyaoshilaoyao的博客
09-28 1165
一、安装echarts npm install echarts --save 二、在你画图的页面中引入 import echarts from ‘echarts’ 三、给div一个id 四、在data初始化数据 data() { return { chart: null, option: { title: { text: ‘Biu~简单柱状图示例’ }, tooltip: {}, legend: { data:[‘销量’] }, xAxis: { data: [“衬衫”,“羊毛衫”,“雪纺衫”,“裤
vue 水平柱状图
carbonzhao的专栏
06-11 466
最近开发后端控制系统的时候 ，遇到要实现水平摆放的柱状图的需求，研究了一下其他网上人员的实现逻辑，进行调整后，在此记录一下，如有雷同，勿怪罪。Echarts版本是5.4.2的版本！版本不同，可能会出现差异！先看一下实现效果：如下图。一、水平柱状图的实现。
vue.js+Echarts开发图表放大缩小功能实例
10-19
本文介绍了如何在使用Vue.js框架结合Echarts图表库来实现图表放大缩小功能的方法。Echarts是一个使用JavaScript实现的开源可视化库，可以在网页中快速绘制各种图表，而Vue.js是一个构建用户界面的渐进式框架。将两者...
springboot echarts vue 柱状图
01-25
在本项目中，我们结合了SpringBoot、Vue和ECharts三个技术栈，旨在实现一个后端数据驱动的前端柱状图展示。以下是关于这些技术及其整合应用的详细知识点： 1. **SpringBoot**： SpringBoot是Spring框架的一个简化...
vue-cli项目中使用echarts图表实例
10-17
// 在需要展示ECharts图表的组件中 ;height:400px;"> export default { name: 'Home', mounted() { // 引入ECharts主模块 var echarts = require('echarts/lib/echarts'); // 引入柱状图 require('...
在vue中使用echarts(折线图的demo,markline用法)
10-15
在`mounted`生命周期钩子中，我们初始化ECharts图表，调用`this.$echarts.init()`方法创建图表实例，然后使用`setOption()`方法设置配置。 在`markLine`中，你可以根据需求配置不同类型的数据，如平均值、最大值、...
如何在vue中使用echarts?
修炼中的小妖怪
02-13 308
一、在vue项目中同，命令行安装 echarts依赖： npm install echarts --save 二、引入ECharts 安装好的ECharts会放在node_modules目录里 1.直接在项目代码引入 可以直接在项目代码中 require(‘echarts’) 得到 ECharts。声明一个echarts变量，直接使用变量即可。 Home.vue //需要使用的页面 /...
vue2结合echarts实现数据排名列表——前端柱状进度条排行榜
最新发布
为写出赏心悦目、容易维护的代码而探索
10-24 1967
当我们直接拿别人二次开发过的echarts图，发现有点无从下手，搜索后也没发现有啥好属性，某处边距就是很宽看着难受。父元素相对定位，子元素绝对定位，直接调整子元素Echarts图的宽高来缩放图表，通过定位，让框与框的间距消失。那么怎么真真正正的解决上述几个问题呢。解决前代码：根据父元素可视高度实现。解决后代码：根据数据数量多少决定。），准备在此基础上向UI靠拢。直接搜到类似在线代码（
vue引入echart柱状图详细流程步骤
伟大光荣正确的博客
09-04 1369
安装echarts插件： npm install echarts --save 这里只讲按需引入，因为全局引入写死的比较简单: 在需要引入的.vue中： import * as echarts from 'echarts' 接下来创建放置柱状图的容器： <div id='chart' style="width:100%;height:300px"></div> JS mounted方法中执行初始化echart的方法(这里我加了一个延时方法确保..
pyecharts+Vue在显示图表
I_am_dio的博客
10-09 1935
vue获取并显示pyecharts图表
vue使用echarts
lx19971212的博客
10-11 739
首先在vue安装 echarts 命令为 npm install echarts 之后在main.js引入文件并使用它 命令: import echarts from 'echarts' Vue.prototype.$echarts = echarts 在要使用echarts的vue文件写如下代码(本文是通过接口获取数据)                  
(pyecharts+flask) + (vue + ECharts.js)实现web表格Demo
爬山的咸鱼
04-24 2098
基于(pyecharts+flask) + (vue + ECharts.js)实现web表格Demo
用vscode绘制一个柱状图
z912631832的博客
03-10 1377
有了Echarts.js文件，就需要在vscode新建js，css，image这三个文件夹，然后把Echarts.js文件放在js文件下（如图所示）在绘制一个柱状图之前你需要有Echarts.js文件。第三步：基于准备好的dom，初始化echarts实例。最后右击点标注的英文运行，显示成功就OK了。第一步：把脚本引入到html文件里。然后新建html文件（如图所示）第五步：使用配置项和数据显示图表。第四步：编写图表的配置项和数据。第二步：设置Dom的大小。
VSCode 画流程图、一秒将你变成 2D 动画……GitHub 热点速览
程序人生的博客
05-19 6172
作者 | HelloGitHub-小鱼干来源 | HelloGitHub摘要：后浪，这个五月热词用来概括 GitHub 本周热点无疑是最佳词汇。Deno 这个 Node.js 作者制造出...
可视化常见绘图（一）堆叠图
热门推荐
pcx171的博客
12-28 1万+
介绍matplotlib实现常见的堆叠图
Vue项目中整合ECharts实现折线图柱状图饼图
首先，从标题“Vue整合ECharts图表[项目代码]”可以看出，该项目的核心目标是在Vue.js项目环境中成功集成并使用ECharts图表库。ECharts是由百度开源的一款基于JavaScript的可视化图表库，支持丰富的图表类型，包括但...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值