echarts和v-chart柱状图颜色渐变

最新推荐文章于 2024-06-12 11:23:34 发布

祝你今天也快乐

最新推荐文章于 2024-06-12 11:23:34 发布

阅读量215

点赞数

分类专栏： echarts 文章标签： echarts 信息可视化前端

本文链接：https://blog.csdn.net/killerdoubie/article/details/133862129

版权

echarts 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

echarts柱状图颜色渐变

series: [
  {
    type: 'bar',
    barWidth: 10,
    stack: 'total',
    data: this.seriesData,
    itemStyle: {
      normal: {
        color: new echarts.graphic.LinearGradient(1, 0, 0, 0, [{
          offset: 0,
          color: '#4d76ff'
        }, {
          offset: 1,
          color: '#80aaff'
        }]),
      }
    },
  }
],

v-chart柱状图颜色渐变

         {
            name: '当月耗电量',
            type: 'bar',
            itemStyle: {
              color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  {
                    offset: 0,
                    color: '#00e3fa',
                  },
                  {
                    offset: 1,
                    color: 'rgba(13,44,58,0.50)',
                  },
                ],
              },
            },
            yAxisIndex: 1,
            data: [2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2]
          }

 chargeBoxOption: {
        color: ['#5470C6', '#EE6666'],
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross'
          }
        },
        grid: {
          right: '20%'
        },
        // toolbox: {
        //   feature: {
        //     dataView: { show: true, readOnly: false },
        //     restore: { show: true },
        //     saveAsImage: { show: true }
        //   }
        // },
        legend: {
          data: ['累计耗电量', '当月耗电量'],
          textStyle: {
            color: '#fff',
          },
          bottom: '10px',
        },
        xAxis: [
          {
            type: 'category',
            axisTick: {
              alignWithLabel: true
            },
            // prettier-ignore
            data: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月']
          }
        ],
        yAxis: [
          {
            type: 'value',
            name: '累计耗电量',
            position: 'right',
            alignTicks: true,
            axisLine: {
              show: true,
              lineStyle: {
                color: '#fff',
              }
            },
            // axisLabel: {
            //   formatter: '{value} ml'
            // }
          },
          {
            type: 'value',
            name: '当月耗电量',
            position: 'left',
            alignTicks: true,
            axisLine: {
              show: true,
              lineStyle: {
                color: '#fff',
              }
            },
            // axisLabel: {
            //   formatter: '{value} °C'
            // }
          }
        ],
        series: [
          {
            name: '累计耗电量',
            type: 'line',
            yAxisIndex: 0,
            itemStyle: {
              color: '#FF6A29'
            },
            data: [
              2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3
            ]
          },
          {
            name: '当月耗电量',
            type: 'bar',
            itemStyle: {
              color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  {
                    offset: 0,
                    color: '#00e3fa',
                  },
                  {
                    offset: 1,
                    color: 'rgba(13,44,58,0.50)',
                  },
                ],
              },
            },
            yAxisIndex: 1,
            data: [2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2]
          }
        ]
      }