Echarts的使用心得

Echarts—图形报表的使用

https://www.w3cschool.cn/echarts_tutorial/

使用案例：

图形

代码

<!--
 * chargeReportEchart.vue
 -->
<template>
    <div class="pageBg">
        <Row :gutter="16" class="rowStyle">
            <Col span="9">
                <Card>
                    <div style="height:369px">
                        ***<BasicECharts :option="paymentOption"></BasicECharts>***
                    </div>
                </Card>
            </Col>
            <Col span="15">
                <Card>
                    <div style="height:369px">
                        <BasicECharts :option="dayOption"></BasicECharts>
                    </div>
                </Card>
            </Col>
            <Col span="9" class="cloStyle">
                <Card>
                    <div style="height:369px">
                        <BasicECharts :option="sourcesOption"></BasicECharts>
                    </div>
                </Card>
            </Col>
            <Col span="15" class="cloStyle">
                <Card>
                    <div style="height:369px">
                        <BasicECharts :option="monthOption"></BasicECharts>
                    </div>
                </Card>
            </Col>
        </Row>
    </div>
</template>

<script>
  import Cookies from 'js-cookie';
  import util from '@/libs/util';
  **import BasicECharts from './component/basicECharts';**
  import {searchChargeEachers} from '@/api/chargeProjectManager.js';
  import '@/libs/bsmEnum.js';

  export default {
    name: 'equipmentHome',
    **components: {BasicECharts},**
    data() {
      return {
        searchTypeList: global.chargeStatisticsEnum,
        payChannelData: global.payChannelEnum,
        resourceList: global.resourceEnum,
        sourcesOption: {
          title: {
            text: '按日期统计'
          },
          color: ['#3398DB'],
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              // 坐标轴指示器，坐标轴触发有效
              type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
            }
          },
          grid: {
            left: '1%',
            right: '7%',
            bottom: '3%',
            containLabel: true
          },
          xAxis: [
            {
              name: '日期',
              type: 'category',
              data: [],
              axisTick: {
                alignWithLabel: true
              }
            }
          ],
          yAxis: [
            {
              name: '统计金额（单价：元）',
              type: 'value',

            }
          ],
          series: [
            {
              // name: "直接访问",
              type: 'bar',
              barWidth: '60%',
              label: {
                normal: {
                  show: true,
                  position: 'inside'
                }
              },
              data: []
            }
          ]
        },
        **paymentOption: {
          title: {---------------------------------------------------标题
            text: '按日期统计'
          },
          color: ['#3398DB'],
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              // 坐标轴指示器，坐标轴触发有效
              type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
            }
          },
          ***grid: {--------------------------------------------------------------------------坐标轴偏移值***
            left: '1%',
            right: '7%',
            bottom: '3%',
            containLabel: true
          },
          ***xAxis: [---------------------------------------------------------------------------------------X轴的一些属性***
            {
              name: '日期',
              type: 'category',
              ***data: [],-----------------------------------X轴显示的坐标值，可以动态添加（其本本质是一个数组）***
              axisTick: {
                alignWithLabel: true
              }
            }
          ],
          ***yAxis: [-----------------------------------------------------------------------------------Y轴的一些属性***
            {
              name: '统计金额（单价：元）',
              type: 'value',
            }
          ],
          series: [
            {
              // name: "直接访问",
              type: 'bar',
              barWidth: '60%',
              label: {
                normal: {
                  show: true,
                  position: 'inside'
                }
              },
              ***data: []----------------------------------Y轴显示的坐标值，可以动态添加（其本本质是一个数组）***
            }
          ]
        },**
        dayOption: {
          title: {
            text: '按日期统计'
          },
          color: ['#3398DB'],
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              // 坐标轴指示器，坐标轴触发有效
              type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
            }
          },
          grid: {
            left: '1%',
            right: '5%',
            bottom: '3%',
            containLabel: true
          },
          xAxis: [
            {
              name: '日期',
              type: 'category',
              data: [],
              axisTick: {
                alignWithLabel: true
              }
            }
          ],
          yAxis: [
            {
              name: '统计金额（单价：元）',
              type: 'value',

            }
          ],
          series: [
            {
              // name: "直接访问",
              type: 'bar',
              barWidth: '60%',
              label: {
                normal: {
                  show: true,
                  position: 'inside'
                }
              },
              data: []
            }
          ]
        },
        monthOption: {
          title: {
            text: '按月份统计'
          },
          color: ['#3398DB'],
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              // 坐标轴指示器，坐标轴触发有效
              type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
            }
          },
          grid: {
            left: '1%',
            right: '5%',
            bottom: '3%',
            containLabel: true
          },
          xAxis: [
            {
              name: '月份',
              type: 'category',
              data: [],
              axisTick: {
                alignWithLabel: true
              }
            }
          ],
          yAxis: [
            {
              name: '统计金额（单价：元）',
              type: 'value',

            }
          ],
          series: [
            {
              // name: "直接访问",
              type: 'bar',
              barWidth: '60%',
              label: {
                normal: {
                  show: true,
                  position: 'inside'
                }
              },
              data: []
            }
          ]
        },
        day: '', // 当月天数
        dayData: [] // 显示每月的天数
      };
    },
    mounted() {
      // this.setXData();
      this.countData();
    },
    methods: {
      // 获取登录用户所属组织机构
      setXData() {
        // this.setpostX();
        this.setDayX();
        this.setMonthX();
      },
      // 设置费用来源，缴费方式的x轴
      setpostX() {
        let data = ['支付宝', '微信', '现金', '企业网银', '龙支付'];
        // this.sourcesOption.xAxis[0].data = data;
        **this.paymentOption.xAxis[0].data = data;** ------设置X 轴的值
      },
      // 设置天数x轴
      setDayX() {
        for (let i = 1; i <= util.currentDay(); i++) {
          this.dayOption.xAxis[0].data.push(i + '号');
        }
      },
      // 设置月份x轴
      setMonthX() {
        for (let i = 1; i <= util.currentMonth(); i++) {
          this.monthOption.xAxis[0].data.push(i + '月份');
        }
      },
      countData() {
        this.getPayment();
        this.getDayData();
        this.getSources();
        this.getMonthData();
      },
      getDayData() {
        searchChargeEachers(this.searchTypeList[0].value)
          .then(res => {
            res.data.data.forEach(item => {
              this.dayOption.xAxis[0].data.push(item[1].substring(8, 10) + '号');
              this.dayOption.series[0].data.push(item[0]);
            });
          });
      },
      getSources() {
        searchChargeEachers(this.searchTypeList[3].value)
          .then(res => {
            if (res.data.code === 0) {
              res.data.data.forEach(item => {
                this.resourceList.forEach(obj => {
                  if (item[1] === obj.value) {

                    this.sourcesOption.xAxis[0].data.push(obj.label);
                  }
                });
                this.sourcesOption.series[0].data.push(item[0]);
              });
            }
          });
      },
      getPayment() {
        searchChargeEachers(this.searchTypeList[2].value)
          .then(res => {
            if (res.data.code === 0) {
              res.data.data.forEach(item => {
                this.payChannelData.forEach(obj => {
                  if (item[1] === obj.value) {
                    ***this.paymentOption.xAxis[0].data.push(obj.name);-------动态设置X轴的值***
                  }
                });
                ***this.paymentOption.series[0].data.push(item[0]);--------动态设置Y轴的值***
              });
            }
          });
      },
      // 查询
      getMonthData() {
        searchChargeEachers(this.searchTypeList[1].value)
          .then(res => {
            if (res.data.code === 0) {
              let listX = [];
              let listY = [];
              for (let i = 1; i < res.data.data[0][1].substring(6, 7); i++) {
                listX.push('0' + i + '月份');
                listY.push(0);
              }
              let listX1 = [];
              let listY1 = [];
              res.data.data.forEach(item => {
                listX1.push(item[1].substring(6, 7) + '月份');
                listY1.push(item[0]);
              });
              this.monthOption.xAxis[0].data = listX.concat(listX1);
              this.monthOption.series[0].data = listY.concat(listY1);
            }
          });
      }
    },
    created() {
    }
  };
</script>
<style>
    .ivu-icon-alert {
        font-size: 40px !important;
    }
</style>

<!--
 * basicECharts.vue
 -->
<template>
    <div style="width:100%;height:100%;" id="service_request_con"></div>
</template>
<script>
  import echarts from 'echarts';
  import util from '@/libs/util';
  export default {
      name: 'basicECharts',
      data () {
          return {
              echartsObj: ''
          };
      },
      props: {
          option: {
              type: Object,
              required: true,
              default: {}
          }
      },
      mounted () {
          this.$nextTick(() => {
              this.initPieChart();
              window.addEventListener('resize', this.resizePie);
          });
      },
      methods: {
          initPieChart () {
              if (!this.echartsObj) {
                  this.echartsObj = echarts.init(this.$el);
              }
              this.echartsObj.setOption(this.option, true);
          },
          resizePie () {
              if (this.echartsObj) {
                  this.echartsObj.resize();
              }
          }
      },
      watch: {
          option: {
              handler: function (val, oldVal) {
                  this.option = val;
                  this.resizePie();
                  this.initPieChart();
              },
              deep: true
          }
      }
  };
</script>