vue echarts 折线图

最新推荐文章于 2022-06-29 17:45:21 发布

弱水三千只取一瓢饮

最新推荐文章于 2022-06-29 17:45:21 发布

阅读量201

点赞数

分类专栏： Echarts 文章标签： echarts vue.js javascript

本文链接：https://blog.csdn.net/weixin_43965881/article/details/125311529

版权

Echarts 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

安装echarts

 npm install echarts --save

引入echarts

import * as echarts from 'echarts'

Vue.prototype.$echarts = echarts

准备容器

<div id="PersonnelThreeNewRecruits" ></div>

javascript代码

 // 初始化echarts实例
      var myChart = this.$echarts.init(document.getElementById('PersonnelThreeNewRecruits'))

      // 图表的配置项和数据
      var option = {
        title: {
          text: '近五年年新招录人数'
        },
        tooltip: {
          trigger: 'item'
        },
        xAxis: {
          type: 'category',
          data: []
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            data: [],
            type: 'line',
            itemStyle: {
              normal: {
                color: 'rgb(255, 165, 0)',
                lineStyle: {
                  color: 'rgb(255, 165, 0)'
                }
              }
            },
            smooth: true
          }
        ]
      }

      var xData = []
      var series_data = []
      // 数据来源
      this.PersonnelThreeNewRecruits.filter((item, index) => {
        xData.push(item.years)
        series_data.push(item.peopleNumber)
      })

      option.xAxis.data = xData
      option.series[0].data = series_data

      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option)
      // 点击柱状图有效区域
      myChart.on('click', (params) => {
        var name = params.name
        // var seriesName = params.seriesName
      })