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

最新推荐文章于 2023-12-02 17:52:25 发布

煎饼果子就咖啡

最新推荐文章于 2023-12-02 17:52:25 发布

阅读量1k

点赞数 1

文章标签： echarts vue.js elementui

本文链接：https://blog.csdn.net/weixin_49498516/article/details/129431187

版权

安装

npm install echarts --save

全局引用

main.js中配置

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

折线图

在这里插入图片描述

HTML部分

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

JS部分

<script>
export default {
  name: 'BrokenLine',
  data() {
    return {
      myChart2: '',
      formData: {
        title: {
          text: '历史数据分析', // 主标题
          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
          // }
          axisLabel: {
            formatter: this.setValue()
          }
        },
        legend: {
          orient: 'vertical',
          x: 'center',
          y: 'top',
          data: ['出勤人数']
        },
        series: [
          {
            name: '体检结果',
            data: [],
            type: 'line'
          }
        ]
      }
    }
  },
  mounted: function() {
    this.drawLine1()
  },
  methods: {
    drawLine1() {
      // 基于准备好的dom，初始化echarts实例
      this.myChart2 = this.$echarts.init(document.getElementById('myChart2'))
      // 绘制图表
      this.myChart2.setOption(this.formData)
    },
    formLoad(form) {
      const mapList = form
      const then = this
      mapList.forEach(item => {
        // debugger
        then.formData.xAxis.data.push(item.time)
      })
      this.myChart2.setOption(this.formData)
    },
    setValue(value) {
      var texts = []
      if (value === 0) {
        texts.push('woo')
      } else if (value <= 1) {
        texts.push('好')
      } else if (value <= 2) {
        texts.push('很好')
      } else if (value <= 3) {
        texts.push('非常好')
      } else {
        texts.push('完美')
      }
      return texts
    }
  }
}
</script>

<style scoped>

</style>