vue中使用echart绘制柱状图、折现图、饼状图

echarts有几个主要的字段，title、legend、xAxis、 yAxis、tooltip、series。

title

图表的标题

legend

用来标志图表数据，data字段的数组需要对应每个柱条的名称，鼠标hover到最顶部的legend标志，可以标志对应的图，点击legend标志会隐藏对应的图。

xAxis

配置x轴数据、样式、名称

 yAxis

配置y轴数据、样式、名称

tooltip

鼠标放到图上展示的数据样式，trigger: 'axis'   (有axis/item/none三个值,axis是一条竖线)

series

y轴数据，设置每个数据的名称、样式

1.柱状图

mounted () {
this.getByrsEcharts()
}

methods: {
 // 毕业人数
 getByrsEcharts () {
   const option = {
     // 标题
     title: {
       text: '毕业人数柱状图'
     },
    // 鼠标放到图上展示的数据样式，trigger: 'axis'   (有axis/item/none三个值,axis是一条竖线)
     tooltip: {},
    // 用来标志图表数据，data字段的数组需要对应每个柱条的名称，鼠标hover到最顶部的legend标志，可以标志对应的图，点击legend标志会隐藏对应的图
     legend: {
       data: ['毕业人数']
     },
     // 配置x轴数据、样式、名称
     xAxis: {
       type: 'category', // 可以不写，默认type就是category
       data: ['2020', '2021'], // x轴数据
       name: '日期',   // x轴名称
       // x轴名称样式
       nameTextStyle: {
         fontWeight: 600,
         fontSize: 18
       }
     },
     // 配置y轴名称，样式
     yAxis: {
       name: '数量',   // y轴名称
     },
     // y轴数据，每个柱条的名称
     series: [
       {
         name: '毕业人数',
         type: 'bar', // 类型为柱状图
         data: [50, 100],
         barWidth: '20%', // 柱条宽度 每个柱条的宽度就是类目宽度的 20%
         // 柱子的样式
         itemStyle: {
           color: '#5574c2'
         }
       }
     ]
   }
   const byrsBar = echarts.init(document.getElementById('byrsBar'))// 图标初始化
   byrsBar.setOption(option)// 渲染页面
   // 随着屏幕大小调节图表
   window.addEventListener('resize', () => {
     byrsBar.resize()
   })
 }
}

 

 2.折线图

// 论文著作
getLwzzEcharts () {
  const option = {
    title: {
      text: '论文著作折线图'
    },
    tooltip: {},
    legend: {
      data: ['著作', '论文']
    },
    xAxis: {
      type: 'category',
      name: '年份',   // x轴名称
      data: ['2020', '2021'] // x轴数据
    },
    yAxis: {
      name: '数量' // y轴名称
    },
    series: [
      {
        name: '论文',
        data: [10, 20],
        type: 'line',
        stack: 'x',
        lineStyle: {
          color: '#94cc74',
          width: 4
        }
      },
      {
        name: '著作',
        data: [15, 30],
        type: 'line',
        stack: 'x',
        lineStyle: {
          color: '#5574c2',
          width: 4
        }
      }
    ]
  }
  const lwzzLine = echarts.init(document.getElementById('lwzzLine'))// 图标初始化
  lwzzLine.setOption(option)// 渲染页面
  // 随着屏幕大小调节图表
  window.addEventListener('resize', () => {
    lwzzLine.resize()
  })
}

 

 

 3.饼状图 

// 毕业人数
getPieEcharts () {
  const option = {
    title: {
      // item有点多，和title重叠了
      // text: '会计人员结构分析饼状图'
    },
    tooltip: {},
    legend: {
      data: ['初级会计师', '中级会计师', '通过高级会计师考试','高级会计师', '正高级会计师']
    },
    // 饼状图不需要x轴和y轴
    // xAxis: {},
    // yAxis: {},
    // 可以直接在option里设置颜色
    color: ['#fc8251', '#5470c6', '#94cc74', '#ef6567', '#f9c956', '#75bedc'],
    series: [
      {
        type: 'pie', // 类型为饼状图
        data: [
          {
            value: 335,
            // 也可以给每个item设置样式
            // itemStyle: {
            //   color: '#37a2da',
            // },
            name: '初级会计师'
          },
          {
            value: 234,
            name: '中级会计师'
          },
          {
            value: 1548,
            name: '通过高级会计师考试'
          },
          {
            value: 335,
            name: '高级会计师'
          },
          {
            value: 234,
            name: '正高级会计师'
          }
        ]
      }
    ]
  }
  const kjjgPie = echarts.init(document.getElementById('kjjgPie'))// 图标初始化
  kjjgPie.setOption(option)// 渲染页面
  // 随着屏幕大小调节图表
  window.addEventListener('resize', () => {
    kjjgPie.resize()
  })
}