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

最新推荐文章于 2023-05-26 11:12:27 发布

杨哥杨哥万万岁

最新推荐文章于 2023-05-26 11:12:27 发布

阅读量1.9k

点赞数

分类专栏： echarts 文章标签： echarts 前端

本文链接：https://blog.csdn.net/wozhenhaokan/article/details/124092977

版权

本文介绍如何利用echarts创建柱状图，以红色和绿色柱子展示商品在不同日期的价格变化，红色表示价格上涨，绿色表示价格下跌，类似股票市场表现。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

实现出来的效果是这样的

老样子，文字说明都在代码注释里，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',
          val

最低0.47元/天解锁文章