echarts柱状图在vue中使用渐变颜色

532 阅读1分钟

直接上代码

<template>
  <div id="app">
      <div ref="barChart" class="bar-chart"></div>
  </div>
</template>

<script>
import echarts from 'echarts';

export default {
  name: 'app',
  mounted() {
    const dataCountChart = echarts.init(this.$refs.barChart);
    const option = {
      color: [ // 这里的颜色的顺序对应legend中data中的项
        {
          type: 'linear',
          colorStops: [
            {
              offset: 0,
              color: '#55A6FF',
            },
            {
              offset: 1,
              color: '#8ED2FF',
            }
          ],
        },
        {
          type: 'linear',
          colorStops: [
            {
              offset: 0,
              color: '#7E6FCA',
            },
            {
              offset: 1,
              color: '#BFB1FB',
            }
          ],
        },
        {
          type: 'linear',
          colorStops: [
            {
              offset: 0,
              color: '#1B91A3',
            },
            {
              offset: 1,
              color: '#6FE5DB',
            }
          ],
        }
      ],
      title: { // 标题属性
        text: '',
        left: '20px',
        textStyle: {
          color: '#55a6ff',
          fontSize: 17,
        },
      },
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          // 坐标轴指示器,坐标轴触发有效
          type: 'shadow', // 默认为直线,可选为:'line' | 'shadow'
        },
      },
      legend: { // 图标属性设置
        itemHeight: 17,
        itemWidth: 40,
        left: '12.7%',
        data: ['公众号1', '公众号2', '公众号3'],
      },
      grid: { // 整个统计图的位置
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true,
      },
      xAxis: [
        {
          type: 'category',
          data: ['新增粉丝数', '净增粉丝数', '参与粉丝数', '完成粉丝数'],
          splitLine: {
            show: false,
          },
        }
      ],
      yAxis: [
        {
          // type: 'value',
          splitLine: {
            show: true,
          },
        }
      ],
      series: [
        {
          name: '公众号1',
          type: 'bar',
          barGap: 0,
          data: [320, 332, 301, 334],
        },
        {
          name: '公众号2',
          type: 'bar',
          barGap: 0,
          data: [320, 332, 301, 334],
        },
        {
          name: '公众号3',
          type: 'bar',
          barGap: 0,
          data: [320, 332, 301, 334],
        }
      ],
    };
    dataCountChart.setOption(option);
  },
};
</script>

<style lang="less" scoped>
  #app {
    .bar-chart {
      margin: 0 auto;
      height: 500px;
      width: 800px;
    }
  }
</style>