devbox
Monodyee
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

Vue+ElementUI中使用Echarts绘制圆环图 折线图 饼图 柱状图_elementui折线图

作者：Monodyee | 2024-05-12 00:41:24

赞

踩

elementui折线图

Vue+ElementUI中使用Echarts绘制圆环图 折线图 饼图 柱状图

前言

今天给大家介绍下如何在Vue+ElementUI中使用Echarts绘制圆环图 折线图 饼图 柱状图 （全局引用组件后，代码放入可直接运行）。

环境配置

安装

//npm也一样
cnpm install echarts --save

  • 1
  • 2

全局引用

main.js中配置

//引入 echarts
import echarts from 'echarts'
//注册组件
Vue.prototype.$echarts = echarts

  • 1
  • 2
  • 3
  • 4

圆环图

全局注册好组件之后就让我们进入正题吧，第一步先绘制圆环图吧。先上结果图：
在这里插入图片描述

在HTML部分先创建一个容器存放

<template>
  <div class="test2" style="width:600px;height:400px;">
      <div id="myChart" style="width:100%;height:278px;float:left;"></div>
  </div>
</template>

  • 1
  • 2
  • 3
  • 4
  • 5

JS部分

<script>
export default {
  name: 'test2',
  data () {
    return {
      myChart: '',
      opinionData2: [
        { value: 1, name: '校园暴力行为', itemStyle: 'red' },
        { value: 45, name: '正常行为', itemStyle: '#1FC48D' },
        { value: 3, name: '睡觉行为', itemStyle: '#6DC8EC' },
        { value: 3, name: '玩手机行为', itemStyle: '#3F8FFF' }
      ]
    }
  },
  mounted: function () {
    this.drawLine()
  },
  methods: {
    drawLine () {
      this.myChart = this.$echarts.init(document.getElementById('myChart'))
      this.myChart.setOption({
        title: {
          text: '班级行为分析', // 主标题
          subtext: '', // 副标题
          x: 'left' // x轴方向对齐方式
        },
        grid: { containLabel: true },
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b} : {d}%'
        },
        // color: ['#1FC48D', '#F5A60A', '#6DC8EC', '#3F8FFF'],
        color: ['red', '#1FC48D', '#6DC8EC', '#3F8FFF'],
        // backgroundColor: '#ffffff',
        legend: {
          orient: 'vertical',
          icon: 'circle',
          align: 'left',
          x: 'right',
          y: 'bottom',
          data: ['校园暴力行为', '正常行为', '睡觉行为', '玩手机行为']
        },
        series: [
          {
            name: '课堂行为',
            type: 'pie',
            radius: ['50%', '70%'],
            avoidLabelOverlap: false,
            center: ['40%', '50%'],
            itemStyle: {
              emphasis: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              },
              color: function (params) {
                // 自定义颜色
                var colorList = ['red', '#1FC48D', '#6DC8EC', '#3F8FFF']
                return colorList[params.dataIndex]
              }
            },
            data: this.opinionData2
          }
        ]
      })
    }
  }
}
</script>

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62
  • 63
  • 64
  • 65
  • 66
  • 67
  • 68
  • 69

这里稍微帮助小白们解释下其中的几部分
第一部分 legend:{}这里面的x,y是用来控制图注的位置的比如x: ‘right’,y: ‘bottom’,说明将图注放在右下角的位置。
第二部分 series:[] 这部分是echarts绘制图形的主体里面的data是你想在图中显示出什么内容。
{ value: 1, name: ‘校园暴力行为’, itemStyle: ‘red’ },说明你想在图中显示出校园暴力出现了一次(它会自己计算百分比)，颜色为红色
tooltip部分我放在结尾对比着将，你们会更容易理解

折线图

老规矩先上图
在这里插入图片描述

HTML部分

<template>
  <div class="test2" style="width:600px;height:400px;">
      <div id="myChart2" style="width:100%;height:278px;float:left;"></div>
  </div>
</template>

  • 1
  • 2
  • 3
  • 4
  • 5

JS部分

