echarts开发

 1.前端模板

<template>
  <div
    class="echart"
    ref="mychart"
    id="mychart"
    :style="{ float: 'left', width: '100%', height: '400px' }"
  ></div>
</template>

<script>

import * as echarts from "echarts";
export default {
  props: {
    keys: {
      type: Array,
      required: true,
    },
    values: {
      type: Array,
      required: true,
    },
    title:{
      type: String,
      required: true,
    }
  },
  data() {
    return { 
      props: this.keys,
      props: this.values,
      props: this.title
    };
  },
  mounted() {
    this.initEcharts();
  },
  methods: {
    initEcharts() {
      const option = {
  title: {
    text: 'World Population'
  },
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'shadow'
    }
  },
  legend: {},
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
  xAxis: {
    type: 'value',
    boundaryGap: [0, 0.1]
  },
  yAxis: {
    type: 'category',
    data: ['Brazil', 'Indonesia', 'USA', 'India', 'China', 'World']
  },
  series: [
    {
      type: 'bar',
      data: [18203, 23489, 29034, 104970, 131744, 630230]
    },
  ]
};
option.yAxis.data=this.keys;
option.series[0].data=this.values;
option.title.text=this.title;

      const myChart = echarts.init(this.$refs.mychart);// 图标初始化
      myChart.setOption(option);// 渲染页面
      //随着屏幕大小调节图表
      window.addEventListener("resize", () => {
        myChart.resize();
      });
    }
  },

};
</script>

2.后端接口格式

Map<String, Object>