vue项目里使用ECharts图表后台返回图表数据

最近项目里面要使用到图标，感觉ECharts挺不错，就添加到项目里了，图标数据是后台返回的.

1.vue引入echarts

npm install echarts -S (导入方法有很多，根据需要自行选择)

2.main.js全局引用

import ECharts from 'echarts'
Vue.prototype.echarts=ECharts;
Vue.use(ECharts);

3.在具体文件中使用

<template>
    <section class="section">
        <Breadcrumb>
            <BreadcrumbItem>首页</BreadcrumbItem>
        </Breadcrumb>
        <Divider/>
        <div id="main" style="width:600px;height:400px;">
        </div>
    </section>
</template>
<script>
    export default {
        data() {
            return {
             
            }
        },
        mounted() {
            this.charts();
        },
        methods: {
            charts(){
               let chart=this.echarts.init(document.getElementById('main'));
                //ajax请求接口获取数据
                this.Axios({
                    url: '你自己的后台接口地址',
                    params: _params,
                }).then(response => {
                    var res = response.data;
                    if (res && res.code === '0') {
                        chart.setOption(res);
                    } else {
                        this.$Message.error(res.msg);
                    }
                }, error => {
                    if (error.response) {
                        const _result = error.response.data;
                        this.$Message.error(_result.msg);
                    } else {
                        this.$Message.error('操作异常，请检查网络！');
                    }
                });
            } ,
        },
        components: {}
    }
</script>

4.后台代码

封装了一个EChartsOptionUtil工具类

package cn.rocketai.saas.common.util;

import com.github.abel533.echarts.axis.AxisTick;
import com.github.abel533.echarts.axis.CategoryAxis;
import com.github.abel533.echarts.code.*;
import com.github.abel533.echarts.feature.DataView;
import com.github.abel533.echarts.feature.MagicType;
import com.github.abel533.echarts.feature.Mark;
import com.github.abel533.echarts.json.GsonOption;
import com.github.abel533.echarts.series.Bar;
import com.github.abel533.echarts.series.Pie;
import com.github.abel533.echarts.style.ItemStyle;
import com.github.abel533.echarts.style.LineStyle;
import com.github.abel533.echarts.style.itemstyle.Normal;

import java.util.HashMap;
import java.util.Map;

/** ECharts图表工具类 Author: dengWenBo Date: 19-1-16 */
public class EChartsOptionUtil {

  /**
   * 生成柱状图的Option
   *
   * @param xValue X轴的值
   * @param yValue Y轴的值
   * @param title 标题
   * @param legend 图例（单位）
   * @param xName
   * @param yName
   * @return
   */
  public static GsonOption getBarGraphOption(
      Object[] xValue, Object[] yValue, String title, String legend, String xName, String yName) {

    GsonOption option = new GsonOption();

    if (title != null) {
      option.title(title); // 标题
    }
    // 工具栏
    option
        .toolbox()
        .show(true)
        .feature(
            Tool.mark, // 辅助线
            new DataView().show(true).readOnly(true), // 数据视图 Tool.dataView
            new MagicType(Magic.line, Magic.bar), // 线图、柱状图切换
            Tool.restore, // 还原
            Tool.saveAsImage); // 保存为图片
    option
        .tooltip()
        .show(true)
        .trigger(Trigger.axis)
        .formatter("{a} <br/>{b} : {c}"); // 显示工具提示,设置提示格式

    if (legend != null) {
      option.legend(legend); // 图例
    }

    // x轴
    CategoryAxis xCategory = new CategoryAxis();
    // x轴数据配置 500 x宽度
    xCategory.data(xValue).boundaryGap(true).name(xName).nameGap(500).type();
    // 如果x轴数据过多者隔一个显示interval(1)隔一个显示rotate(30)倾斜度
    if (xValue.length > 10) {
      xCategory.axisLabel().position("end").interval(1).rotate(0);
    } else {
      xCategory.axisLabel().position("end").interval(0).rotate(0);
    }
    xCategory.splitLine().show(true).lineStyle(new LineStyle().type(LineType.dashed));
    xCategory.axisTick(new AxisTick().show(true).inside(true));
    option.xAxis(xCategory);

    // y轴
    // yAxis[{name : '区域销量',nameLocation : 'end',nameGap : 20,type : 'value'}],

    CategoryAxis yCategory = new CategoryAxis();
    yCategory.name(yName).type(AxisType.value).position("end");
    yCategory.splitLine().show(true).lineStyle(new LineStyle().type(LineType.dashed));
    option.yAxis(yCategory);
    // 图类别(柱状图)
    Bar bar = new Bar();
    // 循环数据
    for (int i = 0; i < xValue.length; i++) {
      // 类目对应的柱状图
      Map<String, Object> map = new HashMap<String, Object>();
      map.put("value", yValue[i]);
      map.put("itemStyle", new ItemStyle().normal(new Normal().color("#01B9D4"))); // 图形颜色
      // map.put("barWidth", 20); // 柱状图的宽度 如果数据过少设置宽度为20
      // map.put("barMaxWidth", 20);
      bar.data(map);
    }
    bar.name(legend);
    if (xValue.length < 3) {
      // 设置柱状图 宽度
      bar.barWidth(100);
    }
    option.series(bar);
    return option;
  }
}

根据需求写实现类

public Option ageData(User currUser) {
    // 年龄段0-15，16-25，26-35，36-45，大于46
    List<String> ageFifteen = dataAnalysisMapper.selectByAge(currUser.getId(), "0~15岁");
    List<String> ageTwenty = dataAnalysisMapper.selectByAge(currUser.getId(), "16~25岁");
    List<String> ageThirty = dataAnalysisMapper.selectByAge(currUser.getId(), "26~35岁");
    List<String> ageForty = dataAnalysisMapper.selectByAge(currUser.getId(), "35~45岁");
    List<String> overFort = dataAnalysisMapper.selectByAge(currUser.getId(), "⼤于46岁");
    List<Object> x = new ArrayList<>();
    x.add("0~15岁");
    x.add("16~25岁");
    x.add("26~35岁");
    x.add("35~45岁");
    x.add("⼤于46岁");
    Object[] xObject = x.toArray(new Object[0]);
    List<Object> y = new ArrayList<>();
    y.add(String.valueOf(ageFifteen.size()));
    y.add(String.valueOf(ageTwenty.size()));
    y.add(String.valueOf(ageThirty.size()));
    y.add(String.valueOf(ageForty.size()));
    y.add(String.valueOf(overFort.size()));
    Object[] yObject = y.toArray(new Object[0]);
    return getOption(xObject, yObject, "年龄段", "年龄段");
  }

最后把数据返回前台（最后的数据需要toString() )