echarts formatter_记账项目笔记(三) ECharts的应用和及时渲染

记账项目里必不可少的就是表格的使用，因此我在统计页面引入了 ECharts

看看我的效果

它长这样，是不是很好看简单干净（夸夸自己！！！）

其实它刚开始可不是这样的，刚开始很不符合我的审美标准和数据标准，所以我用了差不多一天的时间来调表格数据和样式

这是他刚开始的样子

安装

把 ECharts 的 Vue 插件和 TS 插件都安装好 yarn 或 npm 根据自己偏好选

npm install echarts --save 
npm install @types/echarts --save

yarn add echarts
yarn add @types/echarts

引入

在 main.ts 里引入下面代码

import Echart from 'echarts';
Vue.prototype.$echarts = Echart;

使用

接下来是一大段代码，请小伙伴么直接复制即可

<template>
  <div id="myEcharts"></div>
</template>

<script lang="ts">
  import Vue from 'vue';
  import {Component} from 'vue-property-decorator';
  import 'echarts/lib/chart/bar';

  @Component
  export default class Echarts extends Vue {
    mounted() {
      const ele = document.getElementById('myEcharts');
      const chart: any = this.$echarts.init(ele);
      chart.setOption(this.options, true, false);
    }
    $echarts: any;
    options = {
      xAxis: {
        boundaryGap: false,
        splitLine: {
          show: false
        },
        type: 'category',
        data: //这里我的数据是月份,请自行修改
      },
      yAxis: {
        show: false,
        type: 'value'
      },
      series: [
        {
          data: //这里我的数据对应月份的数据,请自行修改
          itemStyle: {
            normal: {
              label: {
                show: true,
                position: 'top',
              }
            }
          },
          areaStyle: {
            shadowColor: 'rgb(30,29,43)',
            color: {
              type: 'linear',
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [{
                offset: 0, color: 'rgba(96,102,120,1)' // 0% 处的颜色
              }, {
                offset: 1, color: 'rgba(96,102,120,0.1)' // 100% 处的颜色
              }],
              global: false // 缺省为 false
            }
          },
          name: '月份',
          type: 'line',
          stack: '总量',
          // 径向渐变，前三个参数分别是圆心 x, y 和半径，取值同线性渐变
          color: '#212943',
          label: {
            normal: {
              show: true,
              position: 'top',
              formatter: function (params: any) {
                if (params.value > 0) {
                  return params.value;
                } else {
                  return '';
                }
              },
            }
          },
        }]
    };
  }
</script>

<style lang="scss" scoped>

</style>

注意:

options 里有两处数据我是动态渲染的，需要的小伙伴或者动态渲染，或者添加静态，但是必须有数据，而且一一对应

遇到的问题

在动态渲染图表的时候我给组件声明了一个 Porp 从外部拿数据去实现及时更新，但是在外部数据改变的时候图表数据并没有更新

后来我以为是 Vue 的钩子时机问题，试了很久问了其他人都没有结果，后来就想另辟蹊径看看是不是 ECharts 的问题，没想到去网上一搜还有不少人和我遇到了同样的问题

原来不是 Vue 的错，而是 ECharts 默认渲染一次后就不会及时更新数据了，需要设置参数来唤醒它的及时更新

后来我找到了解决方法

chart.setOption(option, notMerge, lazyUpdate);

问题的根源就在这句代码上

• option： 是我们自己配置的 options
• notMerge（导致不能及时更新的关键参数）：可选，这个参数意思就是当数据变化的时候，是否不跟之前设置的数据合并，这个参数默认为 false，也就是合并，把它改成 true，然后它就不会默认合并之前的数据了
• lazyUpdate：可选，在设置完option后是否不立即更新图表，默认为false，即立即更新，这个设置 false 就行

然后我就把我上面那一大段代码上的 setOption 设置了一下，然后数据就及时更新了，太棒了，大家如果想体验一下，请去我的小猫记账体验一下，效果真的很棒

好了，到这里你差不多已经会在 Vue + TS 项目中使用 ECharts 了

更新: 从 React 中引用 Echarts

安装

npm install --save echarts-for-react
npm install --save echarts

引入全部

import ReactEcharts from "echarts-for-react";

开始使用

class Echarts extends React.Component {
   getOption = () => { //这里填 Echarts 的 option 选项 }
   render() {
       return (
        <div className="Echarts" id="Echarts">
           <ReactEcharts notMerge={true}  option={this.getOption()}/>
        </div>
     );
   }
}

• notMerge={true} 设置及时渲染

React 里使用 Echarts 比 Vue 里简单很多, React 把 Echarts 直接封装为一个组件, 我认为这样做很方便