<script>
export default {
  name: 'test2',
  data () {
    return {
      myChart2: ''
    }
  },
  mounted: function () {
    this.drawLine1()
  },
  methods: {
    drawLine1 () {
      // 基于准备好的dom，初始化echarts实例
      this.myChart2 = this.$echarts.init(document.getElementById('myChart2'))
      // 绘制图表
      this.myChart2.setOption({
        title: {
          text: '近5次班级出勤情况', // 主标题
          subtext: '', // 副标题
          x: 'left' // x轴方向对齐方式
        },
        tooltip: {
          trigger: 'axis' // axis   item   none三个值
        },
        xAxis: {
          type: 'category', // 还有其他的type，可以去官网喵两眼哦
          data: ['近一次', '近两次', '近三次', '近四次', '近五次'], // x轴数据
          name: '' // x轴名称
          // x轴名称样式
          // nameTextStyle: {
          //   fontWeight: 600,
          //   fontSize: 18
          // }
        },
        yAxis: {
          type: 'value',
          name: '出勤人数' // y轴名称
          // y轴名称样式
          // nameTextStyle: {
          //   fontWeight: 600,
          //   fontSize: 18
          // }
        },
        legend: {
          orient: 'vertical',
          x: 'center',
          y: 'top',
          data: ['出勤人数']
        },
        series: [
          {
            name: '出勤人数',
            data: [50, 48, 52, 45, 53],
            type: 'line'
          }
        ]
      })
    }
  }
}
</script>

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62

legend与series依然表述图注和主题部分不再解释。
xAxis：代表X轴的内容，data表述X轴显示内容。
yAxis：代表Y轴内容。

饼图

在这里插入图片描述
HTML部分

<template>
  <div class="test2" style="width:600px;height:400px;">
      <div id="myChart3" style="width:100%;height:278px;float:left;"></div>
  </div>
</template>

  • 1
  • 2
  • 3
  • 4
  • 5

JS部分

<script>
export default {
  name: 'test2',
  data () {
    return {
      myChart3: '',
      opinion3: ['出勤人数', '缺勤人数'],
      opinionData3: [
        { value: 13, name: '缺勤人数', itemStyle: 'red' },
        { value: 19, name: '出勤人数', itemStyle: '#1ab394' }
      ]
    }
  },
  mounted: function () {
    this.drawLine2()
  },
  methods: {
    drawLine2 () {
      // console.log("开始画饼图")
      // 基于准备好的dom，初始化echarts实例
      this.myChart3 = this.$echarts.init(document.getElementById('myChart3'))
      // 绘制图表
      this.myChart3.setOption({
        title: {
          text: '班级总体出勤情况', // 主标题
          subtext: '', // 副标题
          x: 'left' // x轴方向对齐方式
        },
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b} : {c} ({d}%)'
        },
        legend: {
          orient: 'vertical',

          bottom: 'bottom',
          data: this.opinion3
        },
        series: [
          {
            name: '出勤数据',
            type: 'pie',
            radius: '50%',
            center: ['50%', '50%'],
            data: this.opinionData3,
            itemStyle: {
              emphasis: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              },
              color: function (params) {
                // 自定义颜色
                var colorList = ['red', '#1ab394']
                return colorList[params.dataIndex]
              }
            }
          }
        ]
      })
    }
  }
}

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62
  • 63

柱状图

在这里插入图片描述HTML部分

<template>
  <div class="test2" style="width:600px;height:400px;">
      <div id="myChart4" style="width:100%;height:250px;float:left;"></div>
  </div>
</template>

  • 1
  • 2
  • 3
  • 4
  • 5

JS部分

<script>
export default {
  name: 'test2',
  data () {
    return {
      myChart4: '',
      opinion: ['正常行为', '暴力行为'],
      opinionData: [
        { value: 85, itemStyle: '#1ab394' },
        { value: 15, itemStyle: 'red' }
      ]
    }
  },
  mounted: function () {
    this.drawLine4()
  },
  methods: {
    drawLine4 () {
      this.myChart4 = this.$echarts.init(document.getElementById('myChart4'))
      this.myChart4.setOption({
        title: {
          text: '校园暴力检测概率'
        },
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b} : {c}%'
        },
        legend: {
          orient: 'vertical',
          x: 'right',
          y: 'top',
          data: ['评估概率']
        },
        xAxis: {
          data: this.opinion
        },
        yAxis: {},
        series: [{
          name: '评估概率',
          type: 'bar',
          data: this.opinionData,
          itemStyle: {
            emphasis: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)'
            },
            color: function (params) {
              // 自定义颜色
              var colorList = ['#1ab394', 'red']
              return colorList[params.dataIndex]
            }
          }
        }]
      })
    }
  }
}
</script>

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59

最后给大家介绍下

tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b} : {c}%'
        },

  • 1
  • 2
  • 3
  • 4

这个tooltip其实是控制鼠标移到图像上面的提示信息的输出格式。其中br表示换行因此按照上面的格式应该输出为
a
b : c%
接下来我们来对比下：
在圆形图中采用格式为

{a} <br/>{b} : {d}%

  • 1

结果：c不输出
在这里插入图片描述饼图采用格式为

{a} <br/>{b} : {c} ({d}%)

  • 1

在这里插入图片描述以上就是《vue+elementUI中使用Echarts绘制圆环图 折线图 饼图 柱状图》的全部内容了。

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/Monodyee/article/detail/556834
推荐阅读