使用vue来绘制echarts图表（一)

最新推荐文章于 2024-09-25 16:04:58 发布

菜的抠脚的木木夕

最新推荐文章于 2024-09-25 16:04:58 发布

阅读量1.9k

点赞数 1

分类专栏： vue 文章标签：前端 vue html5 webpack javascript

本文链接：https://blog.youkuaiyun.com/qq_41108396/article/details/106572793

版权

vue 专栏收录该内容

10 篇文章

订阅专栏

本文介绍如何在Vue项目中使用ECharts绘制多种类型的柱状图，包括单图表、多数据叠加显示及多彩柱状图，通过实例展示配置项和代码实现。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

使用vue来绘制echarts图表（一)

一. 项目中引用相关的echarts

首先需要初始化vue项目，然后安装echarts
npm install echarts -s安装完成后就开始引入了
（1）全局引入
首先在main.js 里引入
import echarts from ‘echarts’;
Vue.prototype.$echarts = echarts；
这样就可以在任意地方使用echarts了，全局引入的缺点是增加了加载时间和存储空间。
（2）局部引入
局部引入是需要的时候再引入，但只能在引入的组件使用，别的地方不能使用。
const echarts = require(‘echarts’);

二.一个组件绘制多个柱状图

（1）首先新建了一个vue文件命名：login，使用element-ui来控制页面布局。
具体代码如下：

<template>
  <div>
    <el-row :gutter="500">
      <el-col :span="6">
        <div class="grid-content bg-purple" id="fix" :style="{width: '500px', height: '280px'}"></div></el-col>
      <el-col :span="6">
        <div class="grid-content bg-purple" id="person" :style="{width: '500px', height: '280px'}"></div></el-col>
    </el-row>
    <el-row :gutter="500">
      <el-col :span="6">
        <div class="grid-content bg-purple" id="Average_integral" :style="{width: '500px', height: '280px'}"></div></el-col>
      <el-col :span="6">
        <div class="grid-content bg-purple" id="warning_statistics" :style="{width: '500px', height: '280px'}"></div></el-col>
    </el-row>
    <el-row>
      <div :style="{width: '800px', height: '280px'}"><about/></div>
    </el-row>

  </div>
</template>

我这里放了三行两列的布局，这个根据个人需要自行调控
（2）接下来是开始画echarts，编写js部分的代码：
首先定义一个画图的方法drawLine，我们把它写在methods里面，然后给这个图表找个合适的位置，准备初始化echarts实例，再然后就是定义这个表格的结构和数据，最后在mounted里调用这个方法就可以了。
具体代码如下：

<script>
    // import About from "./About";
    export default {
      name: "login",
      // components: {About},
      data () {
        return {
        }
      },
      mounted(){
        this.drawLine();
      },
      methods: {
        drawLine(){
          // 基于准备好的dom，初始化echarts实例
          let myChart1 = this.$echarts.init(document.getElementById('fix'));
          // 绘制图表
          myChart1.setOption({
            title: { text: '整改场所排名（总次数）' },
            tooltip: {
              trigger:'axis',
              axisPointer:{
                type:'shadow',
              }
            },
            grid: {
              left: '3%',
              right: '6%',
              bottom: '3%',
              containLabel: true
            },
            xAxis: {
              type:'value',
            },
            yAxis: {
              type:'category',
              data:['场所4','场所6','场所10','场所1','场所8','场所5','场所9','场所7','场所2','场所3'],
              axisTick: {
                alignWithLabel: true
              }
            },
            series: [{
              name: '次数',
              type: 'bar',
              itemStyle: {
                normal: {
                  //好，这里就是重头戏了，定义一个list，然后根据所以取得不同的值，这样就实现了，
                  color: function(params) {
                    // build a color map as your need.
                    var colorList = [
                      '#C1232B','#B5C334','#FCCE10','#E87C25','#27727B',
                      '#FE8463','#9BCA63','#FAD860','#F3A43B','#60C0DD',
                      '#D7504B','#C6E579','#F4E001','#F0805A','#26C0C0'
                    ];
                    return colorList[params.dataIndex]
                  },
                  //以下为是否显示，显示位置和显示格式的设置了
                  label: {
                    show: true,
                    position: 'right',
//                             formatter: '{c}'
                    formatter: '{c}'
                  }
                }
              },
              //设置柱的宽度，要是数据太少，柱子太宽不美观~
              barWidth:10,
              data: [55, 66, 100, 110, 110, 112, 112, 115, 120, 150]
            }]
          });


        }
      }
    }
