vue中使用echarts并从Java后台获取数据

使用步骤：

安装插件
npm install echarts -S

使用npm 安装 Echarts，安装成功后，可在项目package.json 文件中查看到

导入使用有两种方式：
1、在项目的入口js文件 main.js中添加全局引入
import echarts from 'echarts'
2、也可以采用按需要引用：
在vue文件中添加对应库

// 引入基本模板
let echarts = require('echarts/lib/echarts');
// 引入柱状图组件
require('echarts/lib/chart/bar');
// 引入提示框和title组件
require('echarts/lib/component/tooltip');
require('echarts/lib/component/title');

<!-- ECharts图表测试 -->
<template>
<!-- 图表 -->
<div class="vol-data">
 <div class="charts" style="width:'100%',height:'6.54rem'">
   <div class="charts-title">
     24小时内最高：99.99
   </div>
   <div id="myChart" :style="{width:'100%',height:'300px'}">
   </div>
 </div>
</div>
<template>

这里最要注意的就是：
var myChart = echarts.init(document.getElementById('myChart'));
也有教程说明这里要用
var myChart = this.$echarts.init(document.getElementById('myChart'));

至于使用echarts.init还是this.$echarts.init应该自己去尝试！

<script>
// 导入方法两者二选一：
第一种：main.js全局引入
import echarts from 'echarts'
//第二种：按需引入
/*
	// 引入基本模板
    let echarts = require('echarts/lib/echarts');
    // 引入柱状图组件
    require('echarts/lib/chart/bar');
    // 引入提示框和title组件
    require('echarts/lib/component/tooltip');
    require('echarts/lib/component/title');
 */
export default {
  name: 'Bank',
  data () {
    return {
    }
  },
 mounted(){
            this.drawLine();
        },
        
 methods:  {
 drawLine(){
    /*ECharts图表*/
    var myChart = echarts.init(document.getElementById('myChart'));
    myChart.setOption({
      xAxis: {
       type: 'category',
       data: ['0', '6H', '9H', '12H', '15H', '18H', '24H']
       },
       yAxis: {
           type: 'value'
       },
       series: [{
           data: [1, 3, 4, 7, 4, 6, 9],
           type: 'line'
      }]
     })
	}
  },
  methods:{
  }
}
</script>

从后台获取数据

这里最主要的就是，看echarts折线图需要什么数据，你就从后台对数据进行处理，封装成它需要的数据，然后传给前端进行展示即可！

在mouted中使用axios从后台获取数据

//获取历史30天内每天所有订单总数
orderMonitorApi.getHisOrderCount().then(res => {
 console.log("HisOrderCountDate:  " + res);
 //封装折线图需要的数据
 let hisOrderCountDateList = [{
   name: '',
   type: 'line',
   stack: '总量',
   data: []
 }];
 hisOrderCountDateList[0].data = res.countMonthList;
 this.darwLineWithHisOrderCountDate(hisOrderCountDateList, res.dayList);
});

darwLineWithHisOrderCountDate方法

//历史30天内每天所有订单总数变化--折线图
darwLineWithHisOrderCountDate(hisOrderCountDateList, legendData) {
// 基于准备好的dom，初始化echarts实例
let myChart = echarts.init(document.getElementById('hisOrderCountDateDiv'));
// 绘制图表
myChart.setOption({
 tooltip: {
   trigger: 'axis'
 },
 legend: {
   data: legendData,
 },
 grid: {
   left: '12%',
   right: '4%',
   bottom: '3%',
   containLabel: true
 },
 toolbox: {
   feature: {
     saveAsImage: {}
   }
 },
 xAxis: {
   type: 'category',
   boundaryGap: false,
   data: legendData
 },
 yAxis: {
   type: 'value'
 },
 series: hisOrderCountDateList,
});
},

遇到的问题

echarts标题title和图例legend重合的解决方法。

重合的样子：

解决方法： 在legend里加上top属性，可直接写数字top：5，代表具体的5像素；也可以写top: ‘5%’，具体参考echarts官方文档配置手册里 legend。
解决后的样子：

这里好像一排放置多个图形排列的时候，这种方法好像没有效果或者是legend有两排的情况下也有问题
于是采用了
<h3 style="text-align: center;">30天内每天每种订单数量变化</h3>
这种方式让其居中

常用技巧

1、echarts的legend图例的显示与隐藏（legend折线图加载完页面显示的个数）

项目需求： 在一开始下加载图表的时候不显示legend的某几个字段，点击时候才显示数据
未设置时，全部显示：

设置后隐藏视频广告和搜索引擎数据：

只要在legend里面的字段加个selected，然后设置不需要显示的数据标题

2、echarts标题（title）配置
https://blog.csdn.net/zhang__ao/article/details/80745873

参考文章:
https://blog.csdn.net/kekexiaomayi/article/details/89672594
https://blog.csdn.net/FAFAX/article/details/89857695
https://blog.csdn.net/gqzydh/article/details/81126181
https://blog.csdn.net/longgeaisisi/article/details/89405519