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},{name: '2022-4-4',value: 4116},{name: '2022-4-5',value: 6716},{name: '2022-4-6',value: 2716},{name: '2022-4-7',value: 3716},{name: '2022-4-8',value: 2016},{name: '2022-4-9',value: 3100},]}},methods: {drawCharts () {const chartDom = document.getElementById('main');const myChart = echarts.init(chartDom);const xAxisData = this.chartsData.map(item => { return item.name })const yAxisData = this.chartsData.map(item => { return item.value })const option = {xAxis: [{type: 'category',data: xAxisData}],yAxis: [{type: 'value'}],series: [{type: 'bar',data: yAxisData,itemStyle: {// 主要就是将color以函数的形式动态设置color: (params) => {// dataIndex是当前这条数据的下标，可以打印params看看里边都有什么if (params.dataIndex == 0) {return 'red'} else {// 这里注意实际项目中，浮点型数据的运算，单纯的比较大小会出现异常现象if (params.data > yAxisData[params.dataIndex - 1]) return 'red'return 'green'}}}},]};option && myChart.setOption(option);}},mounted () {this.drawCharts()}
}
</script><style scoped>
#main {width: 600px;height: 600px;
}
</style>