</script>

<style>
  .el-col {
    border-radius: 4px;
  }
  .grid-content {
    border-radius: 4px;
    min-height: 36px;
  }
</style>

我这里柱子的颜色有参考大神的代码。
最后把login这个组件设置为路由跳转页面就能显示出来了，具体参考vue-router，最后的效果如图所示。多彩单数据柱状图
因为数据都是静态的，剩下的柱状图都只要在后面添加setOption即可。
**一定要注意：**这里的let myChart1 = this.$echarts.init(document.getElementById(‘fix’));一定要跟div里的id对应起来，并且不能重复，而且要设置长宽，不然画不出来的哦。
第二个表格是多数据叠加显示：

let myChart2 = this.$echarts.init(document.getElementById('person'));
          myChart2.setOption({
            title: {
              text: '场所/个人触发逐月统计图',
              textStyle:{
                align:'center',
                color:'#000',
                fontSize:20,
              },
              // top:'100%',
              // left:'10%'
            },
            // backgroundColor:'#0f375f',
            tooltip: {
              trigger:'axis',
              axisPointer:{
                type:'shadow',
              }
            },
            legend: {
              type: 'scroll',
              data: (function (){
                var list = [];
                for (var i = 1; i <=10; i++) {
                  list.push('场所'+i);
                }
                return list;
              })(),
              // data: ['场所1', '场所2', '场所3', '场所4', '场所5','场所6','场所7','场所8','场所9','场所10'],
              top: "10%",
              bottom:"10%",
            },
            grid: {
              left: '3%',
              right: '4%',
              bottom: '3%',
              containLabel: true
            },
            xAxis: {
              type:'category',
              data:['May','Jun','Jul','Aug','Sep','Oct','Nov','Dec','Jan','Feb','Mar','Mar'],
              axisTick: {
                alignWithLabel: true
              }
            },
            yAxis: {
              type:'value',
            },
            series: [
              {
                name: '场所1',
                type: 'bar',
                stack: '总量',
                data: [320, 302, 301, 334, 390, 330, 320,120,230,220,130,220]
              },
              {
                name: '场所2',
                type: 'bar',
                stack: '总量',
                data: [120, 132, 101, 134, 90, 230, 210,301, 334, 390, 330, 320]
              },
              {
                name: '场所3',
                type: 'bar',
                stack: '总量',
                data: [220, 182, 191,301, 334, 390, 330, 320, 234, 290, 330, 310]
              },
              {
                name: '场所4',
                type: 'bar',
                stack: '总量',
                data: [150,301, 334, 390, 330, 320, 212, 201, 154, 190, 330, 410]
              },
              {
                name: '场所5',
                type: 'bar',
                stack: '总量',
                data: [820, 832, 901, 934, 1290, 1330, 301, 334, 390, 330, 320,1320]
              },
              {
                name: '场所6',
                type: 'bar',
                stack: '总量',
                data: [820, 832, 901, 934, 1290,301, 334, 390, 330, 320, 1330, 1320]
              },
              {
                name: '场所7',
                type: 'bar',
                stack: '总量',
                data: [820, 832, 301, 334, 390, 330, 320,901, 934, 1290, 1330, 1320]
              },
              {
                name: '场所8',
                type: 'bar',
                stack: '总量',
                data: [820, 832, 301, 334, 390, 330, 320,901, 934, 1290, 1330, 1320]
              },
              {
                name: '场所9',
                type: 'bar',
                stack: '总量',
                data: [820, 832, 301, 334, 390, 330, 320,901, 934, 1290, 1330, 1320]
              },
              {
                name: '场所10',
                type: 'bar',
                stack: '总量',
                data: [820, 832, 301, 334, 390, 330, 320,901, 934, 1290, 1330, 1320]
              }
            ]
          });

效果如图所示：
多种类型数据叠加柱状图显示
第三个多元数据多彩柱状图：

