记账项目里必不可少的就是表格的使用,因此我在统计页面引入了 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 直接封装为一个组件, 我认为这样做很方便