echarts柱状图根据不同颜色，反映数据涨跌趋势

拿到这样一个需求，用柱状图展示商品不同日期的不同价格，并且需要反映出数据的涨跌（红色柱子表示同比前一天上涨，绿色柱子表示同比前一天下跌），类似股票的展现形式。

实现出来的效果是这样的

老样子，文字说明都在代码注释里，vue项目直接跑

<template>
  <!-- echarts柱状图根据不同颜色，反映数据涨跌趋势 -->
  <div id="main"
       ref="charts"></div>
</template>

<script>
import * as echarts from 'echarts';
export default {
  data () {
    return {
      chartsData: [
        {
          name: '2022-4-1',
          value: 3716
        },
        {
          name: '2022-4-2',
          value: 2716
        },
        {
          name: '2022-4-3',
          value: 1816
        },