开发喵星球

本章教程，主要介绍一下如何在若依前后端分离框架中，进行echarts动态渲染数据。

1、编写一个柱状图数据接口

在SysConfigController类中，实现一个数据API接口。

@GetMapping(value = "/data")
public AjaxResult data() {
    HashMap<String, Object> map = new HashMap<>();
    map.put("data", Arrays.asList(18539, 15340, 16049, 19922));
    return success(map);
}

2、在api文件中引入

在api/system/config.js文件中加入接口。

export function data() {
  return request({
    url: '/system/config/data',
    method: 'get',
  })
}

3、定义一个柱状图组件

定义一个BarChart.vue的组件，其它eacharts图表也可仿照下面的例子来实现。

<template>
  <div :class="className" :style="{height:height,width:width}" />
</template>

<script>
import * as echarts from 'echarts';
require('echarts/theme/macarons') // echarts theme
import resize from './mixins/resize'
const animationDuration = 6000
export default {
  mixins: [resize],
  props: {
    className: {
      type: String,
      default: 'chart'
    },
    width: {
      type: String,
      default: '100%'
    },
    height: {
      type: String,
      default: '300px'
    },
    chartData: {
      type: Array,
      required: true
    }
  },
  data() {
    return {
      chart: null
    }
  },
  mounted() {
    this.nextTick(() => {
      this.initChart()
    })
  },
  beforeDestroy() {
    if (!this.chart) {
      return
    }
    this.chart.dispose()
  },
  methods: {
    initChart() {
      this.chart = echarts.init(this.el, 'macarons')

      this.chart.setOption({
  xAxis: {
    type: 'category',
    data: ['第1季度', '第2季度', '第3季度', '第4季度']
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      data: this.chartData,
      type: 'bar',
      showBackground: true,
      backgroundStyle: {
        color: 'rgba(180, 180, 180, 0.2)'
      }
    }
  ]
})
    }
  }
}
</script>

4、在首页使用组件

在index.vue中引入组件，容易遇到的问题，就是在用axios获取到后端数据的时候，echarts图表不渲染数据，为了解决这个问题，我们只需要调用一下子组件的initChart()方法即可解决。

<template>
  <div class="dashboard-editor-container">
    <el-row :gutter="32">
      <el-col :xs="24" :sm="24" :lg="8">
        <div class="chart-wrapper">
          <bar-chart ref="child" :chartData="chartData"/>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>

import BarChart from './dashboard/BarChart'
import {data} from '@/api/system/config'

export default {
  name: 'Index',
  components: {
    BarChart
  },
  data() {
    return {
      chartData:[]
    }
  },
  mounted(){
    this.handleSetLineChartData()
  },
  methods: {
   async handleSetLineChartData() {
     await data().then(response=>{
        this.chartData = response.data.data
      })
      // 重新渲染，否则数据不会生效
      this.$refs.child.initChart();
    }
  }
}
</script>

<style lang="scss" scoped>
.dashboard-editor-container {
  padding: 32px;
  background-color: rgb(240, 242, 245);
  position: relative;

  .chart-wrapper {
    background: #fff;
    padding: 16px 16px 0;
    margin-bottom: 32px;
  }
}

@media (max-width:1024px) {
  .chart-wrapper {
    padding: 8px;
  }
}
</style>

ECharts是一款基于JavaScript的数据可视化图表库，提供直观，生动，可交互，可个性化定制的数据可视化图表。ECharts最初由百度团队开源，并于2018年初捐赠给Apache基金会，成为ASF孵化级项目。
官网地址：https://echarts.apache.org/examples/zh/index.html (这里包含丰富的图标案例)