// 基于准备好的dom，初始化echarts实例
          let myChart3 = this.$echarts.init(document.getElementById('Average_integral'));
          // 绘制图表
          myChart3.setOption({
            title: {
              text: '场所平均积分/员工平均积分近一年按月变化曲线图',
              textStyle:{
                align:'center',
                color:'#000',
                fontSize:20,
              },
              // top:'100%',
              // left:'10%'
            },
            // backgroundColor:'#0f375f',
            tooltip: {
              trigger:'axis',
              axisPointer:{
                type:'shadow',
              }
            },
            legend: {
              type: 'scroll',
              data: (function (){
                var list = [];
                for (var i = 1; i <=10; i++) {
                  list.push('场所'+i);
                }
                return list;
              })(),
              // data: ['场所1', '场所2', '场所3', '场所4', '场所5','场所6','场所7','场所8','场所9','场所10'],
              // top: "10%",
              left:'5%',
              bottom:0,
            },
            grid: {
              left: '3%',
              right: '4%',
              bottom: '10%',
              containLabel: true
            },
            xAxis: {
              type:'category',
              data:['May','Jun','Jul','Aug','Sep','Oct','Nov','Dec','Jan','Feb','Mar','Mar'],
              axisTick: {
                alignWithLabel: true
              },
              axisLabel:{
                showMaxLabel: true
              }
            },
            yAxis: {
              type:'value',
            },
            series: [
              {
                name: '场所1',
                type: 'bar',
                data: [20, 34, 18, 14, 16,11,23,30,10,8,22,33],
                barWidth: 2, //柱子宽度
                //barGap: 1, //柱子之间间距
                itemStyle: {
                  normal: {
                    color: '#C1232B',
                    opacity: 1,
                  }
                }
              },
              {
                name: '场所2',
                type: 'bar',
                data: [10, 24, 5, 24, 16,20, 34, 18, 14, 16,11,23],
                barWidth: 2,
                // barGap: 1,
                itemStyle: {
                  normal: {
                    color: '#B5C334',
                    opacity: 1,
                  }
                }
              },
              {
                name: '场所3',
                type: 'bar',
                data: [7, 24, 18, 20, 6,24, 5, 24, 16,20, 34, 18],
                barWidth: 2,
                // barGap: 1,
                itemStyle: {
                  normal: {
                    color: '#FCCE10',
                    opacity: 1,
                  }
                }
              },
              {
                name: '场所4',
                type: 'bar',
                data: [7, 24, 18, 20, 6,24, 5, 24, 16,20, 34, 18],
                barWidth: 2,
                //barGap: 1,
                itemStyle: {
                  normal: {
                    color: '#E87C25',
                    opacity: 1,
                  }
                }
              },
              {
                name: '场所5',
                type: 'bar',
                data: [7, 24, 18, 20, 6,24, 5, 24, 16,20, 34, 18],
                barWidth: 2,
                // barGap: 1,
                itemStyle: {
                  normal: {
                    color: '#27727B',
                    opacity: 1,
                  }
                }
              },
              {
                name: '场所6',
                type: 'bar',
                data: [7, 24, 18, 20, 6,24, 5, 24, 16,20, 34, 18],
                barWidth: 2,
                // barGap: 1,
                itemStyle: {
                  normal: {
                    color: '#FE8463',
                    opacity: 1,
                  }
                }
              },
              {
                name: '场所7',
                type: 'bar',
                data: [7, 24, 18, 20, 6,24, 5, 24, 16,20, 34, 18],
                barWidth: 2,
                //barGap: 1,
                itemStyle: {
                  normal: {
                    color: '#9BCA63',
                    opacity: 1,
                  }
                }
              },
              {
                name: '场所8',
                type: 'bar',
                data: [7, 24, 18, 20, 6,24, 5, 24, 16,20, 34, 18],
                barWidth: 2,
                //barGap: 1,
                itemStyle: {
                  normal: {
                    color: '#FAD860',
                    opacity: 1,
                  }
                }
              },
              {
                name: '场所9',
                type: 'bar',
                data: [7, 24, 18, 20, 6,24, 5, 24, 16,20, 34, 18],
                barWidth: 2,
                //barGap: 1,
                itemStyle: {
                  normal: {
                    color: '#F3A43B',
                    opacity: 1,
                  }
                }
              },
              {
                name: '场所10',
                type: 'bar',
                data: [7, 24, 18, 20, 6,24, 5, 24, 16,20, 34, 18],
                barWidth: 2,
                // barGap: 1,
                itemStyle: {
                  normal: {
                    color: '#60C0DD',
                    opacity: 1,
                  }
                }
              }
            ]
          });