整合echarts实例

安装echarts

官网：https://echarts.apache.org/zh/index.html

 npm install echarts --save

如果出现报错err参考：https://blog.csdn.net/weixin_42711399/article/details/84350368

配置URL

import axios from 'axios'
const service = axios.create({
  baseURL: 'http://192.168.32.129:7001',
  timeout: 20000
})
export default service

配置api接口

import request from '@/utils/request'
export default { getUrl() {
  return request({
    url: '/desk/index/getImg',
    method: 'get'
  })
},
  showtx() {
    return request({
      url: '/echarts/tx',
      method: 'get'
    })
  },
  showzx() {
    return request({
      url: '/echarts/zx',
      method: 'get'
    })
  },
  showzxp() {
    return request({
      url: '/echarts/zxp',
      method: 'get'
    })
  }
}

vue页面

只有条形图我和数据库整合了，剩下的都是死数据，思路都一样。

注意vue执行方法顺序不同的问题，初始化方法要到回调函数里调用

 

<template>

<div> <el-dropdown @command="handleCommand">
  <el-button type="primary">
    显示数据<i class="el-icon-arrow-down el-icon--right"></i>
  </el-button>
  <el-dropdown-menu slot="dropdown">
    <el-dropdown-item command="a">条形图</el-dropdown-item>
    <el-dropdown-item command="b">折线图</el-dropdown-item>
    <el-dropdown-item command="c">堆叠区域图</el-dropdown-item>
    <el-dropdown-item command="d">散点图</el-dropdown-item>
    <el-dropdown-item command="e">雷达图</el-dropdown-item>
  </el-dropdown-menu>
</el-dropdown>
<div id="main" style="width: 600px;height:400px;"></div></div>
    
</template>
<script>
import lbt from '@/api/lbt'
import echarts from 'echarts'
export default {

  data() {
    return {
      xdata: [],
      ydata: []
    }
  },
  created() {
    // this.tb()
  },
  methods: {
    show() {
      lbt.showtx().then(response => {
        this.xdata = response.data.data.xdata
        this.ydata = response.data.data.ydata
        //要写到回调函数里，否则会出现执行顺序不一致问题
        this.tx()
      })
    },
    handleCommand(command) {
      if (command === 'a') {
        this.show()
      }
      if (command === 'b') {
        this.zx()
      }
      if (command === 'c') {
        this.zxp()
      }
      if (command === 'd') {
        this.sd()
      }
      if (command === 'e') {
        this.ld()
      }
    },
    tx() {
      var myChart = echarts.init(document.getElementById('main'))
      myChart.setOption({
        title: {
          text: 'ECharts 条形图'
        },
        tooltip: {},
        xAxis: {
          data: this.xdata
        },
        yAxis: {},
        series: [{
          name: '浏览量',
          type: 'bar',
          data: this.ydata
        }]
      }, true)
    },
    zx() {
      var myChart = echarts.init(document.getElementById('main'))
      myChart.setOption({
        title: {
          text: 'ECharts 折线图'
        },
        xAxis: {
          type: 'category',
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        yAxis: {
          type: 'value'
        },
        series: [{
          data: [820, 932, 901, 934, 1290, 1330, 1320],
          type: 'line'
        }]
      })
    },
    zxp() {
      var myChart = echarts.init(document.getElementById('main'))
      myChart.setOption({
        title: {
          text: '堆叠区域图'
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            label: {
              backgroundColor: '#6a7985'
            }
          }
        },
        legend: {
          data: ['邮件营销', '联盟广告', '视频广告', '直接访问', '搜索引擎']
        },
        toolbox: {
          feature: {
            saveAsImage: {}
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            boundaryGap: false,
            data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
          }
        ],
        yAxis: [
          {
            type: 'value'
          }
        ],
        series: [
          {
            name: '邮件营销',
            type: 'line',
            stack: '总量',
            areaStyle: {},
            data: [120, 132, 101, 134, 90, 230, 210]
          },
          {
            name: '联盟广告',
            type: 'line',
            stack: '总量',
            areaStyle: {},
            data: [220, 182, 191, 234, 290, 330, 310]
          },
          {
            name: '视频广告',
            type: 'line',
            stack: '总量',
            areaStyle: {},
            data: [150, 232, 201, 154, 190, 330, 410]
          },
          {
            name: '直接访问',
            type: 'line',
            stack: '总量',
            areaStyle: {},
            data: [320, 332, 301, 334, 390, 330, 320]
          },
          {
            name: '搜索引擎',
            type: 'line',
            stack: '总量',
            label: {
              normal: {
                show: true,
                position: 'top'
              }
            },
            areaStyle: {},
            data: [820, 932, 901, 934, 1290, 1330, 1320]
          }
        ]
      })
    },
    sd() {
      var myChart = echarts.init(document.getElementById('main'))
      myChart.setOption({
        xAxis: {},
        yAxis: {},
        series: [{
          symbolSize: 20,
          data: [
            [10.0, 8.04],
            [8.0, 6.95],
            [13.0, 7.58],
            [9.0, 8.81],
            [11.0, 8.33],
            [14.0, 9.96],
            [6.0, 7.24],
            [4.0, 4.26],
            [12.0, 10.84],
            [7.0, 4.82],
            [5.0, 5.68]
          ],
          type: 'scatter'
        }]
      })
    },
    ld() {
      var myChart = echarts.init(document.getElementById('main'))
      myChart.setOption({
        title: {
          text: '基础雷达图'
        },
        tooltip: {},
        legend: {
          data: ['预算分配（Allocated Budget）', '实际开销（Actual Spending）']
        },
        radar: {
        // shape: 'circle',
          name: {
            textStyle: {
              color: '#fff',
              backgroundColor: '#999',
              borderRadius: 3,
              padding: [3, 5]
            }
          },
          indicator: [
            {name: '销售（sales）', max: 6500},
            {name: '管理（Administration）', max: 16000},
            {name: '信息技术（Information Techology）', max: 30000},
            {name: '客服（Customer Support）', max: 38000},
            {name: '研发（Development）', max: 52000},
            {name: '市场（Marketing）', max: 25000}
          ]
        },
        series: [{
          name: '预算 vs 开销（Budget vs spending）',
          type: 'radar',
        // areaStyle: {normal: {}},
          data: [
            {
              value: [4300, 10000, 28000, 35000, 50000, 19000],
              name: '预算分配（Allocated Budget）'
            },
            {
              value: [5000, 14000, 28000, 31000, 42000, 21000],
              name: '实际开销（Actual Spending）'
            }
          ]
        }]
      })
    }
  }
}
</script>

java部分

service

注意：我用的是mybatis-plus，查询时要注意排序

    @Override
    public List<Echarts> selectTx() {
        QueryWrapper wrapper = new QueryWrapper();
        wrapper.orderByAsc("date");
        return  baseMapper.selectList(wrapper);
    }
}

controller

注意跨域，R是自定义的封装

@RestController
@RequestMapping("/echarts")
@CrossOrigin
public class EchartsController {

    @Autowired
    private EchartsService echartsService;
    @RequestMapping("tx")
    public R tx(){
        System.out.println("--tx---");
        List<Echarts> list = echartsService.selectTx();
        R r = R.ok();
        List<String> x = new ArrayList<>();
        List<Integer> y = new ArrayList<>();
        for(Echarts e:list){
            String date = e.getDate().format(DateTimeFormatter.ofPattern("yy-MM-dd"));
            x.add(date);
            y.add(e.getSum());
        }
        r.data("xdata",x);
        r.data("ydata",y);
        return r;
    }